react에서 props와 state는 비슷한 듯 보이지만 차이가 있다! 왜 state를 쓰는지 알려면 먼저 props를 알아야한다.
props는 부모 컴포넌트의 값을 자식 컴포넌트로 전달할때 사용한다.
props는 사용자가 컴포넌트를 사용하는 입장에서 중요한 것이고, props를 제공하여 컴포넌트를 조작할 수 있게 됩니다.
state는 props의 값에 따라 내부의 구현에 필요한 데이터들이다.
state는 일반 변수와 다르게 값이 변하게 되면 렌더링이 일어난다. 즉, 값이 변하게 되면 연관있는 컴포넌트들이 다시 렌더링이되어 화면이 바뀌게 된다.
class Subject extends Component {
render() {
return (
<header>
<h1>{this.props.title}</h1>
{this.props.sub}
</header>
);
}
}
class App extends Component {
render() {
return (
<div className="App">
<Subject title="WEB" sub="Hello World!"></Subject>
</div>
);
}
}
class App extends Component {
constructor(props) {
super(props);
this.state={
Subject:{title:'WEB',sub:'Hello World!'}
}
}
render() {
return (
<div className="App">
<Subject
title={this.state.subject.title}
sub={this.state.subject.sub}>
</Subject>
</div>
);
}
화면에 출력되는 내용은 완전히 똑같지만, props 데이터를 사용자에게 노출되는 부분에 직접 적는 것이 아니라 state를 통해 참조했다는 차이가 있다. 다시 말해, 사용자가 알 필요가 없는 데이터를 내부에 숨기는 캡슐화로 사용성을 높일 수 있다!
또한 컴포넌트에 동적인 값(컴포넌트 내부에서 변경할 수 있는 값)을 할당할 수 있다는 장점이 있다!
-> props는 값을 바꾸지는 못한다!(정적) 하지만 state는 setState를 사용해 값을 변경할 수 있다.
➕ 부스트코스 웹프론트엔드 시작하기와 state참고글을 바탕으로 정리하고 공부한 내용입니다.