리액트를 다루는 핵심 !
State
는 props
처럼 App
컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만,
props
는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state
는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다.
props를 사용했는데도 state를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다.
State
객체를 사용하고 싶다면 컴포넌트를 생성할 때 가장 윗부분(render()
함수보다 먼저)에 constructor()
함수를 적어준다. 컴포넌트 생성자에서 super
를 호줄하기 전에는 this
를 사용할 수 없기 때문이다.
class App extends Component {
constructor(props) {
super(props);
this.state={
Subject:{title:'WEB',sub:'월드와이드웹!'}
}
}
render() {
return (
<div className="App">
<Subject
title={this.state.subject.title}
sub={this.state.subject.sub}>
</Subject>
</div>
);
}
}
즉, 컴포넌트의 시작 부분에서 constructor()
라는 함수가 컴포넌트의 초기화를 시켜줘야 State
에 값을 넣어 사용할 수 있는 것이다.
그리고 App 클래스 내부에서는 중괄호를 이용해
title={this.state.subject.title}
와 같이 State
값을 가져와 사용한다.
class App extends Component {
render() {
return (
<div className="App">
<Subject title="WEB" sub="월드와이드웹!"></Subject>
</div>
);
}
}
위 코드는 State
를 사용해 수정하기 전, 즉 Props
만 사용했을 때 App
컴포넌트의 모습이다.
화면에 출력되는 내용은 완전히 똑같지만, props
데이터를 사용자에게 노출되는 부분에 직접 적는 것이 아니라 State
를 통해 참조했다는 차이가 있다. 즉,
사용자가 알 필요가 없는 데이터를 내부에서 은닉하는 것. 즉, 캡슐화
를 통해 코드를 리펙토링 하는 것이 좋은 사용성을 만드는 핵심이다.