이다닷

[React] Day 22 - useReducer를 사용하여 상태 업데이트 로직 분리하기 본문

React

[React] Day 22 - useReducer를 사용하여 상태 업데이트 로직 분리하기

이다닷 2023. 9. 30. 18:00

📌useReducer

  이전 수업때 배웠던 useState로 상태를 업데이트 하는 것을 배웠었다. 상태를 관리할때 사용하는 함수는 useState 말고 useReducer으로 상태를 관리할 수 있다. 이 함수의 큰 사용법은 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리 할 수 있다.

  -> 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용할 수도 있다.

 

📢useReducer 함수를 사용하기전에..

  우선 reducer에 대해서 먼저 알아보겠다. reducer는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다. 따라서 reducer에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태이다.

 

function reducer(state, action) {
  // 새로운 상태를 만드는 로직
  // const nextState = ...
  return nextState;
}

 

📢여기서 action은 업데이트를 위한 정보를 가지고 있다. 

action의 예시

 

// 카운터에 1을 더하는 액션
{
  type: 'INCREMENT'
}
// 카운터에 1을 빼는 액션
{
  type: 'DECREMENT'
}
// input 값을 바꾸는 액션
{
  type: 'CHANGE_INPUT',
  key: 'email',
  value: 'dadat@react.com'
}
// 새 할 일을 등록하는 액션
{
  type: 'ADD_TODO',
  todo: {
    id: 1,
    text: 'useReducer 배우기',
    done: false,
  }
}

 

위에 있는 예시와같이 action의 형태는 자유이다. type값을 대문자와 "_"으로 구성하는 습관이 있지만, 꼭 따를필요는 없다.

 

📌useReducer의 사용법

const [state, dispatch] = useReducer(reducer, initialState);

여기서 state는 우리가 앞으로 컴포넌트에서 사용할 수 있는 상태를 가리키고, 

dispatch는 액션을 발생시키는 함수이다.

 

그리고, useReducer에 넣는 첫번째 파라미터는 reducer 함수이고, 두번째 파라미터는 초기상태이다.

 

➡️Counter.js의 기능을 useState가 아닌 useReducer 함수를 사용하여 구현하기

 

Counter.js 변경

import React, { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

function Counter() {
  const [number, dispatch] = useReducer(reducer, 0);

  const onIncrease = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const onDecrease = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

APP 대신 index.js를 이용해서 Counter 렌더링하기.

index.js 변경

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Counter from './qoffhvjxm/Counter';

ReactDOM.render(<Counter />, document.getElementById('root'));

 

➡️APP 컴포넌트에 있던 상태 업데이트 로직들을 useState가 아닌 useReducer를 사용하여 구현 해보자.

➡️➡️우선, APP.js에서 사용할 초기 상태를 컴포넌트 밖으로 분리하고, APP 내부의 로직들은 모두 제거하자.

 

APP.js 변경

import React, { useRef, useReducer, useMemo, useCallback } from 'react';
import UserList from './qoffhvjxm/UserList';
import CreateUser from './qoffhvjxm/CreateUser';

function countActiveUsers(users) {
  console.log('활성 사용자 수를 세는중...');
  return users.filter(user => user.active).length;
}

// 초기상태.
const initialState = {
  inputs: {
    username: '',
    email: ''
  },
  users: [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com',
      active: true
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false
    }
  ]
};

// reducer 함수 틀 만들기.(action 미작성.)
function reducer(state, action) {
  return state;
}

// APP 함수에서 useReducer 함수 사용.
function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      <CreateUser />
      <UserList users={[]} />
      <div>활성사용자 수 : 0</div>
    </>
  );
}

export default App;

 

➡️state에서 필요한 값을 추출하여 각 컴포넌트에 전달.

➡️reducer 함수를 통하여 현재 상태와 액션을 받아서 새로운 상태를 반환.

📢여기서 CHANGE_INPUT은 새로운 상태를 반환해주는 변수이다.

➡️onChage 함수 구현.

 

APP.js 변경

import React, { useRef, useReducer, useMemo, useCallback } from 'react';
import UserList from './qoffhvjxm/UserList';
import CreateUser from './qoffhvjxm/CreateUser';

function countActiveUsers(users) {
  console.log('활성 사용자 수를 세는중...');
  return users.filter(user => user.active).length;
}

const initialState = {
  inputs: {
    username: '',
    email: ''
  },
  users: [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com',
      active: true
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false
    }
  ]
};

// reducer 함수를 통해 현재 상태와 액션을 받아서 새로운 상태를 반환.
function reducer(state, action) {
  switch (action.type) {
    case 'CHANGE_INPUT':
      return {
        ...state,
        inputs: {
          ...state.inputs,
          [action.name]: action.value
        }
      };
    default:
      return state;
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  // state에서 필요한 값들을 비구조화 할당 문법을 사용하여 추출하여 각 컴포넌트에 전달.
  const { users } = state;
  const { username, email } = state.inputs;

  // onChange 함수 구현.
  const onChange = useCallback(e => {
    const { name, value } = e.target;
    dispatch({
      type: 'CHANGE_INPUT',
      name,
      value
    });
  }, []);

  return (
    <>
      <CreateUser username={username} email={email} onChange={onChange} />
      <UserList users={users} />
      <div>활성사용자 수 : 0</div>
    </>
  );
}

export default App;

 

➡️onCreate, onToggle, onRemove 함수 구현

 

APP.js 변경

import React, { useRef, useReducer, useMemo, useCallback } from 'react';
import UserList from './qoffhvjxm/UserList';
import CreateUser from './qoffhvjxm/CreateUser';

function countActiveUsers(users) {
  console.log('활성 사용자 수를 세는중...');
  return users.filter(user => user.active).length;
}

const initialState = {
  inputs: {
    username: '',
    email: ''
  },
  users: [
    {
      id: 1,
      username: 'velopert',
      email: 'public.velopert@gmail.com',
      active: true
    },
    {
      id: 2,
      username: 'tester',
      email: 'tester@example.com',
      active: false
    },
    {
      id: 3,
      username: 'liz',
      email: 'liz@example.com',
      active: false
    }
  ]
};

// onChange, onCreate, onToggle, onRemove 함수를 위한 reducer 함수 생성.
function reducer(state, action) {
  switch (action.type) {
    case 'CHANGE_INPUT':
      return {
        ...state,
        inputs: {
          ...state.inputs,
          [action.name]: action.value
        }
      };
    case 'CREATE_USER':
      return {
        inputs: initialState.inputs,
        users: state.users.concat(action.user)
      };
    case 'TOGGLE_USER':
      return {
        ...state,
        users: state.users.map(user =>
          user.id === action.id ? { ...user, active: !user.active } : user
        )
      };
    case 'REMOVE_USER':
      return {
        ...state,
        users: state.users.filter(user => user.id !== action.id)
      };
    default:
      return state;
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, initialState);
  const nextId = useRef(4);

  const { users } = state;
  const { username, email } = state.inputs;

  const onChange = useCallback(e => {
    const { name, value } = e.target;
    dispatch({
      type: 'CHANGE_INPUT',
      name,
      value
    });
  }, []);

  // onCreate, onToggle, onRemove 함수 추가.
  const onCreate = useCallback(() => {
    dispatch({
      type: 'CREATE_USER',
      user: {
        id: nextId.current,
        username,
        email
      }
    });
    nextId.current += 1;
  }, [username, email]);

  const onToggle = useCallback(id => {
    dispatch({
      type: 'TOGGLE_USER',
      id
    });
  }, []);

  const onRemove = useCallback(id => {
    dispatch({
      type: 'REMOVE_USER',
      id
    });
  }, []);

  const count = useMemo(() => countActiveUsers(users), [users]);
  return (
    <>
      <CreateUser
        username={username}
        email={email}
        onChange={onChange}
        onCreate={onCreate}
      />
      <UserList users={users} onToggle={onToggle} onRemove={onRemove} />
      <div>활성사용자 수 : {count}</div>
    </>
  );
}

export default App;

 

결과사진

 

 

그렇다면 useState vs. useReducer 함수 중 무엇을 쓰는게 좋을까요?

 

📌예를 들어서, 컴포넌트에서 관리하는 값이 하나이고, 그 값이 단순한 숫자, 문자열 또는 boolean 값이라면 useState로 관리하는 것이 편하다.

📌하지만, 컴포넌트에서 관리하는 값이 여러개여서 구조가 복잡해진다면 useReducer로 관리하는 것이 편하다.

 

 

저작자표시

'React' 카테고리의 다른 글

[React] Day 24 - Context API를 사용한 전역 값 관리  (0) 2023.10.03
[React] Day 23 - 커스텀 Hooks 만들기  (2) 2023.10.02
[React] Day 21 - React.memo를 사용한 컴포넌트 리렌더링 방지  (0) 2023.09.25
[React] Day 20 - useCallback를 사용하여 함수 재사용하기  (0) 2023.09.24
[React] Day 19 - useMemo를 사용하여 연산한 값 재사용하기  (0) 2023.09.23
'React' Related Articles more