🦯 Hook이란?

함수형 컴포넌트에서 클래스의 라이프사이클 메서드 기능과 state 관리를 할 수 있게 해주는 기능이다.

🤔 Hook이 만들어지게된 계기는?

• 라이프 사이클의 기능을 사용하기 위해
• state를 사용하기 위해
• 성능 향상을 위해
• state를 서로 다른 컴포넌트가 공유하기 쉽게 하기 위해

  기존에 내가 사용하고 싶은 state를 여러 컴포넌트에 쓰려면 props로 전달하였다.
  하지만 컴포넌트마다 state를 전달하려면 부모컴포넌트마다 일일히 props로 state를 전달해줘야한다는 번거로움이 있다.
  이러한 문제를 해결하기 위해 HOCs(Higher Order Components) 또는 render props를 제안하였다.

class component에서의 문제

1. 상태 로직 재사용의 어려움

위에서 설명했듯이 state를 여러 컴포넌트 사이에서 공유하기 위해서는 render props이나 HOCs 로직 패턴을 사용한다.

이는 state sharing을 효율적으로 할 수 있다는 장점을 가지고 있지만 로직을 구성하기 위하여 코드의 복잡성을 유발하여 Wrapper Hell을 발생시킬수 있고 이로 인하여 코드 추적이 어려워질 수 있다는 유지보수 및 가독성에서의 단점을 가지고 있다.

Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있다.
Hook은 계층의 변화 없이 상태 관련 로직을 재사용 할 수 있도록 도와준다. 이것은 많은 컴포넌트 혹은 커뮤니티 사이에서 Hook을 공유하기 쉽게 만들어준다.

2. 컴포넌트의 복잡성
클래스형 컴포넌트에서 비슷한 라이프 사이클 메서드에서 동일한 작업을 반복하는 경우가 있다.
(예를 들면, ComponentDidmount,ComponentDidUpdate에서 데이터를 불러오는 작업)

이는 같은 작업을 반복하는 번거로움을 발생시켜 불편함을 준다.

이러한 단점을 보완하기 위하여 Hook은 비슷한 기능을 하는 라이프 사이클 메서드를 하나의 Hook API에서 해결할 수 있도록 한다.(ex. useEffect)

3.클래스의 어려움
state를 선언해주기 위하여 super로 props를 전달받고 constructor 메서드안에서 state를 선언하고(밖에서 간단히 해결할 수도 있긴 함.) 어떠한 기능을 하기 위한 메서드를 정의하여 사용할 때에는 this로 바인딩해줘야한다.(이 또한 클래스 필드로 사용하면 되긴 함.)

Hook은 이러한 복잡한 this에 대한 사용을 하지 않고 함수형 컴포넌트에서 구현함으로써 문제를 해결한다.

---

훅의 종류

useState

• useState은 함수형 컴포넌트에서 state를 사용하고 관리할 수 있게 해주는 Hook API이다.

• useState는 상태값과 상태값을 변경해주는 함수를 담는 배열을 반환하고
  명칭은 구조분해함으로써 명명한다.

• useState의 인자로써는 state의 초깃값을 할당한다.
  
  

App.js

import React, { useState } from "react";

const App = () => {
  const [count,setCount] = useState(0) // 원하는 이름 명명 및 초깃값 설정
  console.log(useState(0)); // state와 state를 변경해주는 함수 반환
  return <div></div>;
};

export default App;

useState(0)의 반환값

• 일반적으로 일반 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 사라지지 않는다.

• 여러개의 state를 설정하여 사용하고 싶다면 여러개의 useState를 선언하면 된다.

functional update

const [state,setState] = useState(initValue)

setState()가 이전 state값에 의존하여 다음 state값을 설정하고자 한다면 setState()에 함수를 할당할 수 있다.

setState( prevstate => prevstate + 1)

이전 state값을 참조하여 state값을 설정해야할 때 유용할 것 같다.

또한 함수형 업데이트 같은 경우에는 setState로 변화가 없다면 re-rendering을 해주지 않는다.

useEffect

• useEffect는 함수형 컴포넌트에서 클래스형 컴포넌트의 생명주기 메서드와 비슷하게 구현할 수 있는 Hook API이다.

  생명주기 메서드 componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합합돼있다.

• 데이터 가져오기 , 구독 설정 , DOM 다루기 등과 같은 effect들을 useEffect에서 설정한다.
  (DOM 변경은 타이머 설정 혹은 useLayoutEffect활용)

• 첫번째 인자인 함수의 역할은 effect이다.
  effect를 설정하는 방법은 함수의 문에 초기렌더링(componentDidMount), 업데이트 렌더링(componentDidUpdate) 이후에 원하는 작업을 설정하면 된다.

  설정한 작업(effect)을 해지하는 방법은 함수에서 해지하는 함수를 반환하면 된다.(componentWillUnmount)
  

• useEffect의 clean-up function(return에서 설정하는 함수)은 unmount될 때만 불리는 것이 아니다.
  clean-up function은 컴포넌트가 업데이트 되기전에도 불린다.

• 두번째 인자는 dependency이다.
  두번째 인자는 배열을 넣어주는데 배열안에는 해당값이 바뀔 때만 effect가 일어나도록 하게 해준다.

  빈 배열을 넣는다면 첫 렌더링(componentDidMount)때만 effect가 일어나게 해준다.

• 서로 관련있는 로직은 useEffect를 여러번 사용하여 구분할 수 있다.
  (클래스형 컴포넌트에서는 생명주기 메서드에서 관련없는 로직을 몰아넣곤 해야했음.)

useEffect안에서 state를 변경하면 무한렌더링루프에 빠질 수 있으니 주의할 것!
(state는 바뀔때마다 리렌더링되는데 렌더링될 때마다 useEffect도 실행되어 무한루프에 빠지게 됨.)

useReducer

useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 없데이트해 주고 싶을 때 사용하는 훅이다.

리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수이다.

리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜주어야 한다.

useReducer의 첫 번째 파리미터에는 리듀서 함수를 넣고 , 두 번째 파라미터에는 해당 리듀서의 기본값을 넣어준다.

const [state,dispatch] = useReducer(reducer,0)

이 훅을 사용하면 state 값과 dispatch 함수를 받아온다. 여기서 state는 현재 가리키고 있는 상태고, dispatch는 액션을 발생시키는 함수이다.

dispatch(action)

state,action을 객체로 사용할 때

import React, { useReducer } from "react";

const App = () => {
  function reducer(state, action) {
    switch (action.type) {
      case "INCREMENT":
        return { value: state.value + 1 };
      case "DECREMENT":
        return { value: state.value - 1 };

      default:
        return state;
    }
  }

  const [state, dispatch] = useReducer(reducer, { value: 0 });

  return (
    <div>
      <p>현재 카운터 값은 {state.value}입니다.</p>

      <button onClick={() => dispatch({ type: "INCREMENT" })}>INCREMENT</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>DECREMENT</button>
    </div>
  );
};

export default App;

state,action값을 객체가 아닌 값으로 사용하였을 때

import React, { useReducer } from "react";

const Base = () => {
  function reducer(state, action) {
    switch (action) {
      case "INCREMENT":
        return state + 1;
      case "DECREMENT":
        return state - 1;
      default:
        return state;
    }
  }

  const [state, dispatch] = useReducer(reducer, 0);
  return (
    <div>
      <h1>value</h1>
      <button onClick={() => dispatch("INCREMENT")}>INCREMENT</button>
      <button onClick={() => dispatch("DECREMENT")}>DECREMENT</button>
    </div>
  );
};

export default Base;

리덕스에서 사용하는 액션 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 액션 객체는 반드시 type을 가지고 있을 필요가 없다.

그리고 useReducer에서는 액션값이 객체가 아니어도 되고 문자열이나 숫자여도 상관없다.

if 문 말고 switch 문?

흔히 쓰는 if문을 쓰지 않고 왜 switch문을 썼을까?

    if (action === "INCREMENT") state + 1;
    else if (action === "DECREMENT") state - 1;
    else state;

위와 같이 if문을 썼을 때 가독성이 좋지 않은 것 같고 reducer의 취지에 switch문이 적합하기에 switch문을 사용한다고 생각이 들었다.

switch 문은 여러 가지 case를 설정하여 조건에 맞는 case를 사용할 수 있어 useReducer의 취지인 여러 action 중 선택해 사용한다는 의미에서 더 알맞은 것 같다.

import React, { useReducer } from "react";

const App = () => {
  function reducer(state, action) {
    return {
      ...state, //기존 state값 가져오기
      [action.name]: action.value,
    };
  }

  const [state, dispatch] = useReducer(reducer, { name: "", nickname: "" });

  const onChange = (e) => {
    dispatch(e.target);
  };

  console.log("render");

  return (
    <div>
      <div>
        <input name="name" value={state.name} onChange={onChange} />
      </div>
      <div>
        <input name="nickname" value={state.nickname} onChange={onChange} />
      </div>

      <h1>이름 : {state.name}</h1>
      <h1>별칭 : {state.nickname} </h1>
    </div>
  );
};

export default App;

reducer 함수에 switch문을 써야만 하는 것도 아니고 action값에 다양한 값을 할당할 수도 있다.

When use?

useReducer is usually preferable to useState when you have complex state logic that involves multiple sub-values or when the next state depends on the previous one.
https://reactjs.org/docs/hooks-reference.html#usereducer

useReducer는 복잡한 state logic을 가지고 있을 때나 다음 state가 이전 state에 의존하고 있을 때 사용한다.
(action에 따라 여러 state를 조작할 수 있기 때문)