Post

Hooks란?

Hooks는 React 16.8 버전에서 클래스 컴포넌트만을 사용할 때 부딪히는 수많은 문제들을 해결하기 위해서 나온 것이다.

클래스 컴포넌트의 문제점

그 문제점이란 다음과 같다.

1. 컴포넌트의 상태 로직 재활용이 어렵다.

Hooks가 존재하지 않았을 때 클래스 컴포넌트만이 state를 저장할 수 있다 보니 클래스를 주로 사용하였다.

• 이로 인해 관심사 분리가 제대로 되지 않고 컴포넌트간 중복이 많아져 규모가 큰 컴포넌트가 만들어졌다.
• 그래서 유지보수가 상당히 어려워졌고 테스팅 또한 어려웠다.
• 이를 해결하고자 Higher Order Component, 즉 HOC를 사용하게 되었다.
• 하지만 HOC의 중첩이 반복되면 Wrapper Hell을 만들며 이것은 코드의 추적을 어렵게 만든다.

2. 두 번째 문제점으로 클래스는 혼란을 줄 수 있다.

클래스 컴포넌트의 방식이 너무 복잡하고, 클래스의 this는 동작 방식이 다양하다보니 예상치 못한 오류를 발생시킬 수도 있었다.

이런 문제점들 때문에 클래스 컴포넌트 대신 함수를 이용하고 싶지만 함수는 상태을 갖지 못한다는 문제점 때문에 클래스를 이용해왔다.

함수가 상태를 갖지 못하는 이유

함수 컴포넌트는 기본적으로 리렌더링 될 때 함수 안에 작성된 코드가 모두 다시 실행된다. 때문에 함수 컴포넌트들이 기존에 가지고 있던 상태를 관리할 수 없었다.

이 문제를 해결하기 위해 나온 것이 Hooks다.

Hooks를 사용하면 함수가 상태를 가질 수 있는 이유

리액트는 useState를 통해 생성한 상태에 접근하고 유지하기 위해 클로저를 이용하여 함수 컴포넌트 바깥에 state를 저장한다. 이 상태들은 리액트 컴포넌트 바깥에 선언되어 있는 변수들이기 때문에 업데이트 된 이후에도 접근할 수 있게 되는 것이다.

Hooks 종류 - useState

useState는 함수 컴포넌트 안에서 state를 사용할 수 있도록 해준다. class의 this.state, this.setState와 동일한 기능을 한다.

• useState의 인자는 initialState다.
• useState가 반환한 것을 구조 분해 할당을 이용하여 원하는 이름으로 설정할 수 있다.
  • 첫 번째 인자는 상태, 두 번째 인자는 상태를 변경하는 함수가 들어간다.

Hooks 종류 - useEffect

useEffect는 함수 컴포넌트 안에서 side effect를 수행할 수 있게 해준다. 클래스 컴포넌트의 라이프사이클과 유사한 기능을 한다고 할 수 있다.

useEffect를 활용하여 componentDidMount, componentDidUpdate, componentWillUnmount를 모두 대체할 수 있다.

• useEffect는 첫 번째 인자로 콜백 함수, 두 번째 인자로 의존성 배열을 받는다.
  • 의존성 배열을 빈 배열로 두면 componentDidMount처럼 동작한다.
  • 의존성 배열에 상태를 넣으면 compnentDidUpdate처럼 동작한다.
  • useEffect의 return 값을 넣으면 componentWillUnmount처럼 동작한다.
  • 의존성 배열 인자를 생략한다면 컴포넌트가 리렌더링 될 때마다 호출된다.

한편 useEffect 안에서 사용되는 state 혹은 props가 있다면 의존성 배열에 넣어주어야 한다. 그렇게 하지 않으면 콜백이 실행될 때 최신 상태를 반영하지 않을 수 있기 떄문이다.

Hooks 규칙

• Hook은 리액트 함수의 최상위에서만 호출해야 한다. 이 규칙을 따라야지만 컴포넌트가 렌더링될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.
• React 함수 그리고 다른 커스텀 Hook에서만 Hook을 호출해야 한다.
• 커스텀 Hook을 만들 땐 use를 접두사로 사용해야 한다.