자바스크립트 Immer와 React Router 함께 사용하기

27 Sep 2023

javascript

자바스크립트에서 Immer와 React Router를 함께 사용하면 프론트엔드 웹 애플리케이션을 더욱 효율적이고 유지보수하기 쉽게 개발할 수 있습니다. Immer는 불변성 관리를 간편하게 해주는 라이브러리이며, React Router는 React 애플리케이션에서 라우팅을 관리할 수 있는 라이브러리입니다. 이 두 라이브러리를 함께 사용하면 상태 관리와 라우팅을 좀 더 효율적으로 처리할 수 있습니다.

Immer란?

Immer는 불변성을 관리하는 라이브러리로, 불변성을 유지하면서도 원본 객체를 수정하는 것과 같은 작업을 쉽게 할 수 있도록 도와줍니다. Immer를 사용하면 “draft”라고 불리는 가상의 작업 공간에서 원본 객체를 수정하고, Immer가 자동으로 변경된 결과를 적용하는 방식으로 작업할 수 있습니다.

Immer의 사용법은 간단합니다. 우선, Immer를 설치한 다음, produce() 함수를 사용하여 불변성을 관리할 객체를 감싸주면 됩니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다.

import produce from 'immer';

const state = { 
  data: { 
    count: 0 
  } 
};

const updatedState = produce(state, draft => {
  draft.data.count++;
});

console.log(updatedState);

위의 코드에서 produce() 함수를 사용하여 state 객체를 감싸주면, draft라는 가상의 작업 공간에서 state 객체를 수정할 수 있습니다. draft.data.count++와 같은 코드로 데이터를 변경하면, Immer가 변경된 결과를 적용하여 updatedState라는 새로운 객체를 생성합니다.

React Router란?

React Router는 React 라이브러리를 사용하여 싱글 페이지 애플리케이션(SPA)에서 라우팅을 관리할 수 있게 해주는 라이브러리입니다. React Router를 사용하면 브라우저의 URL 경로에 따라 다른 컴포넌트를 렌더링하거나, 동적으로 라우팅을 처리할 수 있습니다.

React Router를 사용하기 위해선, 우선 다음과 같이 React Router를 설치해야 합니다.

npm install react-router-dom

React Router를 사용하는 예제 코드는 다음과 같습니다.

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

위의 예제에서는 BrowserRouter 컴포넌트를 사용하여 라우팅을 설정하고, Switch 컴포넌트를 사용하여 경로에 따라 다른 컴포넌트를 렌더링합니다. Route 컴포넌트를 사용하여 경로와 컴포넌트를 매핑합니다. 즉, / 경로에는 Home 컴포넌트를, /about 경로에는 About 컴포넌트를, /contact 경로에는 Contact 컴포넌트를 렌더링합니다.

Immer와 React Router 함께 사용하기

Immer와 React Router를 함께 사용하는 방법은 간단합니다. Immer를 사용하여 상태 관리를 할 때, React Router에서 제공하는 “useLocation” 훅을 사용하여 현재 경로를 알 수 있습니다. 이를 활용하면 경로에 따라 다른 상태를 관리할 수 있습니다.

import produce from 'immer';
import { useLocation } from 'react-router-dom';

function CustomComponent() {
  const location = useLocation();

  const handleButtonClick = () => {
    produce(state, draft => {
      if (location.pathname === '/about') {
        draft.data.aboutCount++;
      } else if (location.pathname === '/contact') {
        draft.data.contactCount++;
      }
    });
  };

  return (
    <button onClick={handleButtonClick}>Increment Count</button>
  );
}

위의 예제에서는 useLocation 훅을 사용하여 현재 경로를 가져온 뒤, produce() 함수를 사용하여 상태를 변경합니다. 경로에 따라 다른 상태를 관리하기 위해 if문을 사용하여 상태를 수정하고, Immer가 변경된 결과를 적용한 새로운 상태를 반환합니다.

Immer와 React Router를 함께 사용하면 상태 관리와 라우팅이 더욱 편리해집니다. Immer를 사용하여 불변성을 관리하고, React Router를 사용하여 라우팅을 처리하면 복잡한 웹 애플리케이션에서도 간단하게 상태를 관리할 수 있습니다.

해시태그

#JavaScript #Immer #ReactRouter