2020-9-2 React Hook

배경

주변 프론트엔드 개발자들이 매번 훅훅 쓰라고 이야기하는것을 많이는 들어봤는데, 막상 내가 써보지도 않았고, 그걸 굳이 써야되나 싶었다. 클래스 컴포넌트를 생성하면 자바의 클래스처럼 constructor를 이용해서 초기화를 하고, 객체처럼 다룰 수 있기때문에 익숙했는데, 이제는 Hook을 써야되서 공부를 한다.

Hook이란

Hook이란 함수컴포넌트에서 React State와 같은 생명주기를 연동(hook into)할 수 있게 해주는 함수. 클래스 안에서 동작하지 않고, class없이도 react를 사용할 수 있게해준다.

리액트16.8에 추가되었고, class를 작성할 필요없이 상태값을 사용할 수 있다.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);
	// 여러 개의 state를 선언할 수 있습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // componentDidMount, componentDidUpdate와 비슷합니다
  useEffect(() => {
    // 브라우저 API를 이용해 문서의 타이틀을 업데이트합니다
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// 기존 함수컴포넌트. state관리가 안됬다.
const Example = (props) => {
  // 여기서 Hook을 사용할 수 있습니다!
  return <div />;
}

Hook을 호출해서 함수컴포넌트 안에서 state를 추가, 이 state는 컴포넌트가 다시 렌더링 되도 유지된다.
useState(params)에서 인자로 초기 state값 하나를 받는다. this.state는 {}와 같이 객체여야했는데, useStates는 객체일 필요가 없다.
useState에서 state변수를 선언할 수 있다. this.state와 기능이 동일.
useState는 state변수와 해당 변수를 조작할 수 있는 함수를 반환한다. setCount는 this.setState({count})와 유사
클래스 컴포넌트에서는 this.state.var로 데이터를 가져오던걸 Hook에서는 var로 바로 가져올 수 있다.
갱신 역시 this.setState({variable:value})로 변경하던걸 setVar(value)로 변경할 수 있다.

Hook을 사용하면 props, state, context, refs, lifecycle를 좀 더 직관적인 API를 사용할 수 있다.

규칙

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

Effect Hook

리액트가 DOM을 업데이트하고 추가적으로 코드를 실행해야되는 경우가 있다. hook에서는 side effect를 처리한다?라고 하고 클래스에서는 componentDidMount, componentDidUpdate라고 한다.
컴포넌트 내부에서 데이터를 가져오고, 조작하는 작업을 side effect라고 한다. react에서는 useEffect를 통해 side effect를 수행할 수 있게해준다. 기존 componentDidMount, componentDidUpdate, componentWillMount와 같은 목적이지만 하나로 통합 !!
useEffect를 사용하면 DOM을 바꾸고 effect함수를 실행한다. 기본적으로 처음렌더링을 포함해서 매번 렌더링할때마다 실행된다.
Effect는 컴포넌트 내부에 있기때문에 props와 state에 접근할 수 있다.
useEffect()는 컴포넌트의 데이터가 바뀔때마다 렌더링이 된다. 성능적인 이슈가 있을 수 있기때문에. useEffect(callback, [vars])에 두번째 인자로 원하는 변수들의 리스트를 전달하고, 해당 리스트안에 있는 변수들이 변경될때마다 다시 렌더링이 도리 수 있게 설정할 수도 있다.

Custom Hook

컴포넌트들간의 로직을 재사용하기 위해 higher-order-component와 redner props를 많이 쓴다. Custom Hook을 사용하면 새 컴포넌트를 추가하지 않아도 사용가능하다.
useContext, useReducer를 사용해서 context, state를 관리할 수 있다.

느낀점

아무래도 Java를 하다가 JS 했을때 가장 어색했던 부분은 높은 자유도와 Class를 지원함에도 불구하고 객체 리터럴 형식을 사용한다는 점이였다. 리액트를 시작할때, Class기반 컴포넌트와 extends Component를 통해 마치 자바 객체를 설계하는것처럼 컴포넌트를 생성해서 매우 좋았다. 사람들이 리액트 훅훅 이야기를 했는데, 이 부분이 함수형에 가까워서 별로 지양하지는 않다가 최근에 개발을 하면서 의도치않게 Hook을 적용하게 되었다. Hook을 써보니 왜 편한지 알거같다. 이제는 Hook을 써야지..

Written on September 2, 2020