React hook 의 개념과 사용법

 

1. Hook 이란?

기존 함수컨포넌트는 별도로 state 를 정의하거나 LifeCyle 에 맞춰 어떠한 코드를 실행 시킬 수 없어서 함수컴포넌트에 class 컴포넌트의 기능을 동일하게 사용하기 위해 사용

 

* hook 중 기본적으로 제공하는 기능들 말고 개발자가 커스텀해서 사용 할 수 있지만 hook 앞에 'use' 를 붙이는게 국룰이다!!  

 

2. useState >> state 를 사용하기 위한 hook

예를 들어 이러한 코드에 useState 를 적용해 보자...

* useState 사용법*

const [변수명, set함수명] = useState(초기값);

 

 

이는 class 컴포넌트에서 setState 를 사용해서 변수를 업데이트하고 재랜더링하는 과정과 같다.

 

2. useEffect >> side effect 사용할 수 있게 해준다

class 컴포넌트에서의 life cycle 과정에서 작용을 사용 할 수 있게해주는 hook 이다.

Class 컴포넌트에서의 Life Cycle

이런 과정을 수행 할 수 있게 해줌...!

 

*useEffect 사용법*

useEffect(이펙트함수, 의존성 배열<업데이트 시 반응할 변수의 목록>);

 

* 만약 이펙트함수가 mount 와 unmount 시 한번씩만 실행되게 하고 싶다면 

useEffect(이펙트함수, [빈배열]);

 

*컴포넌트가 업데이트될 때마다 호출되게 하고 싶은 경우

useEffect(이펙트 함수);

 

 

*컴포넌트가 unmount 되기 전 실행 시키고 싶은 함수는 return 할 때 넣어준다.

 

 

3. useMemo >> Memoized value return

Memoiztion >> 연산량이 많은 함수의 호출 결과를 저장했다가 같은 값으로 연산했을 때 리턴해주는 개념

 

*useMemo 사용법 >> useMemo 는 렌더링 되는 동안 실행된다.

const memoizedValue = useMemo(()=> {
	//연산량이 높은 작업을 수행하여 결과를 반환
    return computeExpensiveValue(의존성변수1, 의존성변수2);
},
[의존성변수1, 의존성변수2]);

 

 

4. useCallback >> useMemo 와 유사하나 값이 아닌 function 을 리턴

const memoizedCallback = useCallback (()=>{
	doSomething(의존성변수1, 의존성변수2);
}, [의존성변수1, 의존성변수2]);

 

 

5. useRef >> refObject 를 반환

const refContainer = useRef(초깃값);

 

 어렵다 어려워... 사실 이런식으로 이론적 정의를 알아보는 것보다 직접 실습하면서 배우는게 더 빠르게 습득하겠지만 (난체술러니까....)

 개념을 잡지 않은 채 맨땅에 헤딩보다는 알아보고 부딪히는게 덜 아플거 같아서 정리해보았다...