[React Hooks] useState() 와 useEffect()

useState()

const [item, setItems] = useState([]);

item ⇒ state 변경 이전의 값으로 고정이 되어 있다.

setState는 비동기다 ⇒ 이런 시점에 대한 고민을 하지 않아도 되게 되었다. ⇒ componentDidMount에 쓴다던지.. 이런 약간 React스러운 작업들이 많이 줄었다.

useState의 두 번째 요소 ⇒ setItems
setItems의 인자로 올 수 있는 것 ⇒

• 하나의 값이 올 수 있다.

• useState의 인자를 전달하여 초기값을 설정할 수 있습니다. useState(1) → item === 1;

• useState의 두 번째 요소에 값을 변경하는 함수도 쓸 수 있다.

• useReducer

  • 특정 조건에 작동되게 하는 useState

• useCallbakc, useMemo

  • 계산이 많이 필요한 작업의 경우, 미리 결과값을 메모리에 저장해놓는 기법을 useState에 적용한 것이다.

useEffect()

• useEffect

  • 두번째 인자 배열 요소가 없으면 componentDidMount와 거의 같다.
    • 없으면, rerender가 필요할 때마다 작동한다.
  • 배열의 요소가 변경이 되면, useEffect의 첫번째 인자 callback이 실행된다.
  • 들어오는 데이터가 바뀌는 경우
    • 전달되는 props가 바귀는 경우
    • lifting state up을 통해서 state가 변경되는 경우
    • 그 외의 이유 (컴포넌트 내부 로직)
  • useEffect를 통해서 사이드 이펙트를 만들어낼 수 있다.

• useEffect ⇒ 우선 컴포넌트 렌더 시 1회 작동된다.

  • 두 번째 인자 배열 요소가 변화함에 따라서 작동된다.
    • 전달되는 props가 변경되었다.
    • 내부 state가 변경되는 경우
    • 두 번째 인자 배열 요소 ⇒ state,props가 사용되는 것이 합당하다.