문제 정의

React 애플리케이션을 개발하면서 페이지 간에 데이터를 전달해야 하는 상황이 빈번하게 발생했습니다. 특히, Link 컴포넌트를 사용하여 다른 페이지로 이동할 때 특정 데이터를 전달하고자 했지만, Link의 state 속성을 활용하는 방법을 몰라 매번 전역 상태로 처리하곤 했었습니다.

해결 과정

문제를 해결하기 위해 React Router의 Link 컴포넌트가 제공하는 state 속성을 활용하여 페이지 간에 데이터를 직접 전달할 수 있다는 사실을 학습하고 적용했습니다. 다음과 같은 단계를 통해 이를 구현하였습니다:

1. React Router의 state 속성 이해 및 활용:

   • Link 컴포넌트의 to prop을 객체 형태로 작성하여 pathname과 state를 함께 전달할 수 있다는 점을 파악했습니다.
   • 예를 들어, 특정 Todo 아이템을 상세 페이지로 전달할 때 state를 사용하여 데이터를 전달할 수 있음을 확인했습니다.

2. 데이터 전달 구현:

   • Link 컴포넌트를 수정하여 필요한 데이터를 state로 전달하도록 변경했습니다.
   • 전달받은 데이터는 목적지 컴포넌트에서 useLocation 훅을 통해 접근할 수 있도록 설정했습니다.

   예시 코드:

   리스트 페이지 (ListPage.tsx)

   import { Link } from 'react-router-dom';
   
   const ListPage = ({ todos }) => {
     return (
       <div>
         {todos.map((todo) => (
           <div key={todo.id}>
             <h3>{todo.title}</h3>
             <Link 
               to={{
                 pathname: `/detail/${todo.id}`,
                 state: { todo }
               }}
             >
               상세보기
             </Link>
           </div>
         ))}
       </div>
     );
   };
   
   export default ListPage;
   

   상세 페이지 (DetailPage.tsx)

   import { useLocation } from 'react-router-dom';
   
   const DetailPage = () => {
     const location = useLocation();
     const { todo } = location.state;
   
     return (
       <div>
         <h2>{todo.title}</h2>
         <p>{todo.body}</p>
         <p>완료 여부: {todo.isDone ? '완료' : '진행 중'}</p>
       </div>
     );
   };
   
   export default DetailPage;
   

3. 전역 상태 관리 제거:

   • 이전에 전역 상태 관리 라이브러리를 사용하여 처리하던 부분을 Link의 state 속성으로 대체함으로써, 불필요한 전역 상태 관리 로직을 제거했습니다.
   • 이를 통해 코드의 복잡성을 줄이고, 상태 관리의 오버헤드를 최소화할 수 있었습니다.

결과

Link의 state 속성을 활용한 후 다음과 같은 개선 효과를 얻었습니다:

• 코드 간결성 향상: 전역 상태를 사용하지 않고도 페이지 간 데이터 전달이 가능해져 코드가 훨씬 간결해졌습니다.
• 개발 생산성 증대: 데이터 전달 로직이 간단해져 개발 속도가 빨라졌으며, 유지보수가 용이해졌습니다.

배운 점 (인사이트)

• Link의 state 속성 활용: React Router의 Link 컴포넌트가 제공하는 state 속성을 통해 페이지 간에 데이터를 손쉽게 전달할 수 있다는 점을 배웠습니다. 이는 전역 상태 관리 라이브러리를 도입하지 않고도 간단한 데이터 전달을 가능하게 하여 코드의 복잡성을 줄이는 데 큰 도움이 되었습니다.
• 상태 관리 최적화: 모든 데이터 전달을 전역 상태 관리 라이브러리에 의존하지 않고, 컴포넌트 간의 직접적인 데이터 전달 방법을 활용함으로써 애플리케이션의 상태 관리 전략을 최적화할 수 있음을 깨달았습니다.
• React Router의 강력함: React Router가 제공하는 다양한 기능들을 깊이 있게 이해함으로써, 보다 효율적이고 유연한 라우팅 및 상태 관리를 구현할 수 있었습니다.
• 코드 유지보수성 향상: 전역 상태 관리의 필요성을 줄이고, 필요한 경우에만 이를 도입하는 접근 방식을 통해 코드의 유지보수성을 높일 수 있음을 경험했습니다.