리엑트 hook 정리!!

JunpyoAhn·2023년 11월 13일
1
post-thumbnail

줄## 정리

  • useState에서 함수형 업데이트와 일반 업데이트는 차이가 있음

그 전에 리엑트의 명령처리 방식을 알고 있어야 한다.
const [counter,setcounter] = useState(0);
에서 setcounter(counter+1) 를 온클릭 버튼에 3번 넣어서 +1씩한다고 치자
리엑트는 배치처리로 한번만 추가된다,즉 주문을 하고 나서 음식이 몇개가주문되었든 하나의 쟁반에만 담아서 가져온다는 것이다. 리엑트가 배치방식인 이유는 불필요한 리렌더링을 방지하기 위해 한꺼번에 업데이트를 한다고 한다.

  • useEffect

-useEffect는 컴포넌트가 렌더링 될때마다 특정작업을 수행하도록 설정 할 수 있는 훅이다.
-코드에서 함수안에 의존성배열이 빈칸일 경우 렌더링이 단 한번만 실행된다.
-의존성 배열을 통해 함수의 실행조건을 제어가능

  • useRef

-state와 차이는 state는 변경되면 렌더링이 되고 Ref는 변경되어도 렌더링이 되지않는다.
-useRef를사용하여 렌더링 될때 focus를 줄 수 있다.

  • useContext

  • props drilling를 방지하기 위해 useContex를 활용해 컴포넌트에 바로 접근 가능

0개의 댓글