HOOK

loopy·2022년 1월 4일
0

COSMOS

목록 보기
6/9

1. React Hooks의 등장

  • 리액트 컴포넌트: 클래스형 컴포넌트 / 함수형 컴포넌트

  • 클래스형 컴포넌트의 단점
    1. 코드가 길고 복잡
    (constructor, this, binding 등 지켜야 할 규칙이 많고, Life cycle method로 인해 기본적으로 뚱뚱)
    2. logic 재사용의 어려움
    3. 성능 비교적 낮음

  • 근데 왜 사용하냐?
    : state 관리와 Life cycle method 사용하려고

  • Hooks 등장!
    : 함수형 컴포넌트에서도 이러한 작업 할 수 있게 됨 + 기존의 클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점들까지 해결🤩

2. useState

매우 잘 숙지하고 있다고 생각하기 때문에.. 일단 생략!

3. useEffect

😡 이번 플젝에서 내 시간 잡아먹은놈 😡

전부터 어찌저찌 써오긴 했었다만.. 이번 플젝에서 갑자기 알 수 없는 오류가 여러번 나와서ㅜㅜ 그때그때 유튜브보고 구글링하며 수없이 공부했던 부분

  • useEffect는 컴포넌트가 렌더링될 때마다(화면에 그려질 때마다) 실행
  • useEffect 속에 setState 넣을 때, 렌더링 -> useEffect -> state변경 -> 렌더링 -> useEffect -> state변경 -> 렌더링 무한반복 조심!!!
  • ⭕ 해결 위해 useEffect에 두 번째 인자로 배열 전달
    -> 배열 속의 요소가 변화될 때에만 useEffect 실행
    (빈 배열 전달하면, 최초 렌더링 시 한 번만 실행)
profile
프론트엔드 열공중입니당

0개의 댓글