React Hooks 간단 정리

 

useState

 - 현재 상태를 나타내는 state와 state를 변경하는 setState를 한 쌍으로 제공

 - state의 초기값 설정 가능, 첫 렌더링 때 한번 사용

 

useEffect

 - useEffect(function, deps) 형태로 사용

 - function은 실행시킬 함수, deps는 의존성 배열

 - 의존성 배열에 따라 각 특성을 지님

    - 1. 의존성 배열이 없는 경우 : 페이지가 렌더링 될 때마다 함수 실행

    - 2. 의존성 배열에 빈 배열을 넣는 경우 : 첫 렌더링때 함수 실행 (1회)

    - 3. 의존성 배열에 state 값이나 props로 상속받은 데이터 등을 넣는 경우 : 해당 값이 변할때 마다 함수 실행

    - 4. 언마운트시 cleanup 함수 적용 가능

 - side effect를 수행하기 위해 주로 사용 (렌더링과 관련 없는 작업을 의미 - 데이터 가져오기, 구독 설정, 타이머 설정 등)

 - 주로 비동기 작업, 데이터 불러오기, API 호출 등에 사용

 

useRef

 - 특정 DOM에 직접 접근하여 조작하는 hook

 

useMemo

 - 의존성 배열의 값이 변경될 때에만 다시 함수 실행

 - 값을 기억

 - 계산 비용이 큰 함수나 연산 결과를 기억하기 위해 사용

 

useCallback

 - 의존성 배열의 값이 변경될 때만 함수를 다시 실행(콜백함수)

 - 함수를 기억