문제 상황
카테고리에 상관 없이 모두 /로 처리되는 걸 카테고리 id별로 나누어 주기 위한 작업 중 문제가 발생하였다.
//App.tsx
...
<Route path='/:cateId' element={<MainBox children={ProductListBox()} />}/>
...
//CategoryList.tsx
...
navigate(`/${cateId}`);
...
//ProductListBox.tsx
...
const cateId = useParams();
...라우팅은 문제없이 작동했으나, cateId가 {} 빈 객체로 나오던 상황
문제 해결
기존에 사용하던 방식
<Route path='/:cateId' element={<MainBox children={ProductListBox()} />}/>수정한 방식
<Route path='/:cateId' element={<MainBox><ProductListBox /></MainBox>} />이후부턴 정상적으로 cateId를 인식할 수 있었다.
분석
두 가지 방법은 비슷해 보이지만, 구조적인 차이를 갖고 있다.
- children 속성 사용
- JSX에서 직접 선언
children 속성 사용
ProductListBox()을 사용하면 함수 호출로 간주되어 컴포넌트가 즉시 실행된다. 이는 React의 컴포넌트 트리에서 벗어나게 되어 예상치 못한 동작을 초래할 수 있다.
children 속성으로 전달되면 JSX 요소가 아닌 다른 결과값이 될 수 있어, React가 올바르게 렌더링하지 못할 수 있다.
JSX에서 직접 선언
ProductListBox는 Route가 렌더링될 때 호출된다. 이는 React가 컴포넌트를 올바르게 인스턴스화하고, 라이프사이클 메서드를 실행할 수 있게 한다.
MainBox의 자식이 ProductListBox라는 것을 명확히 하여 React 컴포넌트 트리가 올바르게 형성된다.
컴포넌트 트리 구조를 명확히 보여주어 코드가 더 직관적이고 이해하기 쉬우며, React 표준 패턴을 준수하여 상태와 훅이 올바르게 작동하고 예기치 않은 동작을 피할 수 있다.
정리
children props를 직접 설정하는 건 일반적으로 비추천되는 패턴이라고 한다. JSX를 사용해 자식 컴포넌트를 명시적으로 포함시키는 방식이 React의 설계 패턴에 더 적합하기 때문이다.
