230620) React의 hook

특징: 변수는 랜더링 될 때마다 초기화 된다.

그래서 변경된 값을 저장하기 위해 아래 두 가지의 hook이 필요하다.

 

useState : 변경값이 필요할 때 사용, 값이 변경될 때마다 랜더링이 일어나게 한다.

useRef: 값 자체는 변경이 된 상태로 저장이 되지만, 랜더링이 일어나기 전까지 이가 표면적으로 보이진 않는다(값을 저장하기 위해 주로 사용)

 

useEffect: 특정 상황에서만 랜더링이 일어나게 한다. 의존성배열이 적용 되는데, 이가 빈값 [ ]으로 설정될 경우 단 한 번만 랜더링이 일어난다. 특정값을 설정할 경우에는, 해당 경우에만 랜더링이 일어난다.

 

useContext:  props를 최하위로 내려 주기 위해 props drilling현상이 일어날 때가 있는데, 이가 필요 없도록 전체를 기준으로 바로 필요 값을 불러올 수 있게 해 준다.

 

useMemo: 부모만 변경되었을 뿐인데 변경되지 않은 자식값들까지 변경이 되면 랜더링할 게 많아진다! (=비효율적임) 따라서 변경되지 않는 자식 부분들을 저장해 두고, 랜더링이 일어나지 않게 해 효율성을 극대화한다.

 

useCallback: memo, 그런데 이제 함수를 곁들인

 

 

hook 에 대한 이해가 많이 어려웠는데, 우선은 위처럼 이해하였다!

 

오늘도 잘 해냈다!