🎯 Component를 생성하면서 @reduxjs/toolkit, react-redux 라이브러리를 익힙니다.

📗 Today I Learned

redux 기본 사용법

Trello 보드 추가 UI를 만들면서, Redux Toolkit의 createSlice, configureStore, 그리고 React-Redux의 useDispatch, useSelector 사용법을 익힙니다.

1. 초기 상태 정의 ( types.ts )

보드, 리스트, 태스크의 구조를 정의합니다.

// types.ts
export type Task = {
  taskId: string;
  taskName: string;
};

export type List = {
  listId: string;
  listName: string;
  tasks: Task[];
};

export type Board = {
  boardId: string;
  boardName: string;
  lists: List[];
};

export type BoardState = {
  boards: Board[];
};

---

2. slice 제작 ( boardSlice.ts )

• createSlice는 상태와 상태를 바꾸는 함수(reducer)를 한 번에 만들어주는 함수입니다.

• PayloadAction<T>으로 액션에 들어오는 데이터 타입을 정할 수 있습니다.

// boardSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { IBoard } from '../../types';

type TBoardState = {
  modalActive: boolean;
  boardArray: IBoard[];
};

type TAddBoardAction = {
  board: IBoard;
};

type TDeleteListAction = {
  boardId: string;
  listId: string;
};

const initialState: TBoardState = {
  modalActive: false,
  boardArray: [
    {
      boardId: 'board-0',
      boardName: '첫 번째 게시물',
      lists: [
        {
          listId: 'list-0',
          listName: 'list 1',
          tasks: [
            {
              taskId: 'task-0',
              taskName: 'Task 1',
              taskDescription: 'Description',
              taskOwner: 'John',
            },
            {
              taskId: 'task-1',
              taskName: 'Task 2',
              taskDescription: 'Description',
              taskOwner: 'John',
            },
          ],
        },
        {
          listId: 'list-1',
          listName: 'list 2',
          tasks: [
            {
              taskId: 'task-3',
              taskName: 'Task 3',
              taskDescription: 'Description',
              taskOwner: 'John',
            },
          ],
        },
      ],
    },
  ],
};

const boardSlice = createSlice({
  name: 'boards',
  initialState,
  reducers: {
    addBoard: (state, { payload }: PayloadAction<TAddBoardAction>) => {
      state.boardArray.push(payload.board);
    },
  },
});

export const { addBoard } = boardSlice.actions;
export const boardsReducer = boardSlice.reducer;

---

3. store 설정 ( store/index.ts )

리듀서 설정

• reducer 객체로 여러 슬라이스(reducer)를 하나로 통합합니다.

// store/reducer/reducer.ts
import { boardsReducer } from '../slices/boardsSlice';
import { loggerReducer } from '../slices/loggerSlice';
import { modalReducer } from '../slices/modalSlice';

const reducer = {
  logger: loggerReducer,
  boards: boardsReducer,
  modal: modalReducer,
};

export default reducer;

스토어 설정

• configureStore는 여러 slice를 하나로 합치고 Redux store를 생성해주는 함수입니다.

// store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import reducer from './reducer/reducer';

const store = configureStore({
  reducer,
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export default store;

---

4. 타입 커스텀 훅 설정 ( hooks.ts )

React 컴포넌트에서 타입 안전하게 dispatch와 selector를 사용할 수 있게 도와줍니다.

• useDispatch는 컴포넌트에서 액션을 실행시키는 함수입니다.

• useSelector는 Redux store에 저장된 상태값을 꺼내옵니다. 그리고 그 값이 바뀌면, 자동으로 컴포넌트를 리렌더링해줍니다.

import { AppDispatch, RootState } from '../store';
import { TypedUseSelectorHook, useDispatch } from 'react-redux';
import { useSelector } from 'react-redux';

export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;
export const useTypedDispatch = () => useDispatch<AppDispatch>();

🤔 useSelector가 필요한 이유는 뭘까?

React는 Redux store의 값을 자동으로 감지하지 않기 때문에 변경 사항을 어떤 컴포넌트가 관찰할지 직접 알려줘야 합니다.

개념	React (useState)	Redux (useSelector, useDispatch)
상태 저장	컴포넌트 안 (useState)	중앙 저장소인 Redux store
상태 변경	setState(newVal)	dispatch(action)
리렌더링	자동	useSelector로 관찰하고 있는 컴포넌트만 자동

---

5. 컴포넌트 사용 ( BoardList.tsx )

버튼 클릭으로 보드를 추가하고, Redux 상태를 화면에 표시합니다.

// BoardList.tsx
import React, { useRef, useState } from 'react';
import { useTypedSelector } from '../../hooks/redux';
import SideForm from './SideForm/SideForm';
import { FiPlusCircle } from 'react-icons/fi';
import {
  addButton,
  addSection,
  boardItem,
  boardItemActive,
  container,
  title,
} from './BoardList.css';
import clsx from 'clsx';

type TBoardListProps = {
  activeBoardId: string;
  setActiveBoardId: React.Dispatch<React.SetStateAction<string>>;
};

const BoardList: React.FC<TBoardListProps> = ({
  activeBoardId,
  setActiveBoardId,
}) => {
  const { boardArray } = useTypedSelector((state) => state.boards);
  const [isFormOpen, setIsFormOpen] = useState(false);
  const inputRef = useRef<HTMLInputElement>(null);

  const handleClick = () => {
    setIsFormOpen(!isFormOpen);
    setTimeout(() => {
      inputRef.current?.focus();
    }, 0);
  };

  return (
    <div className={container}>
      <div className={title}>게시판:</div>
      {boardArray.map((board, index) => (
        <div
          key={board.boardId}
          onClick={() => setActiveBoardId(boardArray[index].boardId)}
          className={clsx(
            {
              [boardItemActive]:
                boardArray.findIndex((b) => b.boardId === activeBoardId) ===
                index,
            },
            {
              [boardItem]:
                boardArray.findIndex((b) => b.boardId === activeBoardId) !==
                index,
            }
          )}
        >
          <div>{board.boardName}</div>
        </div>
      ))}
      <div className={addSection}>
        {isFormOpen ? (
          <SideForm inputRef={inputRef} setIsFormOpen={setIsFormOpen} />
        ) : (
          <FiPlusCircle className={addButton} onClick={handleClick} />
        )}
      </div>
    </div>
  );
};

export default BoardList;

• useRef() : 함수형 컴포넌트에서 ref를 만들기 위해 쓰는 훅입니다.

ref란?

React 요소나 값에 대한 “직접적인 참조” 를 의미하며 DOM 요소나 컴포넌트에 직접 접근하고 싶을 때 사용됩니다.

const myRef = useRef(null);

myRef.current가 실제 가리키는 대상이 됩니다.

[사용 예시]

• input 포커스 주기
• 스크롤 위치 확인 또는 조작
• 비디오 컨트롤러 다루기

⚠️ 보통의 상황에서 리액트는 Virtual DOM 기반으로 작동하기 때문에 직접 DOM을 건드리면 리액트에서는 바뀐 것을 모르기 때문에 문제가 생길 수 있습니다.

동작 흐름

출처: 리덕스 공식 문서

[React 컴포넌트]
   |
   | 클릭 (예: 보드 추가 버튼)
   ↓
dispatch(addBoard) 호출
   |
   ↓
[Reducer 실행]
createSlice 내부의 addBoard 함수 실행
   |
   ↓
[Redux store 상태 변경]
새 보드가 board 배열에 추가됨
   |
   ↓
[useSelector 구독 중]
board 상태가 변경되었으므로 컴포넌트 리렌더링

---

라이브러리별 역할 정리

라이브러리	사용된 함수	역할 설명
@reduxjs/toolkit	createSlice	상태와 reducer를 한 번에 생성함
	configureStore	여러 reducer를 합쳐 store 생성
	PayloadAction	액션의 payload 타입 명시
react-redux	useDispatch	컴포넌트에서 액션을 디스패치 (보내기)
	useSelector	컴포넌트에서 상태를 구독하여 가져오기
	TypedUseSelectorHook	useSelector에 타입을 붙여 안전하게 사용하기

---

✏️ 회고

그냥 막상 따라치기보다 정리하면서 더 이해하는 게 더 도움이 되었다. 아직은 어색하지만 더 반복 학습이 필요할 것 같다.