[React] StateHook(useState, useReducer) 정의와 사용예시

 

 

리액트의 클래스형 컴포넌트에 대해 알아보았다.
그러면서 자연스레 Hook에 대해 알게되었고,
React 코드의 대부분은 Hook으로 이뤄진 걸 알게되었다.
Hook이 무엇인지, 자세하게 알아보자.

 

 

 

 

1. React Hook의 등장 배경

• 리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나뉜다.
• 리액트 초기에는 함수형 컴포넌트를 사용했으나, 값의 상태를 관리(state) 혹은 생명주기(컴포넌트가 생성되고 사라지는 과정)를 사용해야할 때만 클래스형 컴포넌트를 사용했다.
• 클래스형 컴포넌트는 코드의 구성이 어렵고 재사용성이 떨어진다. 코드 최적화도 어렵고 최신 기술 사용도 효과적이지 않다.
• 그래서 이런 클래스형 컴포넌트의 단점을 보안하면서, 함수형 컴포넌트를 사용할 수 있도록 등장한 것이 바로 React Hook(리액트 훅)이다.

 

 

---

 

 

 

2. React Hook

• 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서 사용되는 몇가지 기술들을 일컫는다.
• 리액트 훅은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해준다.
• 주로 대표적으로 사용하는 것이 useEffect, useState 등이 있다.

 

 

 

---

 

 

 

3. State Hook

• State를 통해 컴포넌트는 사용자 입력과 같은 정보를 기억할 수 있다. 
  
  
• [ useState ]
  a) useState는 컴포넌트에 state 변수를 추가할 수 있다.
  b) 배열 구조 분해를 사용하여 [somethig, setSomething]과 같은 state 변수의 이름을 지정해야한다.
  c) 아래 코드를 보면 age와 name이 현재 state가 된다. 만약 변동사항이 없었다면 초기값이 들어간다. 그리고 setAge와 setName이 상호작용에 반응하여 다른 값으로 변경할 수 있는 set 함수가 된다. 그리고 42와 Taylor가 초기값이 된다.

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(42);
  const [name, setName] = useState('Taylor');

       d) setName에 Robin을 넣었다. 그러면 그 다음 렌더부터 name 값이 'Taylor'에서 'Robin'으로 바뀐다.
       e) 여기서 중요한 것은 setName은 즉시 name을 변경하는 게 아니라, 다음 렌더를 예약한다.

       f) 그래서 바뀐 값을 확인하려면 useEffect([name])처럼 렌더 이후 타이밍에서 확인해야 한다.

 

useEffect(() => {
  console.log("이제 name은:", name);
}, [name]);

 

 

 

• [ useReducer ]
  a) useReducer는 컴포넌트에 reducer를 추가하는 React Hook이다.
  b) 상태를 바꾸는 규칙(로직)을 한 곳에 모아두고 이벤트(액션)가 오면 그 규칙대로 상태를 업데이트한다.
  c) useState는 상태를 하나만 바꿀 때 쓰기 좋다면, useReducer은 상태가 복잡해질 때 사용하기 좋다.
  d) 코드에 적힌 설명을 읽어보자! 코드 흐름을 다시 정리해보면, ( - ) 버튼을 클릭 → {type : "dec" } action 객체 배달  → 현재값에서 -1 계산  → state 상태가 업데이트 됨  → 리렌더링하면서 화면의 숫자가 변경됨

import { useReducer } from "react";

const initialState = { count: 0 };

function reducer(state, action) {
  // 3.
  // 여기에 action이 왔고, action에는 type이 있다.
  // 아까 아래해서 dec를 보냈으니 현재값에서 -1을 한 값이 리렌더링 될 것이다.
  // 그럼 0이 현재 상태였으니 -1이라는 새로운 값이 반환되어 리렌더링된다.
  switch (action.type) {
    case "inc":
      return { count: state.count + 1 };
    case "dec":
      return { count: state.count - 1 };
    case "reset":
      return initialState;
    default:
      return state;
  }
}

export default function Counter() {
  // 1.
  // state는 상태이며, 첫번째 랜더링에서는 초기값으로 설정된다.
  // dispatch는 state를 새로운 값으로 업데이트하고 리렌더링한다. 
  // dispatch의 유일한 인수는 action이다.
  // 맨 윗 줄을 보면 initialState를 설정한 코드가 있다. 
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      // 2.
      // 예를 들어 - 버튼을 클릭한다고 가정하자.
      // 그러면 dispatch의 action.type은 "dec"가 된다.
      // 이때 {type: "dec"}가 action의 객체이며 이 객체 그대로 reducer 함수로 넘겨진다. 
      <button onClick={() => dispatch({ type: "dec" })}> - </button>
      <span style={{ padding: 8 }}>{state.count}</span>
      <button onClick={() => dispatch({ type: "inc" })}> + </button>
      <button onClick={() => dispatch({ type: "reset" })}> reset </button>
    </div>
  );
}

 

 

 

 

 

---

 

- react hooks

내장 React Hook – React

 

 

 

- useState

useState – React

 

 

 

- useReducer

useReducer – React