TIL #20

오늘 공부한 부분 정리

useState

-일반적인 방법: 배치성으로 처리 (배치 업데이트 = React에서 렌더링을 위해 state를 파악)
-함수형 업데이트: 명령들을 모아서 순차적으로 한 번씩 시행

렌더링이 잦다 => 성능 이슈 => React에서는 명령들을 모아 한 번에 처리하는 '배치 업데이트'

useEffect

-렌더링 될 때, 특정한 작업을 수행해야 할 때 설정하는 훅
-컴포넌트가 화면에서 보여졌을 / 사라졌을(return) 때

*의존성 배열: 이 배열에 값을 넣으면, 그 값이 바뀔 때만 useEffect를 실행한다.

useRef

-DOM 요소에 접근할 수 있도록 하는 React Hook.

1. 저장공간
   a. state와 비슷한 역할. state는 병화가 일어나면 다시 렌더링이 일어나고 내부 변수들이 초기화된다는 차이.
   b. ref에 저장된 값은 렌더링을 일으키지 x. 즉, 내부 변수의 초기화 방지.
   c. 컴포넌트가 여러 번 렌덜이 => ref 저장값은 유지
   d. 정리하면 state는 리렌더링이 꼭 필요한 값을 다룰 때, ref는 리렌더링을 발생시키지 않는 값을 다룰 때 사용한다.

2. DOM
   -렌더링 되자마자 특정 input이 focusing되어야 한다면 useRef를 사용한다.