Redux, Zustand, Recoil, Jotai 비교 분석: 리액트 상태 관리 라이브러리 선택 가이드

리액트 프로젝트의 복잡한 상태 관리를 위한 Redux, Zustand, Recoil, Jotai 네 가지 라이브러리를 심층 비교하고, 각 라이브러리의 장단점과 최적의 선택 기준을 제시합니다.

리액트(React) 애플리케이션 개발에서 상태 관리는 프로젝트의 규모가 커질수록 더욱 중요하고 복잡한 과제가 됩니다. 컴포넌트 간의 데이터 흐름을 효율적으로 제어하고, 일관된 사용자 경험을 제공하기 위해서는 견고하고 유연한 상태 관리 솔루션이 필수적입니다. 수많은 상태 관리 라이브러리 중 어떤 것을 선택해야 할지 고민해 본 경험이 있으신가요? 각 라이브러리마다 고유한 철학과 장단점을 가지고 있어, 프로젝트의 특성과 팀의 숙련도에 따라 최적의 선택은 달라질 수 있습니다. 이 글에서는 리액트 생태계에서 널리 사용되거나 주목받는 네 가지 상태 관리 라이브러리, Redux, Zustand, Recoil, Jotai를 심층적으로 비교 분석하여, 여러분의 프로젝트에 가장 적합한 라이브러리를 선택하는 데 실질적인 가이드를 제공하고자 합니다.

📑 목차

• 서론: 리액트 상태 관리, 왜 중요한가?
• Redux: 전통의 강자, 견고한 상태 관리의 표준
• 핵심 개념 및 철학
• 장점과 단점
• 간단한 코드 예시 (Redux Toolkit 사용)
• Zustand: 간결함과 유연성의 대명사
• 핵심 개념 및 철학
• 장점과 단점
• 간단한 코드 예시
• Recoil: 리액트 본연의 방식으로, 페이스북의 해답
• 핵심 개념 및 철학
• 장점과 단점
• 간단한 코드 예시
• Jotai: 원자 단위 상태 관리, 극강의 미니멀리즘
• 핵심 개념 및 철학
• 장점과 단점
• 간단한 코드 예시
• 주요 라이브러리 비교 분석: 어떤 상황에 어떤 선택을?
• 결론: 프로젝트 상황에 맞는 현명한 선택

Image by wal_172619 on Pixabay

서론: 리액트 상태 관리, 왜 중요한가?

리액트는 컴포넌트 기반 아키텍처를 통해 UI 개발의 생산성을 크게 향상시켰습니다. 하지만 애플리케이션의 규모가 커지고 다양한 컴포넌트들이 복잡하게 상호작용하면서, 여러 컴포넌트가 공유하는 전역 상태(Global State)를 효율적으로 관리하는 문제가 대두됩니다. 단순히 컴포넌트 내부의 `useState` 훅이나 `useContext` 훅만으로는 충분하지 않은 경우가 많습니다. 예를 들어, 서로 멀리 떨어진 컴포넌트 간에 데이터를 공유하거나, 비동기 작업을 통해 상태를 업데이트해야 할 때, 또는 애플리케이션 전체에서 일관된 데이터를 유지해야 할 때 상태 관리 라이브러리의 필요성이 커집니다.

잘못된 상태 관리는 다음과 같은 문제점을 야기할 수 있습니다:

• Prop Drilling: 상위 컴포넌트로부터 하위 컴포넌트로 props를 여러 단계에 걸쳐 전달해야 하는 비효율적인 상황.
• 상태 일관성 문제: 여러 컴포넌트에서 동일한 상태를 참조할 때, 한 곳에서 변경된 상태가 다른 곳에 제대로 반영되지 않는 문제.
• 디버깅의 어려움: 상태 변경의 원인과 흐름을 추적하기 어려워 디버깅에 많은 시간이 소요.
• 성능 저하: 불필요한 리렌더링으로 인한 애플리케이션 성능 저하.

이러한 문제들을 해결하기 위해 다양한 상태 관리 라이브러리들이 등장했으며, 각각 다른 접근 방식과 장점을 가지고 있습니다. 이제 대표적인 네 가지 라이브러리를 자세히 살펴보겠습니다.

Redux: 전통의 강자, 견고한 상태 관리의 표준

Redux는 리액트 생태계에서 가장 오랫동안, 그리고 가장 널리 사용되어 온 상태 관리 라이브러리 중 하나입니다. "예측 가능한 상태 컨테이너(Predictable State Container)"라는 슬로건 아래, 단일 진실 원천(Single Source of Truth), 불변성(Immutability), 그리고 순수 함수(Pure Functions) 원칙을 강조하며 견고하고 예측 가능한 상태 관리를 제공합니다.

핵심 개념 및 철학

Redux는 Flux 아키텍처를 기반으로 하며, 다음과 같은 세 가지 핵심 원칙을 가집니다:

1. 단일 스토어(Single Store): 애플리케이션의 모든 상태는 하나의 거대한 자바스크립트 객체로, 단일 스토어에 저장됩니다.
2. 상태는 읽기 전용(State is Read-only): 상태를 변경하는 유일한 방법은 액션(Action)이라는 일반 객체를 디스패치(dispatch)하는 것입니다. 직접 상태를 변경할 수 없습니다.
3. 순수 함수를 통한 변경(Changes are Made with Pure Functions): 액션에 의해 상태가 어떻게 변경될지는 리듀서(Reducer)라는 순수 함수에 의해 정의됩니다. 리듀서는 이전 상태와 액션을 받아 새로운 상태를 반환합니다.

이러한 엄격한 규칙은 상태 변화를 예측 가능하게 하고 디버깅을 용이하게 합니다. Redux Thunk, Redux Saga와 같은 미들웨어는 비동기 로직 처리를 돕고, Redux DevTools는 상태 변화 과정을 시각적으로 추적할 수 있게 하여 개발자 경험을 향상시킵니다.

장점과 단점

• 장점
  • 예측 가능성: 단방향 데이터 흐름과 불변성 원칙 덕분에 상태 변화를 예측하고 추적하기 매우 용이합니다.
  • 디버깅 용이성: Redux DevTools는 시간 여행 디버깅(Time-travel debugging)을 가능하게 하여 상태 변경 이력을 손쉽게 확인할 수 있습니다.
  • 강력한 생태계: 오랜 기간 사용된 만큼 방대한 문서, 커뮤니티 지원, 다양한 미들웨어 및 확장 라이브러리가 존재합니다.
  • 대규모 애플리케이션에 적합: 복잡하고 큰 규모의 애플리케이션에서 상태의 일관성과 유지보수성을 보장하는 데 강력합니다.
• 단점
  • 높은 학습 곡선: 액션, 리듀서, 스토어, 미들웨어 등 다양한 개념과 규칙을 이해해야 하므로 초기 학습 비용이 높습니다.
  • 많은 보일러플레이트 코드: 간단한 상태 변경에도 액션 타입 정의, 액션 생성 함수, 리듀서 작성 등 상당량의 코드가 필요합니다. (물론 Redux Toolkit으로 많이 개선됨)
  • 번들 사이즈: 다른 경량 라이브러리에 비해 번들 사이즈가 상대적으로 큽니다.

간단한 코드 예시 (Redux Toolkit 사용)

Redux Toolkit은 Redux의 단점을 보완하고 개발자 경험을 향상시키기 위해 공식적으로 권장되는 도구입니다.

// store/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1; // Immer를 사용하여 불변성 유지
    },
    decrement: (state) => {
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

// store/index.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

// components/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement, incrementByAmount } from '../store/counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <span>Count: {count}</span>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
      <button onClick={() => dispatch(incrementByAmount(5))}>Add 5</button>
    </div>
  );
}

export default Counter;

Zustand: 간결함과 유연성의 대명사

Zustand는 Redux의 복잡성을 줄이면서도 강력한 기능을 제공하는 경량 상태 관리 라이브러리입니다. 훅(Hook) 기반으로 설계되어 리액트 컴포넌트와 자연스럽게 통합되며, 최소한의 보일러플레이트 코드로 상태를 관리할 수 있도록 돕습니다. "곰(Bear)"을 의미하는 이름처럼 작고 빠르며, 간결한 API가 특징입니다.

핵심 개념 및 철학

Zustand는 Flux 패턴의 개념을 차용하지만, 훨씬 더 간소화된 방식으로 구현합니다. 핵심은 `create` 함수를 통해 스토어를 정의하고, 이를 `useStore` 훅을 통해 컴포넌트에서 사용하는 것입니다. 스토어는 일반 자바스크립트 객체나 함수로 정의될 수 있으며, 불변성을 직접 관리해야 합니다. (Immer와 같은 라이브러리와 함께 사용하면 Redux Toolkit처럼 편리하게 불변성을 관리할 수 있습니다.)

Zustand의 가장 큰 특징은 별도의 Provider 컴포넌트가 필요 없다는 점입니다. 어디서든 스토어를 정의하고 사용할 수 있어 매우 유연합니다. 또한, 상태 업데이트 시 리렌더링을 최적화하여 필요한 컴포넌트만 리렌더링되도록 설계되었습니다.

장점과 단점

• 장점
  • 극도로 간결한 API: `create` 함수 하나로 스토어를 정의하고 `useStore` 훅으로 상태에 접근하는 직관적인 방식입니다.
  • 최소한의 보일러플레이트: Redux에 비해 훨씬 적은 코드로 상태를 설정하고 업데이트할 수 있습니다.
  • 높은 성능: 필요한 부분만 업데이트하는 최적화된 렌더링을 제공하며, 번들 사이즈가 매우 작습니다.
  • Provider 불필요: 리액트 Context API를 사용하지 않아 애플리케이션 루트에 Provider를 감쌀 필요가 없습니다.
  • 유연성: Redux DevTools 연동, 미들웨어 추가 등 다양한 방식으로 확장 가능합니다.
• 단점
  • 불변성 관리: Redux Toolkit처럼 내장된 불변성 관리 기능이 없으므로, 개발자가 직접 상태 불변성을 유지해야 합니다. (Immer와 같은 외부 라이브러리 사용 권장)
  • 생태계 규모: Redux만큼 크고 성숙한 생태계를 가지고 있지는 않습니다.
  • 대규모 로직 분리: 스토어 로직이 복잡해질 경우, Redux처럼 엄격한 규칙이 없어 개발자의 설계 역량에 따라 코드 품질이 달라질 수 있습니다.

간단한 코드 예시

// store/useCounterStore.js
import { create } from 'zustand';

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  incrementByAmount: (amount) => set((state) => ({ count: state.count + amount })),
}));

export default useCounterStore;

// components/Counter.js
import React from 'react';
import useCounterStore from '../store/useCounterStore';

function Counter() {
  const count = useCounterStore((state) => state.count);
  const increment = useCounterStore((state) => state.increment);
  const decrement = useCounterStore((state) => state.decrement);
  const incrementByAmount = useCounterStore((state) => state.incrementByAmount);

  return (
    <div>
      <span>Count: {count}</span>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={() => incrementByAmount(5)}>Add 5</button>
    </div>
  );
}

export default Counter;

Image by NikolayFrolochkin on Pixabay

Recoil: 리액트 본연의 방식으로, 페이스북의 해답

Recoil은 리액트를 만든 페이스북(Meta)에서 개발한 상태 관리 라이브러리입니다. 리액트의 Suspense와 Concurrent Mode와 같은 새로운 기능들과 시너지를 내도록 설계되었으며, 리액트 컴포넌트의 로컬 상태를 관리하는 방식과 유사하게 원자적(atomic)으로 상태를 관리하는 것이 특징입니다.

핵심 개념 및 철학

Recoil은 아톰(Atom)과 셀렉터(Selector)라는 두 가지 핵심 개념을 기반으로 합니다.

• 아톰(Atom): 리액트 컴포넌트의 로컬 상태와 유사하게, 변경 가능한 상태의 단위입니다. 아톰은 구독하는 컴포넌트들에게 상태가 변경될 때마다 리렌더링을 트리거합니다. 여러 컴포넌트가 동일한 아톰을 구독할 수 있으며, 이 아톰은 전역 상태의 역할을 합니다.
• 셀렉터(Selector): 아톰이나 다른 셀렉터를 입력으로 받아 파생된 상태(Derived State)를 계산하는 순수 함수입니다. 셀렉터는 캐싱되어 성능을 최적화하며, 비동기 데이터 처리에도 유용하게 사용될 수 있습니다.

Recoil은 리액트의 `useState` 훅처럼 컴포넌트 내부에서 `useRecoilState` 훅을 사용하여 아톰에 접근하고 업데이트합니다. 이는 개발자가 리액트의 상태 관리 방식에 익숙하다면 Recoil을 빠르게 학습할 수 있게 합니다.

장점과 단점

• 장점
  • 리액트 친화적: `useState`와 유사한 API를 제공하여 리액트 개발자에게 익숙하고 직관적입니다.
  • 원자적 상태 관리: 필요한 상태만 구독하여 렌더링을 최적화하고, 컴포넌트 수준의 세밀한 상태 관리가 가능합니다.
  • 파생 상태 관리 용이: 셀렉터를 통해 복잡한 파생 상태를 효율적으로 계산하고 캐싱할 수 있습니다. 비동기 데이터 처리에도 강점을 가집니다.
  • Suspense 및 Concurrent Mode 지원: 리액트의 최신 기능들과 통합되어 미래 지향적인 아키텍처를 구축할 수 있습니다.
  • 보일러플레이트 감소: Redux에 비해 훨씬 적은 양의 코드로 상태를 관리할 수 있습니다.
• 단점
  • 생태계 및 안정성: Redux나 Zustand에 비해 상대적으로 늦게 등장하여 생태계가 아직 완전히 성숙하지 않았으며, API 변경 가능성이 있습니다. (하지만 Meta에서 관리하므로 안정성은 보장되는 편)
  • 학습 곡선: 아톰과 셀렉터의 개념, 그리고 이들이 리액트 렌더링 주기와 어떻게 상호작용하는지 이해하는 데 시간이 필요할 수 있습니다.
  • 디버깅 도구: Redux DevTools만큼 강력한 디버깅 도구가 부족합니다.

간단한 코드 예시

// store/counterAtom.js
import { atom, selector } from 'recoil';

export const counterState = atom({
  key: 'counterState', // 고유한 키
  default: 0,
});

export const squaredCounterState = selector({
  key: 'squaredCounterState',
  get: ({ get }) => {
    const count = get(counterState);
    return count * count;
  },
});

// components/Counter.js
import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { counterState, squaredCounterState } from '../store/counterAtom';

function Counter() {
  const [count, setCount] = useRecoilState(counterState);
  const squaredCount = useRecoilValue(squaredCounterState);

  return (
    <div>
      <span>Count: {count}</span>
      <span>Squared Count: {squaredCount}</span>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
  
}

export default Counter;

// App.js (RecoilRoot로 감싸야 함)
import React from 'react';
import { RecoilRoot } from 'recoil';
import Counter from './components/Counter';

function App() {
  return (
    <RecoilRoot>
      <Counter />
    </RecoilRoot>
  );
}

export default App;

Jotai: 원자 단위 상태 관리, 극강의 미니멀리즘

Jotai는 Recoil과 유사하게 아톰(Atom) 기반의 상태 관리를 제공하지만, Recoil보다 훨씬 더 작고(tiny), 미니멀리스트(minimalist)하며, 유연한 라이브러리입니다. "Jotai"는 일본어로 "상태(状態)"를 의미하며, 이름처럼 상태 그 자체에 집중하는 경향을 보입니다.

핵심 개념 및 철학

Jotai는 Recoil과 마찬가지로 아톰을 핵심 개념으로 사용합니다. 하지만 Recoil의 셀렉터와 같은 복잡한 파생 상태 개념 대신, 아톰 자체를 파생 아톰으로 구성하거나, 일반 자바스크립트 함수를 통해 아톰 간의 관계를 만듭니다. 이는 API를 극도로 단순화하고, 개발자가 리액트 훅을 사용하는 것처럼 자연스럽게 상태를 다룰 수 있도록 돕습니다.

Jotai의 아톰은 단순한 값뿐만 아니라 비동기 로직, 읽기 전용/쓰기 전용 아톰 등 다양한 형태로 확장될 수 있습니다. 또한, Recoil과 달리 `Provider` 컴포넌트가 선택 사항이어서, 필요에 따라 전역적으로 사용하거나 특정 서브트리에만 적용할 수 있습니다. 번들 사이즈가 매우 작아 성능에 민감한 프로젝트에 특히 유리합니다.

장점과 단점

• 장점
  • 극강의 미니멀리즘: 매우 작은 번들 사이즈와 간결한 API를 제공하여 배우기 쉽고 사용하기 편리합니다.
  • 리액트 친화적: `useState`와 유사하게 아톰을 정의하고 사용하는 방식이 리액트 개발자에게 익숙합니다.
  • 유연한 아톰 구성: 기본 아톰 외에도 파생 아톰, 읽기/쓰기 아톰 등 다양한 형태로 아톰을 조합하여 복잡한 로직을 구현할 수 있습니다.
  • 렌더링 최적화: 아톰 단위로 구독하여 필요한 컴포넌트만 효율적으로 리렌더링합니다.
  • 선택적 Provider: Recoil과 달리 `Provider`가 필수가 아니어서, 특정 컴포넌트 트리에만 상태를 격리하여 관리할 수 있습니다.
• 단점
  • 생태계 및 성숙도: 비교적 신생 라이브러리로, Redux나 심지어 Recoil보다도 생태계가 작고 문서화가 부족할 수 있습니다.
  • 복잡한 파생 상태 관리: Recoil의 셀렉터처럼 강력한 파생 상태 관리 도구가 내장되어 있지 않아, 복잡한 파생 상태 로직은 개발자가 직접 구성해야 합니다.
  • 디버깅 도구: 아직 Redux DevTools와 같은 강력한 전용 디버깅 도구가 부족합니다.

간단한 코드 예시

// store/counterAtom.js
import { atom } from 'jotai';

export const countAtom = atom(0);

// 파생 아톰 (읽기 전용)
export const squaredCountAtom = atom((get) => get(countAtom) * get(countAtom));

// components/Counter.js
import React from 'react';
import { useAtom } from 'jotai';
import { countAtom, squaredCountAtom } from '../store/counterAtom';

function Counter() {
  const [count, setCount] = useAtom(countAtom);
  const [squaredCount] = useAtom(squaredCountAtom); // 읽기 전용 아톰은 배열 디스트럭처링으로 첫 번째 요소만 사용

  return (
    <div>
      <span>Count: {count}</span>
      <span>Squared Count: {squaredCount}</span>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
      <button onClick={() => setCount((prev) => prev - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;

Image by pen_ash on Pixabay

주요 라이브러리 비교 분석: 어떤 상황에 어떤 선택을?

네 가지 라이브러리의 특징을 살펴보았습니다. 이제 주요 지표들을 기준으로 비교 분석하여, 여러분의 프로젝트에 최적의 선택을 할 수 있도록 돕겠습니다.

특징	Redux (with RTK)	Zustand	Recoil	Jotai
학습 곡선	높음 (액션, 리듀서, 미들웨어 등 복잡한 개념)	낮음 (간결한 API, 리액트 훅과 유사)	보통 (아톰, 셀렉터 개념 이해 필요)	낮음 (아톰 개념만으로 대부분 해결)
보일러플레이트	상대적으로 많음 (RTK로 많이 감소)	매우 적음	적음	매우 적음
번들 사이즈	큼	매우 작음 (~1KB)	작음 (~10KB)	매우 작음 (~1KB)
주요 개념	Store, Reducer, Action, Middleware	Store (create), Hooks (useStore)	Atom, Selector	Atom
불변성 관리	내장 (Immer 사용, RTK)	수동 (개발자 직접 또는 Immer 사용)	내장 (Immer 유사)	내장 (Immer 유사)
Provider 필요 여부	필수	불필요	필수 (RecoilRoot)	선택 사항
비동기 처리	미들웨어 (Thunk, Saga 등)	스토어 내 함수로 직접 구현	셀렉터로 처리 용이	아톰 내부에서 처리
디버깅 도구	매우 강력 (Redux DevTools)	양호 (Redux DevTools 연동 가능)	제한적	제한적
적합한 프로젝트	대규모, 복잡한 엔터프라이즈 앱. 상태 변화 예측이 중요한 경우.	중소규모 프로젝트, 빠른 개발, 간결함이 중요한 경우.	중대규모 프로젝트, 리액트 최신 기능 활용, 세분화된 상태 관리.	소규모, 성능 최적화가 중요하거나 극도의 미니멀리즘을 선호하는 경우.

결론: 프로젝트 상황에 맞는 현명한 선택

리액트 상태 관리 라이브러리는 각각 고유한 장단점과 철학을 가지고 있습니다. 어떤 라이브러리가 "최고"라고 단정하기보다는, 프로젝트의 특성과 팀의 상황에 맞춰 가장 적합한 도구를 선택하는 것이 중요합니다.

• Redux (with Redux Toolkit): 대규모 엔터프라이즈급 애플리케이션을 개발하며, 상태 변화의 예측 가능성과 강력한 디버깅 도구가 필수적이라면 Redux Toolkit이 여전히 훌륭한 선택입니다. 초기 학습 곡선은 있지만, 견고한 아키텍처와 방대한 생태계는 큰 강점입니다.
• Zustand: 중소규모 프로젝트에서 빠른 개발 속도와 간결한 코드를 추구한다면 Zustand가 탁월한 선택입니다. 보일러플레이트가 거의 없고, 리액트 훅에 익숙한 개발자라면 쉽게 적응할 수 있습니다. 성능 또한 매우 뛰어납니다.
• Recoil: 리액트의 최신 기능(Suspense, Concurrent Mode)을 활용하고 싶거나, 아톰 단위의 세분화된 상태 관리를 통해 렌더링을 최적화하고 싶다면 Recoil이 좋은 대안이 될 수 있습니다. 페이스북에서 개발했기에 리액트와의 시너지를 기대할 수 있습니다.
• Jotai: 극도의 미니멀리즘과 최소한의 번들 사이즈를 추구하며, 아톰 기반의 유연한 상태 관리를 선호한다면 Jotai가 매력적인 선택입니다. Recoil보다 더욱 간결한 API로 작은 규모의 프로젝트나 특정 컴포넌트의 상태 관리에 강력합니다.

결론적으로, 팀의 숙련도, 프로젝트의 규모와 복잡성, 그리고 성능 요구사항을 종합적으로 고려하여 현명한 결정을 내리시길 바랍니다. 때로는 여러 라이브러리를 혼용하여 각자의 장점을 취하는 것도 하나의 방법이 될 수 있습니다. 이 글이 여러분의 리액트 상태 관리 여정에 도움이 되었기를 바랍니다.

여러분의 프로젝트에서는 어떤 상태 관리 라이브러리를 사용하고 계신가요? 혹은 어떤 라이브러리에 더 관심이 있으신가요? 댓글로 자유롭게 의견을 공유해주세요!

📌 함께 읽으면 좋은 글

• [이슈 분석] 원격 근무 vs RTO 논쟁: 개발자 생산성, 문화, 미래 업무 환경 심층 분석
• [생산성 자동화] AI 기반 코딩 도구를 활용한 개발 생산성 극대화 전략: GitHub Copilot, Tabnine 비교 분석
• [기술 리뷰] Next.js App Router 도입, 과연 옳은 선택이었을까? 실전 사용 후기

이 글이 도움이 되셨다면 공감(♥)과 댓글로 응원해 주세요!
궁금한 점이나 다루었으면 하는 주제가 있다면 댓글로 남겨주세요.