[ReactJS] React 이론 공부 기초 - 3

 

Hook 이란?

• 컴포넌트에서 데이터를 관리하고 데이터가 변경될 때 상호작용을 하기 위해 사용하는 것
• hook은 리액트 함수(컴포넌트, hook) 내에서만 사용가능 함
• hook의 이름은 반드시 "use"로 시작해야 함
• 최상위 level에서만 hook을 호출할 수 있음
  • 실제로 프로젝트 1차에서 최상위 level이 아닌 조건문에서 사용하려고 했을 때, react가 에러를 발생시킨 경험을 했음

hook의 장점 

• 컴포넌트의 함수가 많아질 때 클래스 구성 요소로 리팩토링할 필요가 없음
• UI에서 로직을 더 쉽게 분리하여 두 가지 모두 사용 가능함
• 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 hook을 사용할 수 있음
• hook을 사용하면 컴포넌트로부터 상태 관련 로직의 추상화가 가능해짐

리액트 hook 종류

• useState
  • 컴포넌트 내 동적인 데이터를 관리할 수 있는 hook
  • 최초의 useState가 호출될 때 초기값으로 설정되며 이후 재 랜더링이 될 경우 무시함
  • state는 읽기 전용으로 직접 수정하면 안됨
  • state가 변경되면 자동으로 컴포넌트가 재랜더링 됨
• useEffect 
  
  • 함수 컴포넌트에서 side effect를 수행할 수 있음
  • 컴포넌트가 최초로 랜더링 될 때, 지정한 prop가 변경될 때마다 이펙트 콜백 함수가 호출 됨
    • Deps : 변경을 감지할 변수들의 집합(또는 배열)
    • EffectCallback: Deps에 지정된 변수가 변경될 때 실행할 함수
  • useEffect 이펙트 함수 내에서 다른 함수를 리턴할 경우, state가 변경되어 컴포넌트가 다시 랜더링 되기 전과 컴포넌트가 없어질때 (destory) 호출할 함수를 지정하게 됨
• useMemo
  • 지정한 state나 props가 변경될 경우 해당 값을 활용해 계산된 값을 메모이제이션하여 재랜더링시 불필요한 연산을 줄임
  • useMemo 연산은 랜더링 단계에서 이루어지기 때문에 시간이 오래 걸리는 로직을 작성하지 않는 것을 권장함
• useCallback
  • 함수를 메모이제이션하기 위해 사용하는 hook
  • 컴포넌트가 재랜더링될때 불필요하게 함수가 다시 생성되는 것을 방지함
• useRef
  • 컴포넌트 생애 주기 내에서 유지할 ref 객체를 반환함
  • ref 객체는 ".current"라는 프로퍼티를 가지며 이 값을 자유롭게 변경할 수 있음
  • 일반적으로 리액트에서 DOM element에 접근할 때 사용 (DOM element의 ref 속성을 이용함)
  • useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트가 재랜더링되지 않음

Custom Hook

• 로직의 재사용성을 높이기 위해서 custom hook을 제작함
• 한 로직이 여러번 사용될 경우 함수를 분리하는 것처럼 hook을 만드는 것
• hook의 이름은 "use"로 시작해야 함
• 한 hook 내의 state는 공유되지 않아야 함

Clean-Up(정리)이란?

• 클래스형 컴포넌트에서 unmounting 시, componentWillUnmount를 사용해서 더 이상 사용하지 않는 컴포넌트를 해제하는 것
• clean-up가 필요한 side effect
  • 리액트가 DOM을 업데이트 한 뒤 추가로 코드를 실행할 필요가 없는 경우
  • 메모리 누수가 발생할 수 있기 때문
• clean-up이 필요하지 않은 side effect
  •  리액트가 DOM을 업데이트 한 뒤 추가로 코드를 실행해야 하는 경우 side effect clean-up 필요가 없음
  •   즉, 컴포넌트 실행 이후 신경 쓸 것이 없는 경우 별다른 정리를 하지 않아도 됨

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript