아마 예전에 리액트 관련 공부 정리를 하다가 한번쯤 썼을 것 같은데... 프로젝트 중 다시 알아둬야 할 것 같아서 기록한다.
리액트는 서버와 실시간으로 통신하며 계속해서 데이터를 받아오는 것을 권장하지 않는다. 새로고침이 없는, SPA와 같은 환경을 구축하는데 강점을 가진 프레임워크기 때문이다. 따라서, 리액트는 처음 렌더링 시 데이터를 모두 받아와서 클라이언트 단에서 저장하고 이를 다루는 것이 추천된다.
물론 서버사이드 렌더링이라는 기술도 있지만, 이는 아직... 배우지 못했다. 이것도 배워나가야할 점이다.
어쨌든, 그래서 리액트는 무언가 정보가 필요할 때 일일히 axios등으로 서버에 요청하는게 아니라 애초에 필요할 데이터들을 미리 받아놓고 이를 어떻게 관리할 것인가를 계획하는 것이 아주 중요하다.
전 페이지에서 필요한 데이터를 받아서 리덕스로 관리한다면? 다른 페이지에서 일일히 서버에 요청하고 props로 땡겨오고 할 필요가 전혀 없다는 것이다.
이 주제는 여기서 출발한다. 주소 값이 안 넘어온다길래 가입할 때 문제가 있나? 싶었지만 DB에는 정상적으로 전달되고 있었다. 그러면 뿌려주는 값이 문제가 있다는 것이니, 데이터 흐름을 따라 체크하면서 올라가보았다.
시작 점은 여기. 나는 다른 페이지를 구축할 때 서버에 axios로 지금 접속한 유저의 id를 주고 해당 유저의 정보를 다시 받아오는 식으로 구축 했는데, 여기서는 fetchUsers()를 통해 모든 유저의 정보를 받아온 후 이를 들고서 활용하는 방법을 사용하고 있었다.
내가 사용한 방식은 비효율적이고 리액트 답지 않는 방법이였던 것이다. 애초에 리덕스를 사용하고 있었으니 유저 데이터를 담아주는 리덕스에서 useSelector 등으로 가져오면 되는 거였는데 왜 그랬을까?
시간이 남는다면 내가 구축한 곳들을 더 나은 방법으로 재구축, 최적화 해봐야겠다. 다음에 리액트를 사용 할 때는 당연히 이러한 점은 개선되어야 겠지.
