React의 props와 state에 대해 설명해 주세요.

👩🏻‍💻 React에서 props와 state의 차이점은 무엇인가요?

 

💁🏻‍♀️ 요약하자면 ,

props와 state는 모두 JavaScript의 객체이며 두 객체 모두 렌더링 후 결과물에 영향을 주는 정보들을 가지고 있지만, 한 가지 차이가 있습니다. props는 외부로부터 전달받은 값으로 변할 수 없는 값인 반면, state는 함수 컴포넌트 내부에서 변화하는 값입니다.

 

각 특징으로는,

(1) props

- React에서 컴포넌트는 부모 컴포넌트로부터 props를 받고 이 props는 상속받는 컴포넌트 내에서 수정이 불가합니다.

- 데이터의 뿌리가 자기 자신이 아닌, 즉 외부로부터 전달받기에 함부로 변하지 않는 값인 읽기 전용 값입니다.

 

(2) state

- 자기 자신의 컴포넌트에서 만들어 낸 데이터이기에 컴포넌트가 스스로 관리합니다.

- 현재 컴포넌트 안에서 생성되거나 변할 수 있는 데이터이기에 사용자의 액션 등 상태에 따라 변경될 수 있습니다. 

 

 

📎 내용 참조

- React 공식문서

- Blog: props & state