13.3_프론트엔드 개발에서 React 컴포넌트의 '상태(state)'와 'props'를 캡슐화하는 것이 어떤 이점을 가지나요?

Stilllee commented 8 months ago

📝 374p

❓ 본문에 따르면, 프론트엔드 개발에서 React 컴포넌트의 '상태(state)'와 'props'를 캡슐화하는 것이 어떤 이점을 가지나요?

eeeyooon commented 8 months ago

캡슐화를 통해 컴포넌트의 내부 상태와 로직을 외부로부터 숨김으로써, 컴포넌트 간의 결합도를 감소시켜 각 컴포넌트를 독립적으로 만들고, 유지보수와 재사용성을 향상시킵니다. 또한 캡슐화는 컴포넌트의 인터페이스를 명확하게 정의하는 데 이점을 줍니다. 외부에서 접근 가능한 부분과 접근 불가능한 부분을 명확하게 구분하여, 컴포넌트에 대한 이해도를 높입니다.

lulla-by commented 8 months ago

캡슐화는 다른 객체 내부의 데이터를 직접 다루지 않고, 해당 객체에서 처리할 행위를 따로 요청하여 협력하는 것을 말합니다. prop drililng이 심할수록 컴포넌트간의 결합도는 높아져서 도메인 분리 측면에서 좋지 않은데 캡슐화를 사용하면 컴포넌트를 독립적으로 작성하고 테스트 할 수 있어 올바르게 도메인을 분리할 수 있으며 재사용성이 향상합니다. 또한 데이터를 외부로부터 숨김으로서 컴포넌트 디테일에 의존하지 않아 컴포넌트간의 의존성을 최소화 시킬 수 있습니다.

sryung1225 commented 8 months ago

먼저 캡슐화란 객체 지향의 핵심 개념 중 하나로 다른 객체 내부의 데이터를 꺼내와서 직접 다루지 않고, 해당 객체에게 처리할 행위를 따로 요청함으로써 협력하는 것입니다. 컴포넌트는 객체의 한 형태이기 때문에, 컴포넌트의 내부 데이터인 state가 캡슐화의 대상이 됩니다. 즉, 컴포넌트 내의 상태와 prop을 잘 다루는 것도 캡슐화의 개념에 부합하게 됩니다.

프로젝트 설계의 궁극적인 목표는 객체들이 유기적으로 협력하게끔 만들어서 적절한 도메인 분리를 하는 것인데, state와 prop을 상태 관리 라이브러리 등으로 캡슐화 함으로써 컴포넌트 간의 결합도를 줄이고 내부 처리 로직이 외부로 드러나는 것을 최소화할 수 있습니다.

Stilllee commented 8 months ago

명확한 역할과 책임 분리

캡슐화를 통해 각 컴포넌트는 자신의 역할과 책임에 집중할 수 있습니다. 이는 각 컴포넌트가 수행하는 기능을 명확히 하고, 그 결과 전체 애플리케이션의 가독성과 유지보수성이 향상됩니다.

재사용성 향상

캡슐화된 컴포넌트는 다른 부분의 코드와 격리되어 있기 때문에, 다른 곳에서도 재사용하기 쉽습니다. 이는 개발 시간을 줄이고, 코드의 일관성을 유지하는 데 도움이 됩니다.

사이드 이펙트 최소화

상태와 props를 적절히 캡슐화함으로써, 한 컴포넌트의 변경이 다른 컴포넌트에 미치는 영향을 최소화할 수 있습니다. 이는 예기치 않은 버그를 방지하고, 시스템의 안정성을 높입니다.

Prop Drilling 방지

캡슐화는 Prop Drilling 문제를 줄이는 데 도움이 됩니다. 즉, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 과정을 최소화함으로써, 컴포넌트 간의 의존성을 줄이고 관리를 용이하게 만듭니다.

테스트 용이성

캡슐화된 컴포넌트는 독립적으로 테스트하기가 더 쉽습니다. 각 컴포넌트가 명확한 역할과 책임을 가지므로, 단위 테스트를 통해 기능을 검증하기가 용이합니다.

이러한 측면들은 프론트엔드 개발에서의 캡슐화가 코드의 품질과 애플리케이션의 전반적인 건강성을 향상시키는 데 기여한다는 것을 강조합니다.

Coding-Village-Protector / woowahan-ts