패스트캠퍼스 챌린지 12일차 - 리액트 Hooks Deep하게 알아보기

 

 

맛보기 강의에서 잠시 hooks를 간단히 알아봤었는데(hook의 일부, useState, useEffect, 컴포넌트 생명주기와의 연관성),

이번 강의에서는 좀더 자세하게 리액트 공식문서에 따로 카테고리가 분리되어있는 hooks를 다뤘다.

 

Hook

 

만들어진 배경 

  -  컴포넌트 간에 상태공유를 위해 기초 뼈대를 개선 (기존에는 render props 나 고차컴포넌트(HOC)를 이용하여 해결)

  -  생애주기에 따른 이벤트 로직 분배의 애매함으로 코드가 복잡해지는 것을 간결화

  -  클래스 생성과 사용에 대한 이해에 어려움 (그러나 Class Component를 제거하진 않을 것)

 

hook?

  -  함수 컴포넌트에서 React state와 생명주기의 특성을 연동(연관되 부분끼리 로직을 함께 구성) 할 수 있도록 하는 함수

     (클래스에서는 동작하지 않는다.)

 

1) State Hook

  -  useState는 현재의 state값과 이 값을 업데이트 하는 함수를 쌍으로 리턴하는 함수

  -  제공되는 setState함수는 class의 this.setState와 유사하지만 기존의 state와 새로운 state 합치지 않는다.

     (그렇기 때문에 state는 이전 값을 가지고 있다)

2) Effect Hook

  -  useEffect는 함수 컴포넌트 내에서 side effects를 수행할 수 있도록하는 함수

  -  componentDidMount 나 componentDidUpdate, componentWillUnmount 에서의 로직을 한곳에 구현할수 있다.

 

Hook 사용 규칙

  -  컴포넌트 내 최상위에서만 호출해야한다. (반복문, 조건문, 중첩된 함수 내에서 호출하면 안된다.)

  -  React 함수 컴포넌트 내에서만 호출 가능하다(클래스 컴포넌트, 일반 javascript 함수에서는 불가)

  

Custom Hook

  -  custom hook의 이름은 use로 시작하고 함수 내에서 다른 hook을 호출하면 커스텀 훅이라고 부를수 있다.

  

 

hook 좀 더 알아보기

 

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.