[React] Props vs State

React로 프로젝트를 진행하면서 무작정 따라하면서 만들다보니 머리속으로 정리가 안돼서 중요하게 느껴지는 개념들을 정리해보기로했다.

 

Props

Props란, Properties의 줄임말이다.

props는 Component의 configuration(옵션 값)이며, Component에게 전달된 시점에서 immutable(불변) 하다.

그렇다면 props가 하는 역할은 무엇일까?

상위 컴포넌트가 하위 컴포넌트에게 전달하는 데이터로, 하위 컴포넌트에서 읽기 전용으로 사용된다.

// First Component

const First = () => {
	return <Second name="wonillism" />;
}

export default First;

// Second Component

const Second = ({ name }) => {
	return <div> { name } </div>;
};

export default Second;

 

 

State

state는 Component가 mount될 때 기본 값으로 시작한다.

시간이 변하거나 사용자 이벤트에 따라 mutate(변화)한다.state는 어느 한 시점에서 직렬화(serializable)가 가능한 표현이다.

 

Component는 자신만의 state를 내부적으로 관리한다. 따라서 하위 Component의 state에 대해서는 손댈 수 없다.