state와 props

state

컴포넌트가 관리하는 내부 상태 데이터. state 값이 변경되면 컴포넌트를 리렌더링 한다. 클래스형 컴포넌트에서는 constructor에서 초기화 되며 setState() 메서드를 사용해 업데이트 한다. 함수형 컴포넌트에서는 useState 훅을 사용하여 관리한다.

props

부모 컴포넌트로부터 전달된 속성 값. 읽기 전용 데이터이므로 컴포넌트 내에서 변경할 수 없다. props를 전달받은 컴포넌트는 이를 활용해 UI를 렌더링하거나 다른 컴포넌트에 전달한다. props는 늘 상위 컴포넌트에서 하위 컴포넌트로 전달되므로 하위 컴포넌트에서 상위 컴포넌트로 전달이 불가능하다. 이런 단방향 데이터 흐름은 리액트의 컴포넌트 아키텍처를 단순화시키기 때문에 결과를 예측하기 수월하다.

그러나 복잡한 규모의 프로젝트에서는 Props Drilling으로 인해 오히려 유지 보수가 어렵다. 만약 Props Drilling이 발생한 상태에서 상위 컴포넌트의 props값이 변경되면 props를 전달받고 있는 하위 컴포넌트들이 모두 리렌더링 되므로 성능 저하가 발생한다. 또한 오류 발생시 어느 컴포넌트에서 발생했는지 추적하기 어렵다. 단, 전역 상태 관리 라이브러리를 사용하면 이러한 문제점을 보완할 수 있다.

Props Drilling

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때 중간에 여러 단계의 하위 컴포넌트를 거쳐 전달하는 것

state와 props의 공통점

• 데이터 변경을 통해 UI를 업데이트하기 위해 사용
• 값이 변경되면 해당 컴포넌트에서 리렌더링 발생

➡️ 효율적인 UI 관리 가능