[React] useState, useEffect

Hooks 사용규칙

1. 최상위에서만 Hook을 호출해야 합니다.
2. 함수 컴포넌트 내에서만 Hook을 호출해야 합니다.(클래스형 컴포넌트 및 일반 함수 X)

useState

const [state, setState] = useState(initialState);

state: 기존 this.state
setState: 기존 this.setState
initialState: this.state의 default 값

Example

function Example() {
  const [count, setCount] = useState(0);
  const [isModalActive, setIsModalActive] = useState(false);
  
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
      <button onClick={() => setIsModalActive(!isModalActive)}>modal btn</button>
    </div>
  );
}

useEffect

React class의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되만, 하나의 API로 통합된 것입니다.

useEffect(() => {}, []) // CDM
useEffect(() => {}, [count]) //CDU: count가 바뀔 때마다 실행

componentDidMount

componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
}

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, []);

componentDidUpdate

componentDidUpdate(prevProps, prevState) {
  if (prevState.count !== this.state.count) {
    document.title = `You clicked ${this.state.count} times`;
  }
}

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // count가 바뀔 때만 effect를 재실행합니다.