React Hook이란? - useState

Hook이란? ✨

✔️함수 컴포넌트에서 React state와 Lifecycle 기능을 연동할 수 있게 해주는 함수 (버전 16.8부터 도입)

✔️만들어진 목적 자체가 함수 컴포넌트에서 사용하기 위함이었으니 당연히 클래스 컴포넌트 안에서는 동작하지 않음

✔️기존에 함수 컴포넌트를 사용하다가 state를 추가하고 싶어서 클래스 컴포넌트로 바꾸곤 했는데 이제 그럴 필요가 없다!

 

 

Hook의 사용 규칙

1️⃣최상위에서만 Hook 호출이 가능 (루프, 조건문, 중첩된 함수 안에서는 사용할 수 없음) : 조건문을 Hook 내부에 넣는 것은 괜찮음

-> 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장되어 state를 올바르게 유지할 수 있음

2️⃣리액트 함수 컴포넌트 내에서만 호출이 가능하며, 일반 자바스크립트 함수 안에서는 호출하면 안됨 (custom hook에서는 가능)

 

 

왜 Hook을 만들었을까?

☑️컴포넌트들 사이에서 상태 로직을 재사용하는 것의 어려움

  - higher-order component는 코드 추적이 어렵고 ‘wrapper hell’

  - Hook은 컴포넌트의 계층을 바꾸지 않고 상태 로직을 재사용할 수 있음

 

☑️복잡한 컴포넌트는 이해하기 어려움

  - 여러 Lifecycle 메소드들이 관련 없는 로직들과 섞여 있음 

  - 그래서 버그가 자주 발생하고 무결성 유지가 어려움

 

☑️ Class 컴포넌트는 인간과 기계 모두를 혼란스럽게 함

  - 리액트의 진입장벽

  - 코드가 장황해짐

  - Class 없이 React 기능을 사용해보자! -> Hook

 

---

그렇다면 useState 란?

Hook을 호출하여 함수 컴포넌트에 state 변수를 선언할 수 있는 함수 -> 컴포넌트가 다시 렌더링되어도 그대로 유지됨

기존 class 컴포넌트에서 사용하던 this.state와 동일한 역할을 한다.

useState는 state 변수와 state를 업데이트 하는 함수, 두 가지 쌍을 반환한다.

const [age, setAge] = useState(42);
const [fruit, setFruit] = useState('banana');
const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

 

이런 식으로 state들을 여러 개 선언할 수 있다. 위와 같은 표현은 구조 분해 할당이라고 한다.

첫 번째 인자는 state의 name이고 두 번째 인자는 state를 업데이트할 수 있는 함수이다.

useState에 전달하는 인자는 state의 initial value의 값이다. 객체로 넘겨주어도 된고 숫자나 문자 타입도 가능하다.

 

---

useEffect

 

React 컴포넌트 안에서 데이터 fetching, subsription, DOM을 직접 조작하는 것을 Side effect (줄여서 effects)라고 함

이유? 다른 컴포넌트에 영향을 줄 수도 있고 렌더링 과정에서는 구현할 수 없는 작업이기 때문이다.

effect는 두 가지로 나눌 수 있다.  ->  clean-up이 필요한 경우, 필요 없는 경우

 

useEffect 함수를 이용하면 함수 컴포넌트 내에서 side effect를 수행할 수 있다.

class 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount를 합친 하나의 API라고 보면 된다.

 

useEffect는 컴포넌트 내에 선언되었기 때문에 props와 state에 접근할 수 있다.

기본적으로 렌더링을 한 이후에 effects가 실행된다. (첫 번째로 하는 렌더링 이후에도 실행)

Effect를 해제(clean-up)하고 싶으면 return을 이용해서 해제하는 함수를 반환하면 된다.

React가 effect를 정리하는 시점은 컴포넌트의 마운트가 해제되는 시점이다.

useState처럼 여러 개의 effect를 사용할 수 있다.

-> 이때의 장점 : 서로 관련 있는 코드들을 한군데에 모아서 작성할 수 있음 (클래스 컴포넌트는 각 주기에 맞게 쪼개서 작성함)

 

 

 

---

참고문서는 다음과 같습니다.

https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

https://ko.reactjs.org/docs/hooks-overview.html