children element를 사용하는 방식 (공식 문서에서 권장)

공식 문서에 component, render, children function을 사용하는 방식은 훅이 도입되기 전의 라우터 초기 버전에 만들어진 앱들을 지원하기 위해 제공된다고 나와있다. 따라서 우리는 children element를 사용하는 방식을 따르기로 했다.

react-router render method (리팩토링 이전의 코드)

[참고] render 방식과 children (function) 방식을 테스트해볼 수 있는 곳

https://codesandbox.io/s/react-render-children-kwl3i?file=/src/App.js

children function을 쓰면 exact를 써도 먹히지 않는다. 현재 URL과 비교해서 / 하나라도 일치한다면 렌더링하기 때문이다. 반면에 render를 쓰면 정확히 URL이 일치해야 렌더링된다.