[리액트(React) Study Log] [Person App-008] Understanding & Using State
1. State 개요
- Props는 부모로부터 전달받는 attribute 인데, 어떤 속성을 Props 처럼 outside 로부터 전달받아야 하는 경우도 있지만, component 의 inside 에 직접 가지고 있는 것이 더 유용한 경우가 있는데 이럴 때 사용하는 게 State 임.
- State는 component 자신이 가지고 있는 상태 정보.
- State는 class-based component 에서만 사용 가능.
- react 의 기본 Component 는 State, Life-cycle, PropTypes 등의 속성을 가지고 있으며, 따라서 extends Component 구문으로 만들어지는 class-based component 에서만 위의 3가지 속성을 사용할 수 있음. 위의 3가지 속성이 필요한 경우에만 class-based component 로 만들고, 필요없는 경우에는 일단 functional component 로 만들고, 3가지 속성이 경우필요해질 때 class-based component 로 변경해서 사용하면 됨. (state 관리 등이 필요없는 functional component 가 app management 측면에서 편리하기 때문)
- functional component 에서는 State 는 사용할 수 없고, Props만 사용 가능. class-based component 에서는 State 와 Props 모두 사용 가능.
- state 는 javascript object 형태로 정의.
- component 내에서 자신의 state 에 접근할 때는 this.state.<state key name> 으로 접근.
(this 는 state 를 가지고 있는 compoennt 자신을 의미함.
- component 의 state(상태)가 changed 되면 해당 component 내의 render method 가 작동해서 re-rendering 된다. 즉, 상태 변화가 일어날 때마다 변화된 상태가 즉시 브라우져에 반영됨.
단, 이때 하위의 자식 component 까지 모두 re-rendering 이 일어나기 때문에 불필요한 cost 가 들어가서 성능 저하가 야기될 수 있음. --> 이러한 성능 저하 이슈는 class-based component 에서 사용 가능한 Life-Cycle method 에 의해 해결이 가능함. (ex : state 조건에 따라서 자식 component 의 불필요한 re-rendering 막기 등, 추후 자세히 다룰 예정.)
2. App.js 에 state 만들기
- object 형태로 state 를 정의하고 JSX 내에서 this.state.xxx 형태로 사용함.
- 아래 app 은 결국 부모 component 의 state 를 자식 component 에 props 로 전달해서 브라우져에 rendering 되는 구조임.
// src-App.js
import React, { Component } from 'react';
import './App.css';
import Person from './Person/Person';
class App extends Component {
state = {
persons: [
{ name: 'David', age: 28 },
{ name: 'Lina', age: 29 },
{ name: 'Nick', age: 26 }
]
}
render() {
return (
<div className="App">
<h1>Hi, I'm React App</h1>
<p>This is really working!</p>
<button>Switch Name</button>
<Person name={this.state.persons[0].name} age={this.state.persons[0].age} />
<Person name={this.state.persons[1].name} age={this.state.persons[1].age}>Nice to meet you.</Person>
<Person name={this.state.persons[2].name} age={this.state.persons[2].age} />
</div>
);
}
}
export default App;
3. 브라우져 확인
