TIL - 리액트 컴포넌트 파일 구조 및 상태 업데이트 방식 개선

오늘은 개인 과제로 제출한 투두 리스트를 보완해서 재제출해야 했습니다. 튜터님의 해설 영상을 보고 제가 작성한 코드와의 차이점을 발견했으며, 컴포넌트 파일의 모듈화 및 캡슐화, 그리고 상태 업데이트 방식에 차이가 있는 것을 알게 되었습니다.

컴포넌트 파일 구조 개선

기존의 파일은 src 안에 TodoForm.jsx, TodoItem.jsx, TodoSection.jsx 등 파일들이 하나의 src 레포지토리에 있었습니다. 튜터님들은 components 폴더를 만들어서 관리하는 것을 보고 다음과 같이 개선했습니다:

• src/components/TodoForm
  • index.js
  • TodoForm.jsx
  • TodoForm.css
• src/components/TodoItem
  • index.js
  • TodoItem.jsx
  • TodoItem.css
• src/components/TodoSection
  • index.js
  • TodoSection.jsx
  • TodoSection.css

위와 같은 형식으로 파일 구조를 모듈화, 캡슐화하면서 개선했습니다.

파일 구조 개선으로 얻는 장점

• 모듈화 및 캡슐화: 컴포넌트를 개별 디렉토리로 분리하면, 각 컴포넌트가 자체 파일 구조 내에서 독립적으로 관리가 가능하고 컴포넌트 간의 의존성이 줄어들며, 각 컴포넌트를 독립적으로 개발, 테스트, 유지보수가 가능해집니다.
• 파일 구조의 명확성: 컴포넌트를 디렉토리로 분리하고, 그 안에 index.js, 스타일 파일(.css), JSX 파일(.jsx)을 두면, 파일 구조가 더 명확해져서 프로젝트를 처음 접하는 사람도 쉽게 파일을 찾고 이해할 수 있습니다.
• 간편한 컴포넌트 가져오기: index.js 파일을 사용하면 컴포넌트를 가져올 때 경로가 단순해집니다.

// index.js
export { default } from "./TodoItem";

// Before
import TodoItem from './components/TodoItem/TodoItem';

// After
import TodoItem from './components/TodoItem';

 

• 스타일 파일 분리: 컴포넌트 별로 스타일 파일을 분리하면, 스타일 충돌을 방지할 수 있습니다. 각 컴포넌트의 스타일이 독립적으로 관리되기 때문에, 전역 스타일과의 충돌을 줄이고 컴포넌트가 재사용될 때 스타일도 함께 재사용되므로, 유지보수성이 올라갑니다.
• 코드의 재사용성: 모듈화된 구조는 코드의 재사용성을 높여줍니다. 컴포넌트를 다른 프로젝트나 다른 부분에서 쉽게 재사용할 수 있습니다. 각 컴포넌트가 자체 파일 구조 내에서 독립적으로 존재하기 때문에, 특정 컴포넌트를 다른 프로젝트로 옮기기도 쉽습니다.

이러한 파일 구조 개선은 특히 대규모 프로젝트에서 관리와 확장성을 크게 향상시킵니다. 이러한 장점들은 프로젝트의 전반적인 코드 품질을 높이고, 개발자의 생산성을 향상시킵니다.

상태 업데이트 방식 개선

기존 제가 작성한 코드에서는 상태를 업데이트할 때, 직접 참조하는 방식을 사용했고 튜터님들은 함수형 업데이트 방식을 사용해서 상태를 업데이트하는 차이점을 발견했습니다. 직접 참조하는 방식은 상태 업데이트가 여러 번 발생하면, 비동기적으로 이루어지는 상태 업데이트 특성상 이전 상태를 정확히 참조하지 못할 가능성이 있습니다.

// 기존 코드
const deleteTodo = (id) => {
  setTodos(todos.filter((todo) => todo.id !== id));
};

// 보완한 코드
const deleteTodo = (id) => {
  setTodos((todos) => todos.filter((todo) => todo.id !== id));
};

보완한 코드에서는 함수형 업데이트 방식을 사용하여, 현재 상태를 인자로 받아 새로운 상태로 반환합니다.

상태 업데이트를 함수형 업데이트 방식으로 개선해서 얻는 장점

• 정확한 상태 참조: 함수형 업데이트 방식을 사용하면, 현재 상태를 인자로 받아 새로운 상태를 반환하므로 이전 상태를 정확하게 참조할 수 있습니다.
• 안정성 향상: 상태 업데이트가 비동기적으로 발생하더라도, 함수형 업데이트 방식은 일관된 상태를 유지할 수 있어 코드의 안정성이 향상됩니다.
• 코드의 가독성 및 유지보수성 향상: 상태 업데이트 로직이 더 명확해지고, 코드의 가독성과 유지보수성이 향상됩니다.

결론

오늘은 모듈화, 캡슐화의 중요성과 상태 업데이트의 안정성을 보장하는 방법을 배웠습니다. 이러한 개선을 통해 코드의 구조와 품질이 향상되었고, 유지보수와 확장성이 더욱 쉬워졌습니다. 앞으로의 프로젝트에서도 이러한 원칙을 적용하여 더욱 견고하고 유지보수하기 쉬운 코드를 작성할 수 있도록 노력하겠습니다.