state를 설명하기에 앞서, 생성자에 대해서 알아보겠습니다.
생성자 (contructor)?
생성자는 클래스의 인스턴스가 생성되면 가장 먼저 실행되는 메서드입니다. '생성자'라는 이름에 걸맞게 클래스의 다른 어떤 메서드보다 먼저 실행되며, 주로 인스턴스의 초기 설정에 대한 로직을 생성자에 작성합니다.
super(props)는 항상 최상단에 위치해야 한다.
super는 React에서 React.Component를 가리킵니다. 중요한 것은 super(props) 선언 후에 constructor에서 this 키워드를 사용해야 한다는 것입니다.
import React, { Component } from 'react';
class App extends Component{
constructor(props){
super(props); // super(props)는 최상단에 위치
}
}
render(){
return (
);
}
}
export default App;state?
-
state는 컴포넌트의 렌더링 결과물에 영향을 주는 정보를 저장한 일종의 자바스크립트 객체입니다.
-
state는 컴포넌트 안에서 관리되며, 컴포넌트는 state의 값이 바뀔 때마다 화면을 다시 렌더링 합니다.
-
state의 값을 바꾸는 방법은 this.state와 this.setState 두 가지가 있습니다.
-
this.state는 주로 생성자 안에서 state를 초기화할 때 사용하고, this.setState는 나머지 상황에서 사용합니다.
생성자에서 state를 정의해보겠습니다.
아래의 return 값에 담겨 있는 내용을 state로 만들어보겠습니다.
render(){
return (
<div className="App">
<Head title = 'State 사용해보기'
</Head>
</div>;
);
}
}
export default App;1. 먼저 state를 초기화합니다.
import React, { Component } from 'react';
class App extends Component{
constructor(props){
super(props);
this.state = {
// state 초기화
}
}
}2. state 이름 : {property 이름 : ' '}의 형식으로 state를 정의해줍니다.
import React, { Component } from 'react';
class App extends Component{
constructor(props){
super(props);
this.state = {
head:{title : 'State 사용해보기'}
}
}
}3. 이제 rendering 되는 부분의 코드를 수정하여 state 코드를 호출해주도록 합니다.
render(){
return (
<div className="App">
<Head title = {this.state.head.title}
</Head>
</div>;
);
}
}
export default App;이로써 생성자에서 state를 정의해 보았습니다. 다음 포스팅은 이 state를 관리하는 상태 관리에 대해서 다뤄보겠습니다.
728x90
반응형
'Tech > React' 카테고리의 다른 글
| [React] 고객 추가 양식(form) 구현 및 이벤트 핸들링 (0) | 2021.03.17 |
|---|---|
| [React.js] React.js에서 API 로딩 처리하기 (0) | 2021.03.16 |
| [React] state 사용 2 (0) | 2021.01.12 |
| [React] State 사용 (class 컴포넌트) (0) | 2021.01.07 |
| [React] State (0) | 2021.01.07 |