컴포넌트 모듈화는 React 개발에서 매우 중요한 개념이다. 컴포넌트를 작고 재사용 가능한 단위로 분리하여 관리하면, 애플리케이션의 유지보수성을 크게 향상시키고 개발 효율을 높일 수 있다.
컴포넌트 분리의 장점
- 데이터 구분이 명확해짐: 각 컴포넌트가 독립적인 데이터를 가지고 있기 때문에, 어떤 데이터가 어디서 사용되고 있는지 파악하기 쉽다. 이는 복잡한 애플리케이션에서 데이터 흐름을 관리하는 데 큰 도움이 된다.
- 재사용성이 높아짐: 잘 설계된 컴포넌트는 다른 부분의 애플리케이션에서도 재사용할 수 있다. 이로 인해 코드의 중복을 줄이고, 개발 시간을 단축할 수 있다.
컴포넌트 분리 순서
- 폴더 구조 설정:
src/components폴더를 생성하여 모든 컴포넌트를 이 폴더 내에 위치시킨다. 이는 프로젝트의 구조를 깔끔하게 유지하는 데 도움이 된다.
- 컴포넌트 파일 생성: 각 컴포넌트에 해당하는
ComponentName.js파일을 생성한다(TypeScript 사용 시ComponentName.tsx) 컴포넌트명은 명확하고 기능을 쉽게 유추할 수 있는 이름을 사용하는 것이 좋고 일반적으로 PascalCase 를 사용한다.
- 컴포넌트 코드 작성: 함수형 컴포넌트는
rfc혹은rfce, 클래스형 컴포넌트는rcc스니펫(코드 조각)을 사용하여 기본 구조를 빠르게 생성할 수 있다. 이후, UI 부분과 필요한 함수 부분을 해당 컴포넌트 파일로 이동시킨다.
- Props를 통한 데이터 전달: 컴포넌트가 필요로 하는 데이터는 상위 컴포넌트로부터 Props를 통해 전달받는다. 이를 통해 각 컴포넌트는 독립적으로 작동할 수 있으며, 재사용성이 높아진다.