2023.01.25

평소에 컴포넌트/파일를 꽤나 잘게 쪼갠다는 이야기를 듣는다.
사실 크게 잘게 쪼개지는 않는데, 팀원들에 비해 잘게 쪼개는 듯 하다.

내가 쪼개는걸 선호하는 이유는

• 가독성이 개선된다. (주관적인기준)
  • 하나의 파일에서 500줄이상 넘어가면 가독성을 해친다고 생각한다.
  • 하나의 파일에는 최대한 연관된 코드들만 존재하도록 한다.
    • 예를들어 .tsx 에는 컴포넌트 로직만 담는다.
    • 컴포넌트 로직에서 사용하는 상수값이나 유틸성 함수들은 별도의 파일로 분리한다.
• 협업시 충돌발생확률이 낮다.
  • 협업을 진행중일 때, 하나의 파일에 코드가 몰아져있고, 그 코드를 동료와 함께 수정하고 있다면 충돌이 자주 발생하고 이를 해결하는데 꽤나 무시할 수 없는 비용이 소요된다.
• 애플리케이션의 성능을 향상시킬 수 있다.
  • 메모이제이션과 같은 기술을 활용하여 리렌더링횟수를 줄일수도있겠지만, 사실 컴포넌트만 잘 분리해두더라도 리렌더링횟수를 줄일 수 있다. props가 변경되는 컴포넌트들만 리렌더링 시키면 된다.
  • 하나의 컴포넌트파일에 모든 코드가 뭉쳐있다면, state가 바뀌었을 때 모든 코드가 재실행된다.
  • 반면 여러개의 자식컴포넌트로 분리해둔다면, 해당 영역의 state가 바뀌면, 해당 영역만 리렌더링 된다.
  • 그리고 이렇게 분리해두면 메모이제이션을 적용하기도 편하다. 자식컴포넌트로 넘어가는 props에 대해서만 메모이제이션을 적용해주면 되니, 메모이제이션을적용하는 기준이 꽤나 명쾌해진다.