[React] React Hooks

 

useState

: React의 가장 기본이 되는 Hook으로 컴포넌트를 리렌더(re-render) 시킬 수 있다.

setState를 호출하여 state의 값을 변경하면, 변경된 값을 보여주기 위해 컴포넌트가 리렌더된다.

 

- setState는 동기적으로 동작한다. -> 연속으로 여러번 실행할 경우, 업데이트된 state를 보장받지 못한다.

- state가 변할 경우, 컴포넌트 전체가 리렌더된다. -> 컴포넌트 내부에 정의된 모든 변수와 함수가 재선언, 재실행된다. -> 성능저하 이슈

 

useEffect

: 함수와 변수를 받아, 변수의 값이 변경될 시 함수를 실행시킨다.

변수는 의존성 배열(dependency array)로 여러 값을 포함시킬 수 있다.

의존성 배열이 비어있을 경우, 최초 렌더링 시 한번만 실행된다.

 

-  useEffect에서 setInterval 사용 시, 내부 함수가 clearInterval를 리턴하도록 해야한다.

- 컴포넌트가 리렌더링을 위해 기존 컴포넌트를 언마운트하는 시점에 return 된다.

 

useLayoutEffect

: useEffect와 거의 비슷하나, 의존성 배열 안의 state가 렌더링 되기 전 함수가 실행된다.

DOM 요소의 레이아웃(위치, 너비 등)에 대한 정보를 바탕으로하는 작업을 할 때 유용하다.

 

 

useContext

: 모든 컴포넌트에서 접근 가능한 전역 state를 관리할 수 있다.

컴포넌트 트리에서 props를 통해 전달하지 않아도 되기 때문에, props drilling을 해결하여 코드의 가독성을 높일 수 있다.

 

useReducer

: useState보다 복잡한 state를 관리하는 데 사용된다.

state 업데이트 로직을 효과적으로 분리하고 여러 액션을 처리한다.

다양한 하위 컴포넌트들이 동일한 state에 접근하여 업데이트를 수행할 때 유용하다.

 

const [state, dispatch] = useReducer(reducer, initialState);

- reducer와 initialState를 인자로 받아, state와 함께 dispatch는 액션 객체를 전달하는 함수를 리턴한다.

     - reducer :  호출될 때, 현재 상태와 액션 객체를 인자로 받아 새로운 상태를 반환하는 함수

     - initialState : 초기 상태 값

 

 

useRef

: 변경 가능한 값을 저장하고 유지하는 경유에 사용한다.

컴포넌트 렌더링 사이에서도 값을 변경할 수 있으며, 값의 변경이 리렌더링을 일으키지 않는다.

 

- ref은 변경 가능한 객체로, .current  속성을 통해 참조값에 접근하며 초기값을 설정할 수 있다.- testRef.current.focus(); <- DOM 요소에 직접 접근

 

useMemo

: 함수의 결과값을 저장(메모이제이션 / 캐싱)하고, 의존성 배열에 변수의 값이 변경될 시 계산을 다시 수정한다.

컴포넌트 리렌더링 시, 의존성 배열 안의 값이 같을 경우, 저장된 값을 불러옴 -> 불필요한 계산 X /  렌더링 성능 향상

 

useCallback

: 함수 자체를 메모이제이션하여, 의존성 배열에 명시된 값이 변경될 때만 새로운 함수 생성한다. -> 성능 최적화

 

useTransition

: 비동기 작업의 상태를 표시해주는 기능을 제공한다.

state의 업데이트를 특정 단위로 나누어 화면에 렌더링 ->브라우저의 화면 업데이트 속도 향상

 

- 두 개의 인자를 받아 사용

   - 비동기 작업의 실행상태(로딩)를 표시할 때, 화면에 보여줄 시간 간격

   - 해당 상태를 표시할 때의 렌더링 우선순위

 

- setState로 state를 전체적으로 업데이트할 때, useTransition의 timeoutMs 옵션 값을 적용함에따라 부분적인 업데이트를 먼저 수행하고,

해당 밀리초가 지난 후 나머지 업데이트를 실행할 수 있다. -> 복잡한 계산 포함된 컴포넌트의 렌더링 속도 향상