url로 접근했을 시 정상적으로 렌더링 되지 않는 이슈

 

• 이슈

: Kanban 내에서 Link tag를 이용해  Route 컴포넌트에 접근하여 다른 컴포넌트를 render할 경우 문제가 없지만,
url로 Route 컴포넌트에 접근하여 다른 컴포넌트를 render할 경우에는 화면이 비정상적인 이슈가 발생합니다.

• 원인

: 우리가 흔히 Route 컴포넌트에 render할 컴포넌트를 지정할 때 "component" 키워드를 사용합니다.
component 키워드는 지정한 컴포넌트를 새로 mount 합니다.
따라서 component lifecycle 함수 중 mount와 관련된 함수(ex. componentDidMount, componentWillMount ...)가 동작합니다.
하지만 우리가 url로 접근할 경우 Route 컴포넌트에서 "render" 키워드를 사용한 것과 같이 동작합니다.
render 키워드는 Virtual DOM 에서 변경된 내용만을 탐색하여 변경해줍니다.
따라서 component lifecycle 함수 중 mount와 관련된 함수가 동작하지 않습니다.
https://mingcoder.me/2019/12/04/Programming/React/react-router-component-vs-render/

• 해결방법

: 우리가 mount와 관련된 component lifecycle 함수에서 서비스콜을 하여 데이터를 불러오는 로직을 추가하였다면,
componentWillReceiveProps 함수에서도 같은 동작을 하도록 해야합니다.

• componentWillReceiveProps 함수의 ESLint 에러

: 현재 componentWillReceiveProps 함수는 unsafe 하다는 lint error가 발생합니다.
해당 함수는 React 17 이후 버전에서는 사용할 수 없습니다.
따라서 새로운 component lifecycle 함수인 getDerivedStateFromProps 사용을 권장합니다.
현재 칸반은 componentWillReceiveProps를 사용 중이며, 해당 코드는 추후 일괄적으로 리팩토링 예정입니다.
https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html