Frontend React.js

[React.js] props 란?

"React.js props"

Posted by JacksonJang on April 16, 2024

props는 properties의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용합니다. 각 컴포넌트는 받은 props를 사용하여 렌더링하거나 다른 자식 컴포넌트에게 전달할 수 있습니다.

Props Drilling

한 컴포넌트에서 시작하여 여러 단계의 중첩된 컴포넌트를 거쳐 props를 전달하는 과정

Props Drilling 현상의 문제점

유지보수 비용 증가
코드의 복잡성 증가
컴포넌트 의존성 증가

Props Drilling 현상을 해결하기 위해서는 다음과 같은 방법으로 해결할 수 있습니다.

Context API 사용: React 16 이상부터 사용 가능한 기본 내장 API
상태 관리 라이브러리 사용 : Redux, MobX 등
컴포넌트 구조 수정 : 불필요한 props 전달 사용 안하기