How to write maintainable React code - (0) Overview

지금까지 4년 넘게 웹 개발 공부를 해오면서 익힌 개발 노하우들을 정리하고, 꾸준히 업데이트를 해보려 합니다.

지금까지 프로젝트를 여럿 만들어 오며 느낀 거지만 프로젝트를 설계하고 유지보수하는 저만의 노하우는 나 자신은 잘 아는데, 정작 협업을 하는 동료와는 제대로 공유가 안되서 프로젝트가 통일성을 잃게 될 때가 있더라구요. 나와 협업을 하게 될, 하는 동료가 '아, 이 사람이 코드를 이런 방식으로 짜는구나.' 라는 것을 이 시리즈를 통해 알게 된다면 시간 낭비가 덜하지 않을까 싶더라구요.

참고로 저는 유지보수가 잘 된 코드의 기준을 **'2주 뒤에 다시 봐도 바로 알아볼 수 있는 코드'**로 잡고 설계를 하려고 노력하고 있습니다.

핵심 주제

스택

이 시리즈에서는 Next.js, Typescript, TailwindCSS 이 세 가지 기술을 중점적으로 사용한 설계 방식을 다룹니다.

폴더 구조

폴더 구조를 설계하는 노하우를 다룹니다. 가장 핵심이 되는 폴더는 services로, 컴포넌트를 제외한 나머지인 hooks나, 커스텀 상수, 커스텀 함수, api 코드 등등을 한 곳에 모아놓는 역할을 합니다.

리액트 컴포넌트의 코드 배치 규칙

네 가지 주제로 나눠서 설명해보려고 합니다.

1. 프로젝트 설계
2. 컴포넌트 설계
3. 네이밍

폴더 구조를 어떻게 잡는 지를 먼저 설명해 보려고 합니다. 크게 독특한 건 없지만 최대한 각 폴더마다 용도를 확실히 알 수 있도록 이름을 명시하는 데 많이 신경을 썼습니다.

컴포넌트의 경우 처음 컴포넌트를 생성하기 위해 먼저 컴포넌트의 틀을 잡는데, 이를 위해 코드 스니펫을 사용합니다. 코드 스니펫은 명령어를 지정하여 빠르게 템플릿을 만들어 주는 도구입니다.

리액트에 내장된 useState나 useEffect 혹은 커스텀 훅스 등을 사용할 때 배치 순서를 고정시켜 빠르게 훅스 탐색을 할 수 있도록 도와줍니다. 요약만 간단하게 얘기하면 useState는 항상 최상위에, useEffect는 항상 return문 바로 위에 배치하는 것을 원칙으로 두고 있습니다.

모달과 같은 컴포넌트들은 프로젝트가 커짐에 따라 공용 모달 컴포넌트가 많아질 수 밖에 없는데, 이를 효율적으로 관리하기 위해 Ant Desgin이 사용하는 설계 방식을 차용했습니다. 이 방법을 사용하면 가독성도 챙기고 유지보수도 한결 쉬워질 수 있습니다.

네이밍의 경우 변수는 Boolean 타입일 때 접두사 is를 붙여서 선언을 한다던지, 그런 내용들을 다뤄볼 예정입니다.

해당 내용들은 모두 이 시리즈에서 다룰 예정입니다. 아낌없이 조언 주시면 감사하겠습니다. 👍