Hooks - React

useState는 state를 설정한다.

-useState의 사용법

//다른 훅도 마찬가지지만 useState도 사용시 리엑트에서 임포트해야 한다
Import React, {useState, useEffect} from ‘react’;

function Example() {
  const [count, setCount] = useState(0);
//첫 번째 인자인 count는 state가 되고, 
//두 번째 인자인 setCount는 count를 업데이트하는 setState의 역할을 한다
//useState()에 들어간 0은 state의 일부인 count의 초기값이 된다.

//이후 렌더하는 부분에서 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        count
      </button>
    </div>
  );
//useState의 두 번째 인자인 setCount를 이런 식으로 사용해 state를 업데이트한다
}

 

useEffect는 사이드이펙트(혹은 이펙트)를 제어한다.

라이프사이클의 대체제

-useEffect의 사용법

import React, {useState, useEffect} from 'react';

function Example() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    document.title = `You clicked ${count} times`;
//윗 부분은 컴포넌트가 마운트 될 때(useEffect의 두 번째 인자가 없을 때), 
//업데이트 될 때 작동한다(state가 useEffect의 두 번째 인자로 있을 때 그 인자가 업데이트 될 경우)
//(클래스 컴포넌트의 componentDidMount + componentDidUpdate와 비슷하다)
    return function cleanup() {
//useEffect의 return 부분은 컴포넌트가 언마운트 될 때 작동한다
//(클래스 컴포넌트의 componentWillUnmount)
    }
  });

  return (
    <div>
    <p>You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>
    Click
    </div>
  );  
}

더 공부할 것

useState

useEffect

useContext

useRef

useMemo and useCallback

useReducer