Colin's Blog
[javascript] 리액트 라우터의 버그 및 이슈 대응

리액트 라우터는 웹 애플리케이션에서의 라우팅을 처리하는 데 사용되는 인기 있는 라이브러리입니다. 하지만, 모든 소프트웨어와 마찬가지로 리액트 라우터에도 버그와 이슈가 발생할 수 있습니다. 이번 포스트에서는 몇 가지 주요한 버그와 이슈를 살펴보고, 대응하는 방법에 대해 알아보겠습니다.

이슈: 리액트 라우터의 Link 컴포넌트를 사용하여 페이지를 이동할 때, 클릭 시 2번 렌더링되는 현상이 발생합니다. 이로 인해 컴포넌트 안의 상태가 재설정되거나 네트워크 요청이 중복으로 발생할 수 있습니다.

대응 방법: 이 문제는 보통 Link 컴포넌트의 to 속성이 동적으로 변경되는 경우 발생합니다. 이를 해결하기 위해 to 속성을 불변(immutable)하게 유지하거나, React.memo나 shouldComponentUpdate와 같은 성능 최적화 메서드를 사용하여 중복 랜더링을 방지할 수 있습니다.

import React, { memo } from 'react';
import { Link } from 'react-router-dom';

const MyLink = memo(({ path, label }) => (
  <Link to={path}>{label}</Link>
));

export default MyLink;

2. 동적 URL 매칭과 미치지 못하는 문자 처리 문제

이슈: 리액트 라우터의 동적 URL 매칭을 사용할 때, 특정 문자(예: /, ?, # 등)를 올바르게 처리하지 못하는 경우가 있습니다. 이로 인해 정상적인 경로로 라우팅되지 않거나, 컴포넌트가 올바르게 렌더링되지 않을 수 있습니다.

대응 방법: 이 문제에 대한 대응은 라우터 구성 시 일부 문자를 이스케이프(escape)하거나 인코딩하는 것입니다. encodeURIComponent와 decodeURIComponent 함수를 사용하여 URL을 인코딩하고 디코딩할 수 있습니다.

import React from 'react';
import { useParams } from 'react-router-dom';

const MyComponent = () => {
  const { id } = useParams();
  const decodedId = decodeURIComponent(id);

  // 사용: /my-component/abc%2Fdef -> abc/def
  // ...
};

3. 뒤로 가기 버튼 작동 안하는 문제

이슈: 브라우저의 뒤로 가기 버튼이 리액트 라우터로 구현된 페이지에서 작동하지 않는 경우가 있습니다. 이로 인해 사용자가 기대하는 대로 페이지 내 이동이 이루어지지 않을 수 있습니다.

대응 방법: 이 문제는 대부분 브라우저의 캐시(cache)와 관련된 것으로 보고 있습니다. 이를 해결하기 위해 리액트 라우터의 withRouter를 사용하여 라우터의 갱신을 감지하고, 필요한 경우 페이지 리로딩을 수행할 수 있습니다.

import React, { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

const MyComponent = ({ history }) => {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.location.reload();
    });

    return () => {
      unlisten();
    };
  }, []);

  // ...
};

export default withRouter(MyComponent);

결론

리액트 라우터는 많은 웹 애플리케이션에서 라우팅을 간단하게 처리하기 위한 강력한 도구입니다. 하지만, 버그와 이슈로 인해 예기치 않은 동작이 발생할 수 있습니다. 본 포스트에서는 몇 가지 주요한 문제와 대응 방법을 소개했으며, 이를 통해 라우팅에 관련된 문제를 더욱 효과적으로 해결할 수 있을 것입니다.

참고 자료

© 2018 Colin. All rights reserved.