REACT_Hook

HOOK 

함수형 컴포넌트에서 클래스형 컴포넌트와 같이 state 와 생명주기 함수와 같은 기능을 사용하기 위해 

hook을 이용한다

대표적인 hook 함수에는 useState()와 useEffect()가 있다

 

-useState() 함수로 state 변수값을 선언 및 할당한다

이때 두 가지 인자가 선언된 배열이 반환된다

첫 번쨰 인자 contents는 state 변수명, 두 번째 인자 setContents는 state 변수값을 변경해주는 함수이다

 

-useEffect() : 생명주기 함수 componentDidMount()와 같이 return되는 html 코드들이 화면에 그려진 이후에

실행된다. 최초 페이지가 로딩일 때 한 번 실행되고 setContents() 함수로 state값이 변경되면 한 번 더 실행 된다

 

-R031_ReactHook.js

import { useState, useEffect } from "react";

function R031_ReactHook(props) {
    const [contents, setContents] = useState('[THIS IS REACT]');

    useEffect(() => {
        console.log('useEffect');
    });

    return (
        <div style={{padding: "0px"}}>
            <h2>{contents}</h2>
            <button onClick={() => setContents('[THIS IS HOOK]')}> 버튼</button>
        </div>
    )
}
export default R031_ReactHook;

 

- App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import ReactHook from './R031_ReactHook.js';

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <ReactHook/>
    </div>
  );
}

export default App;

 

 

결과

버튼을 눌렀을 때