[기술면접] React 부분 8

<목차>

21. react 컴포넌트의 장점
22. props drilling

21. react 컴포넌트의 장점

1. 재사용성

• 재사용이 가능하도록 설계
• 개발자는 일반적인 UI 요소를 컴포넌트로 만들어 여러 곳에서 재사용 가능
• 예 : 버튼, 입력 필드, 모달, 카드 등의 UI 요소를 컴포넌트로 만들어 다양한 페이지와 애플리케이션에서 재사용 가능

=> 코드 중복을 줄이고 개발 속도 향상

2. 캡슐화

• 자신의 상태와 로직을 캡슐화하고 독립적으로 작동
• 컴포넌트는 내부 구현을 숨기면서 필요한 기능을 제공하는 인터페이스(API)를 노출

=> 코드의 관리를 용이, 복잡성 감소, 디버깅과 테스트 간소화

3. 유지보수성

• 큰 프로젝트의 유지보수를 용이하게 함
• 개별 컴포넌트를 독립적으로 업데이트 하거나 교체 할 수 있음
• 전체 애플리케이션에 미치는 영향을 최소화하면서 필요한 변경을 적용할 수 있음
• 각 팀원이 특정 컴포넌트에 집중할 수 있게 해줌

4. 성능 최적화

• 가상 DOM을 사용하여 실제 DOM의 업데이트를 최소화
• 컴포넌트가 업데이트 될 때마다 React는 가상 DOM에 그 변경사항을 먼저 적용한 다음 실제 DOM과 비교하여 최소한의 변경만을 실제 DOM에 적용

=> 애플리키이션의 기능 향상, 사용자 경험 개선

5. 테스트 용이성

• 독립적으로 테스트 가능
• 각 컴포넌트의 기능과 인터페이스를 개별적으로 테스트
• 단위 테스트와 같은 자동화된 테스트 접근 방식에 특히 유용

=> 애플리케이션의 안정성 상승

6. 확장성

• 새로운 기능이 필요할 때, 새로운 컴포넌트를 추가하거나 기존 컴포넌트를 확장하기 쉬움
• 대규모 애플리케이션에서 특히 중요

Q. react 컴포넌트의 장점에 대해 설명할 수 있습니다.

22. Props Drilling

Props Drilling이란?

• 리액트에서 컴포넌트 계층 구조를 통해 데이터를 전달하는 과정
• 일반적으로 부모 컴포넌트로부터 깊은 자식 컴포넌트에게 props를 "뚫고 들억는" 형태로 전달해야 할 때 사용
• 데이터가 여러 중간 단계의 컴포넌트를 거쳐야 함
• 중간 컴포넌트들은 실제로 해당 데이터를 사용하지 않고 단순히 전달만 하는 역할을 할 때 문제가 발생 => 유지보수성 저하, 컴포넌트의 재사용성을 낮추고 코드를 이해하기 어렵게 만듦

Props Drilling 해결 방법

1. Context API

• 특정 데이터를 컴포넌트 트리 전체에 걸쳐 전역적으로 공유할 수 있는 방법 제공
• 중간 컴포넌트를 거치지 않고 직접 자식 컴포넌트에 데이터 전달

2. 상태 관리 라이브러리

• 애플리케이션의 상태를 중앙에서 관리
• 상태를 필요한 모든 컴포넌트에 직접 연결
• Redux나 Zustand 같은 도구들
• 상태를 전역적으로 관리

Q. props drilling과 이를 해결하는 방법에 관하여 설명할 수 있습니다.