2025 React Master Class - 12강: 컴포넌트 정의와 특징 그리고 스토어
- 컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 코드 조각으로, HTML, CSS, JavaScript를 포함하며 특정 기능이나 디자인을 담당합니다. 🧩
- 컴포넌트 사용은 애플리케이션의 복잡성을 줄이고 유지보수를 용이하게 하여 현대 웹 개발의 필수 개념으로 자리 잡았습니다. 🏗️
- 코드 재사용성을 통해 동일한 컴포넌트를 여러 영역에서 활용하여 코드 중복을 줄이고 개발 효율성을 높입니다. ♻️
- 컴포넌트 내부에서 상태(state)와 로직을 관리하며, 외부 노출 없이 독립성을 유지하여 유연한 데이터 변화 처리가 가능합니다. 🔒
- 여러 작은 컴포넌트를 조합하여 폼, 레이아웃, 페이지 등 더 복잡한 UI를 구성할 수 있는 확장성을 제공합니다. ➕
- Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 메커니즘입니다. ➡️
- Props는 단방향 데이터 흐름(부모 → 자식)을 따르며, 자식 컴포넌트에서는 전달받은 데이터를 직접 수정할 수 없는 읽기 전용(Read-Only) 속성을 가집니다. 🛡️
- Props의 깊이가 깊어질수록 데이터 추적이 어려워지는 'Props Drilling'이라는 문제점이 발생할 수 있습니다. 📉
- Props Drilling 문제를 해결하기 위해 Redux, Recoil, Jotai 등과 같은 중앙 집중식 상태 관리 라이브러리(스토어)가 활용되어 전역 상태 및 액션을 효율적으로 관리합니다. 🏪