React Native에서 Redux를 이용한 상태 관리

모바일 앱 개발 분야에서 React Native와 Redux의 조합은 강력한 도구로 자리 잡았습니다. 이 글에서는 React Native 애플리케이션에서 Redux를 활용한 효과적인 상태 관리 방법에 대해 심층적으로 알아보겠습니다. 재능넷과 같은 복잡한 플랫폼을 개발할 때 이러한 기술 스택의 중요성은 더욱 두드러집니다.

React Native는 Facebook에서 개발한 크로스 플랫폼 모바일 앱 개발 프레임워크로, JavaScript를 사용하여 iOS와 Android 앱을 동시에 개발할 수 있게 해줍니다. Redux는 JavaScript 애플리케이션의 상태를 관리하기 위한 예측 가능한 상태 컨테이너입니다. 이 두 기술의 결합은 복잡한 앱 개발을 단순화하고 성능을 최적화하는 데 큰 도움이 됩니다. 🚀

1. React Native 소개

React Native는 모바일 앱 개발 환경을 혁신적으로 변화시켰습니다. 이 프레임워크의 주요 특징과 장점을 살펴보겠습니다.

1.1 React Native의 핵심 개념

크로스 플랫폼: 하나의 코드베이스로 iOS와 Android 앱을 동시에 개발
컴포넌트 기반: 재사용 가능한 UI 컴포넌트를 통한 효율적인 개발
네이티브 렌더링: JavaScript로 작성된 코드를 네이티브 UI 요소로 변환
핫 리로딩: 실시간 코드 수정 및 즉각적인 결과 확인

React Native의 이러한 특징들은 개발 생산성을 크게 향상시키며, 특히 재능넷과 같은 복잡한 서비스를 구현할 때 매우 유용합니다. 다양한 기능과 사용자 인터페이스를 효율적으로 구현할 수 있기 때문입니다. 📱

1.2 React Native의 아키텍처

React Native의 아키텍처를 이해하는 것은 효과적인 앱 개발을 위해 중요합니다. 다음은 React Native의 주요 아키텍처 구성 요소입니다:

이 아키텍처는 JavaScript 코드와 네이티브 플랫폼 간의 효율적인 통신을 가능하게 합니다. JavaScript 스레드에서 실행되는 React 코드는 브릿지를 통해 네이티브 스레드와 통신하며, 이를 통해 네이티브 UI 요소를 조작합니다.

1.3 React Native의 성능 최적화

React Native 앱의 성능을 최적화하기 위해서는 다음과 같은 방법들을 고려해야 합니다:

메모이제이션: React.memo와 useMemo를 활용하여 불필요한 리렌더링 방지
가상화된 리스트: FlatList, SectionList 등을 사용하여 대량의 데이터 효율적으로 렌더링
이미지 최적화: 적절한 크기와 포맷의 이미지 사용, 캐싱 전략 구현
네이티브 모듈 활용: 성능이 중요한 작업은 네이티브 코드로 구현

이러한 최적화 기법들은 재능넷과 같은 대규모 서비스에서 특히 중요합니다. 사용자 경험을 향상시키고 앱의 반응성을 높이는 데 큰 도움이 됩니다. 💪

2. Redux 기초

Redux는 JavaScript 애플리케이션의 상태를 관리하기 위한 예측 가능한 상태 컨테이너입니다. React Native 앱에서 Redux를 사용하면 복잡한 상태 관리를 단순화하고 애플리케이션의 데이터 흐름을 일관되게 유지할 수 있습니다.

2.1 Redux의 핵심 원칙

Redux는 다음과 같은 세 가지 핵심 원칙을 기반으로 합니다:

단일 진실 공급원(Single Source of Truth): 애플리케이션의 전체 상태는 하나의 스토어에 객체 트리 형태로 저장됩니다.
상태는 읽기 전용(State is Read-Only): 상태를 변경하는 유일한 방법은 액션을 발생시키는 것입니다.
변경은 순수 함수로 작성(Changes are Made with Pure Functions): 상태 트리가 어떻게 변경되는지 명시하기 위해 리듀서를 작성합니다.

이러한 원칙들은 애플리케이션의 상태 관리를 예측 가능하고 추적 가능하게 만듭니다. 특히 재능넷과 같이 다양한 사용자 상호작용과 복잡한 데이터 흐름을 가진 앱에서 이러한 원칙의 중요성이 더욱 부각됩니다. 🔍

2.2 Redux의 주요 구성 요소

Redux의 주요 구성 요소는 다음과 같습니다:

액션 (Actions): 애플리케이션에서 스토어로 보내는 데이터 패키지입니다. 상태 변경의 유일한 방법입니다.
리듀서 (Reducers): 현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수입니다.
스토어 (Store): 애플리케이션의 전체 상태 트리를 보유합니다. 상태를 변경하는 유일한 방법은 액션을 디스패치하는 것입니다.
디스패치 (Dispatch): 액션을 스토어로 보내는 프로세스입니다.
구독 (Subscribe): 컴포넌트가 스토어의 변경사항을 수신하는 메커니즘입니다.

이러한 구성 요소들이 조화롭게 작동하여 애플리케이션의 상태를 일관되게 관리합니다. 재능넷과 같은 복잡한 앱에서는 이러한 구조화된 상태 관리가 코드의 유지보수성과 확장성을 크게 향상시킵니다. 🏗️

2.3 Redux 데이터 흐름

Redux의 데이터 흐름은 단방향이며, 다음과 같은 순서로 진행됩니다:

사용자 인터랙션 또는 기타 이벤트가 발생하면 액션이 생성됩니다.
생성된 액션은 스토어로 디스패치됩니다.
스토어는 현재 애플리케이션 상태와 디스패치된 액션을 리듀서에 전달합니다.
리듀서는 이전 상태와 액션을 기반으로 새로운 상태를 계산합니다.
스토어는 리듀서가 반환한 새로운 상태로 애플리케이션 상태를 업데이트합니다.
상태 변경을 구독하고 있는 모든 컴포넌트에 변경 사항이 통지됩니다.
필요한 경우, 컴포넌트는 새로운 상태에 따라 리렌더링됩니다.

이러한 단방향 데이터 흐름은 애플리케이션의 상태 변화를 예측 가능하고 추적 가능하게 만듭니다. 재능넷과 같은 대규모 앱에서 이는 디버깅을 용이하게 하고, 상태 관련 버그를 줄이는 데 큰 도움이 됩니다. 🔄

3. React Native와 Redux 통합

React Native 애플리케이션에 Redux를 통합하는 과정은 몇 가지 단계로 이루어집니다. 이 과정을 통해 앱의 상태 관리를 보다 효율적이고 예측 가능하게 만들 수 있습니다.

3.1 Redux 설치 및 기본 설정

먼저, 필요한 패키지들을 설치해야 합니다:


npm install redux react-redux @reduxjs/toolkit

이 명령어는 Redux 코어, React Redux 바인딩, 그리고 Redux Toolkit을 설치합니다. Redux Toolkit은 Redux 로직을 작성하는 데 필요한 유틸리티들을 제공합니다.

다음으로, 루트 컴포넌트에서 Redux 스토어를 설정합니다:


// App.js
import React from 'react';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({
  reducer: rootReducer,
});

const App = () =&gt; (
  &lt;Provider store={store}&gt;
    {/* 여기에 앱 컴포넌트들을 추가 */}
  &lt;/Provider&gt;
);

export default App;

이 설정을 통해 앱의 모든 컴포넌트에서 Redux 스토어에 접근할 수 있게 됩니다. 재능넷과 같은 복잡한 앱에서는 이러한 중앙 집중식 상태 관리가 매우 유용합니다. 🔧

3.2 액션 정의

Redux Toolkit을 사용하면 액션 생성자와 액션 타입을 한 번에 정의할 수 있습니다:


// actions/userActions.js
import { createAction } from '@reduxjs/toolkit';

export const login = createAction('user/login');
export const logout = createAction('user/logout');
export const updateProfile = createAction('user/updateProfile');

이렇게 정의된 액션들은 재능넷 앱에서 사용자 인증, 프로필 관리 등의 기능을 구현할 때 사용될 수 있습니다.

3.3 리듀서 작성

리듀서는 액션에 따라 상태를 어떻게 변경할지 정의합니다. Redux Toolkit의 createReducer 함수를 사용하면 보다 간결하게 리듀서를 작성할 수 있습니다:


// reducers/userReducer.js
import { createReducer } from '@reduxjs/toolkit';
import { login, logout, updateProfile } from '../actions/userActions';

const initialState = {
  isLoggedIn: false,
  userInfo: null,
};

const userReducer = createReducer(initialState, (builder) =&gt; {
  builder
    .addCase(login, (state, action) =&gt; {
      state.isLoggedIn = true;
      state.userInfo = action.payload;
    })
    .addCase(logout, (state) =&gt; {
      state.isLoggedIn = false;
      state.userInfo = null;
    })
    .addCase(updateProfile, (state, action) =&gt; {
      state.userInfo = { ...state.userInfo, ...action.payload };
    });
});

export default userReducer;

이 리듀서는 로그인, 로그아웃, 프로필 업데이트 등의 사용자 관련 액션을 처리합니다. 재능넷 앱에서 이러한 기능들은 핵심적인 부분일 것입니다. 👤

3.4 컴포넌트에서 Redux 사용

React 컴포넌트에서 Redux 상태를 사용하고 액션을 디스패치하려면 useSelector와 useDispatch 훅을 사용합니다:


// components/UserProfile.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { updateProfile } from '../actions/userActions';

const UserProfile = () =&gt; {
  const userInfo = useSelector(state =&gt; state.user.userInfo);
  const dispatch = useDispatch();

  const handleUpdateProfile = (newInfo) =&gt; {
    dispatch(updateProfile(newInfo));
  };

  return (
    &lt;View&gt;
      &lt;Text&gt;{userInfo.name}&lt;/Text&gt;
      &lt;Text&gt;{userInfo.email}&lt;/Text&gt;
      {/* 프로필 업데이트 UI 및 로직 */}
    &lt;/View&gt;
  );
};

export default UserProfile;

이 컴포넌트는 Redux 스토어에서 사용자 정보를 가져와 표시하고, 프로필 업데이트 액션을 디스패치할 수 있습니다. 재능넷 앱에서 이러한 방식으로 사용자 프로필 관리 기능을 구현할 수 있습니다. 🖼️

이러한 방식으로 React Native와 Redux를 통합하면, 앱의 상태 관리가 보다 체계적이고 효율적으로 이루어집니다. 특히 재능넷과 같이 다양한 기능과 복잡한 데이터 흐름을 가진 앱에서 이러한 구조는 개발 및 유지보수를 크게 용이하게 합니다. 🚀

4. Redux Middleware

Redux middleware는 액션이 디스패치되어 리듀서에 도달하기 전에 중간에 로직을 추가할 수 있게 해주는 강력한 기능입니다. 이를 통해 비동기 작업, 로깅, 라우팅 등 다양한 기능을 구현할 수 있습니다.

4.1 Redux Thunk

Redux Thunk는 가장 널리 사용되는 미들웨어 중 하나로, 비동기 액션 생성자를 작성할 수 있게 해줍니다. 이는 API 호출과 같은 비동기 작업을 처리할 때 특히 유용합니다.


// 설치
npm install redux-thunk

// 스토어에 적용
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

// 비동기 액션 생성자 예시
export const fetchUserData = (userId) =&gt; {
  return async (dispatch) =&gt; {
    dispatch({ type: 'FETCH_USER_REQUEST' });
    try {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_USER_FAILURE', error });
    }
  };
};

이러한 방식으로 재능넷 앱에서 사용자 데이터를 비동기적으로 가져오는 작업을 구현할 수 있습니다. 🔄

4.2 Redux Saga

Redux Saga는 더 복잡한 비동기 흐름을 관리하기 위한 미들웨어입니다. 제너레이터 함수를 사용하여 비동기 작업을 더 선언적이고 테스트하기 쉽게 만듭니다.


// 설치
npm install redux-saga

// 스토어에 적용
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

// Saga 예시
import { call, put, takeEvery } from 'redux-saga/effects';

function* fetchUser(action) {
  try {
    const user = yield call(Api.fetchUser, action.payload.userId);
    yield put({type: "USER_FETCH_SUCCEEDED", user: user});
  } catch (e) {
    yield put({type: "USER_FETCH_FAILED", message: e.message});
  }
}

function* userSaga() {
  yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}

Redux Saga를 사용하면 재능넷 앱에서 복잡한 비동기 작업 흐름을 더 효과적으로 관리할 수 있습니다. 예를 들어, 사용자 인증, 프로필 업데이트, 결제 처리 등의 복잡한 작업을 처리할 수 있습니다. 🧙‍♂️

4.3 커스텀 미들웨어 작성

특정 요구사항에 맞는 커스텀 미들웨어를 작성할 수도 있습니다. 예를 들어, 모든 액션을 로깅하는 미들웨어를 만들어 보겠습니다:


const loggingMiddleware = store =&gt; next =&gt; action =&gt; {
  console.log('이전 상태:', store.getState());
  console.log('액션:', action);
  const result = next(action);
  console.log('다음 상태:', store.getState());
  return result;
};

// 스토어에 적용
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(loggingMiddleware)
);

이러한 커스텀 미들웨어를 통해 재능넷 앱의 특정 요구사항을 충족시킬 수 있습니다. 예를 들어, 특정 액션이 발생할 때마다 분석 데이터를 전송하거나, 에러를 캐치하여 처리하는 등의 작업을 수행할 수 있습니다. 🛠️

Redux 미들웨어는 액션과 리듀서 사이에 위치하여 추가적인 로직을 수행할 수 있게 해줍니다. 이를 통해 재능넷과 같은 복잡한 앱에서 다양한 비즈니스 로직을 효과적으로 처리할 수 있습니다. 특히 비동기 작업, 로깅, 에러 처리 등을 체계적으로 관리할 수 있어 앱의 안정성과 유지보수성을 크게 향상시킬 수 있습니다. 🚀

5. Redux와 함께 사용하는 유용한 라이브러리들

Redux 생태계에는 개발을 더욱 효율적으로 만들어주는 다양한 라이브러리들이 있습니다. 이러한 라이브러리들은 재능넷과 같은 복잡한 앱 개발 시 매우 유용할 수 있습니다.

5.1 Reselect

Reselect는 Redux 상태에서 파생된 데이터를 효율적으로 계산하기 위한 라이브러리입니다. 메모이제이션을 통해 불필요한 재계산을 방지하여 성능을 최적화합니다.


// 설치
npm install reselect

// 사용 예시
import { createSelector } from 'reselect';

const getUsers = state =&gt; state.users;
const getActiveFilter = state =&gt; state.activeFilter;

const getActiveUsers = createSelector(
  [getUsers, getActiveFilter],
  (users, activeFilter) =&gt; users.filter(user =&gt; user.status === activeFilter)
);

// 컴포넌트에서 사용
const activeUsers = useSelector(getActiveUsers);

이를 통해 재능넷 앱에서 사용자 목록 필터링과 같은 복잡한 데이터 처리를 효율적으로 수행할 수 있습니다. 🔍

5.2 Immer

Immer는 불변성을 쉽게 다룰 수 있게 해주는 라이브러리입니다. Redux의 리듀서에서 상태를 업데이트할 때 특히 유용합니다.


// 설치
npm install immer

// 사용 예시
import produce from 'immer';

const userReducer = (state = initialState, action) =&gt;
  produce(state, draft =&gt; {
    switch (action.type) {
      case 'UPDATE_USER_PROFILE':
        draft.userProfile = { ...draft.userProfile, ...action.payload };
        break;
      // 다른 케이스들...
    }
  });

Immer를 사용하면 복잡한 중첩 객체의 업데이트를 훨씬 간단하게 처리할 수 있어, 재능넷 앱의 상태 관리 코드를 더욱 깔끔하게 유지할 수 있습니다. 🌱

5.3 Redux Persist

Redux Persist는 Redux 스토어의 상태를 로컬 스토리지에 저장하고 복원하는 기능을 제공합니다. 이는 앱을 다시 시작할 때 이전 상태를 유지하고 싶을 때 유용합니다.


// 설치
npm install redux-persist

// 설정
import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: ['user', 'settings'] // 유지하고 싶은 리듀서들
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);
const persistor = persistStore(store);

// App.js에서 사용
import { PersistGate } from 'redux-persist/integration/react';

const App = () =&gt; (
  &lt;Provider store={store}&gt;
    &lt;PersistGate loading={null} persistor={persistor}&gt;
      {/* 앱 컴포넌트들 */}
    &lt;/PersistGate&gt;
  &lt;/Provider&gt;
);

Redux Persist를 사용하면 재능넷 앱에서 사용자 세션 정보, 앱 설정 등을 유지할 수 있어 사용자 경험을 크게 향상시킬 수 있습니다. 💾

5.4 Redux-Observable

Redux-Observable은 RxJS를 기반으로 한 Redux 미들웨어로, 복잡한 비동기 및 이벤트 기반 프로그래밍을 가능하게 합니다.


// 설치
npm install redux-observable rxjs

// 설정
import { createEpicMiddleware, combineEpics } from 'redux-observable';

const epicMiddleware = createEpicMiddleware();
const store = createStore(rootReducer, applyMiddleware(epicMiddleware));

// Epic 예시
import { ofType } from 'redux-observable';
import { mergeMap, map, catchError } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

const fetchUserEpic = action$ =&gt; action$.pipe(
  ofType('FETCH_USER'),
  mergeMap(action =&gt; ajax.getJSON(`https://api.github.com/users/${action.payload}`).pipe(
    map(response =&gt; ({ type: 'FETCH_USER_FULFILLED', payload: response })),
    catchError(error =&gt; of({ type: 'FETCH_USER_REJECTED', payload: error.xhr.response, error: true }))
  ))
);

epicMiddleware.run(combineEpics(fetchUserEpic));

Redux-Observable을 사용하면 재능넷 앱에서 복잡한 비동기 작업 흐름(예: 실시간 알림, 주기적인 데이터 동기화 등)을 효과적으로 관리할 수 있습니다. 🔬

이러한 라이브러리들을 적절히 활용하면 Redux를 사용한 상태 관리를 더욱 강력하고 효율적으로 만들 수 있습니다. 재능넷과 같은 복잡한 앱에서는 이러한 도구들이 개발 생산성과 앱 성능을 크게 향상시킬 수 있습니다. 각 프로젝트의 요구사항에 맞게 적절한 라이브러리를 선택하고 통합하는 것이 중요합니다. 🛠️

6. 성능 최적화 및 디버깅

React Native와 Redux를 사용한 앱 개발에서 성능 최적화와 효과적인 디버깅은 매우 중요합니다. 특히 재능넷과 같은 복잡한 앱에서는 이러한 측면들이 사용자 경험에 큰 영향을 미칩니다.

6.1 Redux DevTools

Redux DevTools는 Redux 애플리케이션의 상태 변화를 실시간으로 추적하고 디버깅할 수 있게 해주는 강력한 도구입니다.


// 설치
npm install --save-dev redux-devtools-extension

// 스토어 설정에 적용
import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(...middleware))
);

Redux DevTools를 사용하면 재능넷 앱의 상태 변화를 시각적으로 확인하고, 시간 여행 디버깅을 통해 버그를 쉽게 찾아낼 수 있습니다. 🕵️‍♂️

6.2 메모이제이션

메모이제이션은 불필요한 리렌더링을 방지하여 앱의 성능을 향상시킵니다. React의 useMemo, useCallback 훅과 Redux의 reselect 라이브러리를 활용할 수 있습니다.


import React, { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { createSelector } from 'reselect';

const selectExpensiveCalculation = createSelector(
  state =&gt; state.data,
  data =&gt; expensiveCalculation(data)
);

const MyComponent = () =&gt; {
  const expensiveResult = useSelector(selectExpensiveCalculation);
  
  const memoizedValue = useMemo(() =&gt; computeExpensiveValue(expensiveResult), [expensiveResult]);

  return (
    &lt;View&gt;
      &lt;Text&gt;{memoizedValue}&lt;/Text&gt;
    &lt;/View&gt;
  );
};

이러한 메모이제이션 기법을 사용하면 재능넷 앱에서 복잡한 계산이나 렌더링 작업의 성능을 크게 개선할 수 있습니다. 🚀

6.3 비동기 작업 최적화

비동기 작업을 효율적으로 관리하는 것은 앱의 반응성을 높이는 데 중요합니다. Redux Thunk나 Redux Saga를 사용하여 비동기 작업을 체계적으로 관리할 수 있습니다.


// Redux Thunk 예시
const fetchUserData = (userId) =&gt; async (dispatch) =&gt; {
  dispatch({ type: 'FETCH_USER_REQUEST' });
  try {
    const response = await api.fetchUser(userId);
    dispatch({ type: 'FETCH_USER_SUCCESS', payload: response.data });
  } catch (error) {
    dispatch({ type: 'FETCH_USER_FAILURE', error });
  }
};

// 컴포넌트에서 사용
const UserProfile = ({ userId }) =&gt; {
  const dispatch = useDispatch();
  const userData = useSelector(state =&gt; state.user.data);

  useEffect(() =&gt; {
    dispatch(fetchUserData(userId));
  }, [userId, dispatch]);

  // 렌더링 로직
};

이러한 방식으로 비동기 작업을 관리하면 재능넷 앱에서 데이터 로딩, 사용자 인증 등의 작업을 더욱 효율적으로 처리할 수 있습니다. ⚡

6.4 코드 분할 (Code Splitting)

대규모 앱에서는 코드 분할을 통해 초기 로딩 시간을 줄이고 전반적인 성능을 개선할 수 있습니다. React Native에서는 react-native-dynamic-bundle과 같은 라이브러리를 사용할 수 있습니다.


// 동적 임포트 예시
const DynamicComponent = React.lazy(() =&gt; import('./DynamicComponent'));

function MyComponent() {
  return (
    &lt;React.Suspense fallback={&lt;LoadingSpinner /&gt;}&gt;
      &lt;DynamicComponent /&gt;
    &lt;/React.Suspense&gt;
  );
}

코드 분할을 통해 재능넷 앱의 초기 로딩 속도를 개선하고, 사용자 경험을 향상시킬 수 있습니다. 📦

6.5 성능 프로파일링

React Native의 성능 프로파일링 도구를 사용하여 앱의 성능 병목 지점을 식별하고 최적화할 수 있습니다.


import { PerformanceMonitor } from 'react-native';

PerformanceMonitor.setEnabled(true);
PerformanceMonitor.onPerformanceData(({ jsFPS, nativeFPS }) =&gt; {
  console.log(`JS FPS: ${jsFPS}, Native FPS: ${nativeFPS}`);
});

이러한 성능 모니터링을 통해 재능넷 앱의 실제 사용 환경에서의 성능을 지속적으로 추적하고 개선할 수 있습니다. 📊

이러한 성능 최적화 및 디버깅 기법들을 적절히 활용하면, 재능넷과 같은 복잡한 React Native 앱의 성능을 크게 향상시키고 안정성을 높일 수 있습니다. 지속적인 모니터링과 최적화는 사용자에게 최상의 경험을 제공하는 데 필수적입니다. 🌟