[React] 주로 사용되는 필수 Reack Hook

React

리엑트 컴포넌트는 특정 상태가 변화할 때 화면을 다시 그리는 특성을 지닌다. 이를 렌더리이라고 한다.

컴포넌트의 Props나 State 가 변경되면 반응하며 렌더링을 발생시켜 요소를 전부 새로 그리는 작업을 수행한다.

모든 요소에 대해서 리렌더링이 발생하면 성능이나 동작상 오류가 생기므로 여러 Hook을 이용하여 이를 제어하여야 한다.

​

useState

UI와 반응하여 업데이트 되는 상태를 정의한다.

변화가 일어나면 현재의 모든 하위 요소에 대해 렌더링을 발생시킨다.

​

useMemo

컴포넌트가 리렌더링 될 때 컴포넌트 리렌더링이 필요 없는 부분을 메모이제이션하여 처리하기 위해 사용한다.

static한 성질(한번 출력 후 변하지 않는 요소 )을 지니는 컴포넌트의 출력에 쓰이며, 특정 의존성이 변할 때 업데이트 되도록 할 수 있다.

ex) 네비게이션 바, 헤더 등

​

useRef

렌더링되는 요소와 참조를 연결하거나 특정 변화 가능한 개체를 정의

현재 출력되는 element 요소를 받아올 때 사용. 리엑트 수명 주기에서 사용 가능한 특정 인스턴스 참조를 생성한다. ( 화면에 출력되지 않는 값의 변수 선언과 같다. )

​

useEffect

비동기적으로 특정 Property, 상태가 변경되었을 때 별도 의존성 처리

( 이 경우 Dependency를 통해 리렌더링 방지 )

​

useLayoutEffect

동기적으로 특정 Property, 상태가 변경되었을 때 별도 의존성 처리

화면 Paint가 수행되기 전에 동작하여 화면 깜빡임을 방지한다.

​

간혹 개발 중 분명 값이 변했는데 화면 렌더링이 안될 때가 있는데

아래 React Hook 실행 Flow 를 참고

​