나는 리액트를 잘 쓰고 있을까?

2021년 부터 리액트를 사용해 만 3년이 넘는 기간동안 리액트를 사용하고 있다.

아직 주니어 개발자이지만 이전 회사에서 다양한 컴포넌트를 만들어보고, 기능도 만들고, 리팩토링도 하면서 리액트에 경험을 쌓았고 나름 리액트를 잘 쓴다고 생각하면서 개발하고 있었다.

 

그러다 문득 어제 나는 리액트를 잘 쓰는 프론트엔드 개발자일까? 라는 생각이 들었다.

 

4월에 새로 입사한 회사에서 입사하자마자 코딩 컨벤션을 주도적으로 정착시키고 zustand 컨벤션을 녹여 팀 내에 zustand 사용하는 방식을 변경했고, react-query를 사용하는 코드를 추상화하여 리팩토링을 하고 있다.

 

또 최근엔 exceljs 라이브러리를 사용해 프로젝트에서 사용할 수 있는 커스텀 훅을 만들었고 팀원들이 이 훅을 사용해 Excel 파일을 다운로드 하는 로직을 리팩토링 하고 있다.

 

그러다 문득 나는 리액트를 잘 쓰고 있을까? 라는 생각이 들었던 것이다.

 

사실 작년에 리액트 과제 전형에서 좋지 못한 점수를 받은 경우가 종종 있었다. 함께 개발했던 동료분들 모두 나에게 개발을 잘 한다고 칭찬을 했었고, 어느 팀에서든지 에이스 역할을 했었는데 좋지 못한 점수를 받다보니 "도대체 왜?" 라는 생각이 많이 들었다. 면접을 잘 보고 지금의 회사에서 나를 좋게 봐주셔서 입사해 일을 하고 있지만 마음 속에서는 찝찝함이 남아있었다.

 

그러다 어제 코드를 작성하다가 문득 득 생각이 리액트를 사용할 때 함수 컴포넌트를 사용하고, 리랜더링이 발생하면 컴포넌트를 다시 호출하는데 지금까지 과제 전형에서 페이지 단에 대부분의 코드를 때려 넣지 않았나 라는 생각이 들었던 것이다.

 

최근에 했던 사이드 프로젝트만 놓고 봐도 페이지 컴포넌트에 들어가는 요소를 쪼개어 사용하지 않고 정말 공통 컴포넌트가 아니라면 그대로 녹여놨던 기억이 있다.

 

리액트에서 컴포넌트가 리랜더링이 발생한다면 해당 컴포넌트를 재호출 하는데, 만약 컴포넌트가 쪼개어 있지 않고 모든 코드가 하나의 컴포넌트에 들어있다면 불필요한 리랜더링 비용이 발생할 것이다.

 

그럼 컴포넌트를 어떻게 쪼개어야 할까? 정답은 없지만 상태를 기준으로 컴포넌트를 쪼개야 할 것 같다는 생각이다. 결국 리액트에서 리랜더링이 발생하는 요인은 state, props이기 때문이다.

 

너무 재사용성에 포커싱이 되어있어서 무조건 재사용 가능한 컴포넌트만 컴포넌트로 분리해야지!! 했었는데, 앞으로는 상태를 위주로 컴포넌트를 쪼개는 방식으로 코드를 작성해야 겠다는 생각이 들었다.

 

그럼 해당 페이지에서만 사용할 쪼갠 컴포넌트 파일은 어디에 위치해야 할까? 해당 페이지 파일의 같은 위치에 놓을수 있지 않을까 생각을 해본다.

 

요즘 FSD 아키텍처가 유행이던데, 해당 아키텍처도 공부를 좀 해봐야겠다는 생각이 들었다.

 

https://velog.io/@jay/fsd

 

그건 그렇고 리액트를 즐겨 쓰지만 리액트를 잘 쓰고 있지 않은것 같다. 이 생각이 들자마자 유데미에서 클린코드 리액트라는 강의를 끊고 지금 강의를 듣고 있는데 강의를 완강하고 어떤 생각이 들었는지 다시 회고글을 작성해보겠다.