React - props vs state

- 아무 생각 없이 사용했지만, 생각해보면 누구든 할 수 있는 질문인 것 같아서 간단히 정리함.

- 둘 다 데이터를 다룰 때 사용되는 개념임.

 

Props

- 부모 컴포넌트가 자식 컴포넌트한테 전달하는 데이터로, 자식 입장에서는 읽기 전용인 값을 의미함.

 

// parent components
import Child from './Child';

export default function Parent() {
	return (
		<Child name='ko' age='13' />
	);
}

...

// child components

export default function Child(props) {
	// 부모로부터 전달받은 데이터. 자식 입장에선 해당 값은 읽기전용
    const { name, age } = props;
    
    return (
    	<>
    		<div>{name}</div>
        	<div>{age}</div>
        </>
    );
}

 

State

- 자신이 들고 있는 값. 상태라고 표현하며, 자신의 컴포넌트 안에서 setState 함수를 통해 상태를 변경할 수도 있음.

- 이 값을 자식에게 보내줄 수도 있으며, 이를 props로 담아서 보내줄 수 있음.

- 이는 보통 컴포넌트 자체에서 설정하며, 외부에는 공개되지 않고 컴포넌트가 스스로 관리함.