React : Props와 State의 차이

[Hah-nna]

Props와 State

props (short for “properties”) and state are both plain JavaScript objects. While both hold information that influences the output of render, they are different in one important way: props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function).

리액트 공식홈페이지에서는 props와 state 둘 다 렌더링 결과에 영향을 끼치는 일반 자바스크립트 객체라고 정의함. 즉, 둘 다 컴포넌트의 렌더링에 영향을 미치는 데이터임.

props와 state의 차이점

• props : 부모에서 자식컴포넌트로 내려주는 데이터이며, 내려받은 컴포넌트에서 수정이 불가능함
• state : 컴포넌트 안에서 관리되는 (함수에서 선언된 변수처럼) 데이터임. useState 같은 훅을 통해 관리되고 사용자의 인터랙션에 따라 변화함

즉, state는 사용자와의 인터랙션을 통해 변화하는 데이터임. 예를 들면 좋아요를 누르면 갯수가 변화한다든지, 장바구니에 제품을 담을 때 제품이 추가되고, 삭제할 때는 제품이 삭제되는 등 사용자와의 인터랙션을 통해 상태가 변화하는 것을 볼 수 있음