[React] Link 클릭 시 url은 바뀌지만 컴포넌트는 업데이트 되지 않는 문제 해결 (오류 노트)

 

[React] Link 클릭 시 url은 바뀌지만 컴포넌트는 업데이트 되지 않는 문제 해결

 

📖 들어가며

리액트로 팝콘 타임을 클론 코딩하는 포트폴리오를 제작하면서 공부 중에, Link (react-router-dom)을 클릭하면 url은 변경이 되지만 컴포넌트가 업데이트가 되지 않아서 제대로 기능이 작동하지 않는 문제를 겪었다.

해결하고 나니깐 정말 별 것 아니었지만...(개념 부족) 무엇이 문제이고, 어떻게 해결했는지 다시 복습하기 위해 정리해본다.

❗ 문제

문제의 화면이다.

 

문제 화면

 

Detail 컴포넌트에서 해당 영화의 관련 영화 데이터를 받아와서 보여주는 컴포넌트다.

Detail 컴포넌트에서 관련 영화를 보여준 뒤, 관련 영화를 클릭하면 그 관련 영화의 Detail 컴포넌트가 렌더링 되게 구현하고 싶었다.

하지만 사진에 보이는 바와 같이 클릭을 하면 url은 잘 변경이 되지만 해당 영화의 Detail이 렌더링이 되지 않았습니다.

 

관련된 컴포넌트들의 코드들이다.

DetailComponent 1

DetailComponent 2

Router

conosole.log로 하나하나 다 출력해본 결과 새로운 api가 받아지지 않은 채로 렌더링이 되기 때문에, url은 변경이 되지만 컴포넌트는 새로운 데이터로 렌더링을 하지 못했다. 

❗❓ 해결책을 얻기까지...

이거 해결하려고 구글링 한 흔적들이다.. 사진상 외에 엄청 많음...

 

구글링 흔적

구글링을 해서 여러 해결책들을 적용해 보았지만 상황에 따라서 모두 이유가 다르기 때문에, 저는 구글링 해서 나온 해결책으로는 해결이 안 되었다.

혼자되지도 않는 머리를 굴리면서 state를 이용해서 컴포넌트가 리 렌더링 되게 해 볼까..라는 등등 생각을 해보면서 모두 시도해보았지만 무한 렌더링이 되는 등 오류만 더 발생할 뿐이었다.

그래서 결국 노마드코더 슬랙의 react 채널에다가 해당 질문을 올렸더니, 슬랙의 일원분께서 props가 업데이트됐을 때 컴포넌트도 새로 업데이트되도록 해보라는 조언을 받았다.

조언 덕분에 리액트 공식문서에 있는 리액트 Lifecycle을 보면서 다시 공부도 하면서 해결 방안을 생각하게 되었다.

💡 해결 방안

공식문서를 보다가 바로 componentDidUpdate라는Lifecycle이 눈에 들어왔다.

ko.reactjs.org/docs/react-component.html

React.Component – React

처음에 리액트를 접하면서 배운 개념이지만 확실하게 알고 있지 못해서 생각을 못했던 것 같다.

리액트 공식문서 중 componentDidUpdate

 

componentDidUpdate로 이전 props를 인자로 받아서 사용할 수 있다는 것을 처음 알게 되었다.

그래서 생각한 것이 url은 잘 변경이 되니깐 현재 url과 전에 url을 비교해서 데이터를 불러오는 함수를 작동시키게 하면어떨까 라는 생각에 바로 한번 적용해 보았다.

 

componentDidMount에 있던 api를 받아오는 함수를 componentDidUpdate에서도 사용하기 위해 따로 분리해줬다.

그리고 componentDidUpdate에서 이전의 props를 받아와서 전, 후 pathname을 비교해서 현재와 다르면 데이터를 새로 받을 수 있게 getData 함수를 실행시키도록 했다.

componentDidUpdate를 통해서 prevProps와 현재 props를 console.log를 통해 출력해보면 아래와 같은 결과가 나온다.

console.log(`이전 pathname ${prevProps.location.pathname}`);
console.log(`현재 pathname ${this.props.location.pathname}`);

 

전,후 pathname conosle.log

 

이로서 if문을 통해서 비교한 후 함수를 실행시켜주도록 했다.

해결된 코드다.

 

해결한 코드

 

👀 결과 화면

생각했던 것처럼 작동이 아주 잘 되는 것을 확인할 수 있었다.

 

결과 화면

📕 마치며

애초에 리액트의 Lifecycle에 대한 개념이 확실하게 잡혀있었다면 쉽게 해결할 수 있는 상황이었는데 개념이 부족한 탓에 많이 돌아온 것 같다.

현재 이 방법이 해결하는 데에 있어서 최선일지 모르겠으나, 저에게는 최선인 것 같다.

이번 기회에 확실히 알게 되었고, 그래서 다음에 Lifecycle에 대해 정리하는 공부하고 작성할 생각이다.

그리고 애초에 function 컴포넌트로 hook을 사용했으면 쉽게 됐을 거라는 말씀도 있었는데...

아직 익숙하지 않고 현재 완성되지는 않았지만 class 컴포넌트로 작성된 것들 모두 funciton 컴포넌트로 변경 중이어서

현재 이 글에서 작성한 컴포넌트도 hook을 사용해서 바꿔볼 생각이다.