1/7[TIL]React Hooks

Hooks?

기존 클래스 컴포넌트를 사용하면서 생긴 단점들을 해결하기 위해 나온 것이 Hooks라고 전반적으로 이해해도 될 것 같다.

Hooks는 클래스 컴포넌트가 아닌 함수 컴포넌트에서 내가 필요한 로직만 가져와서 사용 할 수 있다.

 

기존 클래스 컴포넌트를 사용하면 불편했었던 

this.binding 이슈 라던지 이벤트 핸들러 사용 측면...

여러가지 데이터들을 사용하여 라이프사이클을 쓰게 되면 어느 시점에 라이프사이클을 사용할지 복잡했던 문제들...

한 가지 정보를 표현하기 위해 여러가지 Wrapper들이 생기고 이는 퍼포먼스가 떨어지게 되는 결과를 가져오게 되는 점...

 

위에 언급했던 측면들을 해결 해준다고 보면 될 것이다.

 

Hooks 가 나오기 이전에 함수 컴포넌트에서 stateful 한 로직 / 라이프사이클 함수을(를) 사용하기 힘들었지만

하지만 Hooks 가 출시 됨으로써 해결 가능해졌다.

기존 클래스 컴포넌트에서 라이프사이클을 사용하는 것도 리액트에서 시점을 강요한 것인데 클래스 컴포넌트는 하나의 데이터를 다루기 위해서도 3가지의 라이프사이클을 사용해야 한다.

 

Hooks의 장점을 간단히 알아보자면 클래스 컴포넌트에서 사용했던 기존의 라이프사이클을 비교해서 이야기할 수 있다.

componentDidMount와 componentDidUpdate 부분을 Hooks의 useEffect()를 사용하면 useEffect()의 두 번째 인자가 바뀔 때에 위의 함수들이 실행되어 한꺼번에 해결할 수 있다. 그리고 componentWillUnmount 또한 useEffect의 return 부분에서 구현이 가능하다. 하나의 데이터 셋에 하나의 함수만 선언하면 된다. 그렇기에 코드 또한 간결하고 가독성이 좋다.

 

클래스 컴포넌트는 컴포넌트 / props가 변할 때 라이프사이클 함수를 실행한다면 Hooks 같은 경우 data를 동기화한다.

클래스 컴포넌트 사용 시 강제적인 시점에서의 렌더 되는 사고방식에서 Hooks 이용 시 data 변화되었을 시에 렌더 되는 상대적으로 유동적인 변화인 측면에서 이해하면 될 것 같다.

 

클래스 컴포넌트는 이전 state/props와 지금 state/props를 비교해서 컴포넌트를 업데이트한다.

Hooks는 useEffect의 두 번째 인자에 의존하여 업데이트한다.

즉, Hooks는 state, props에 종속되지 않고 개발자가 원하는 변수 변화에 따른 함수 실행이 가능한 것이다.

import React, { useState } from 'react'; //우선 import 해오기!
 
const [count, setCount] = useState(0); //초기값은 배열 등등으로 설정가능함
//여기서 count는 기존의 state 중 하나로 이해 <변수>
//setCount는 setState를 한다고 생각하면 이해가 쉬울 것이다. 변동할 수 있는 <메소드>
//useState에 0을 넣은 것은 초기값으로 0을 넣어준 것이라고 보면 된다.

클래스 컴포넌트에서 사용하는 라이프사이클을 대신할 수 있다.

 

여기서 Side Effect(비동기적인 부분)과도 관련되는 부분인데

useEffect 사용 시에 두 번째 인자가 없다면 항상 Side Effect를 쓴다 라고 생각하면 되고
만약 반대로 두 번째 인자가 있다면 해당 인자가 변화되면 Side Effect를 쓴다고 생각하면 될 것 같다.

 

그리고 useEffect를 사용하기 전에 아래와 같이 import를 해주어야 하고

import React, { useState, useEffect } from 'react'; //우선 import 해오기!
 

//생략//
useEffect(()=> {
 
document.title = `you clicked ${count} times`;
}, [count]);
//생략//

count에 따라서 title이 동기화된다고 생각하면 될 것이다. 즉, 전체 컴포넌트가 계속 동기화되는 것이 아니라 count에 의해서만 동기화가 되는 것이다.
두 번째 인자에 count가 아닌 빈 배열을 넣게 되면 cDM처럼 mount 시 1회만 작동한다. 그래서 count 이 외에 다른 state가 변하더라도 변하지 않는다.

 

클래스 컴포넌트의 라이프사이클 측면에서 보면 cDM 한 후 setState를 하는 것이고 cDM에 fetch(sideEffect)를 주는 것이 대부분이다고 한다.

 

앞서 Hooks에서 사용하는 것들인 useState와 useEffect 말고도 useContext, useReducer, useCallback, useMemo 등 여러가지 Hooks 들이 존재하는데 이들은 추후에 공부한 후 올릴 예정이다.