State
state는 컴포넌트 내부에서 사용하는 값이다.
부모 컴포넌트로 전달받고 값을 바꾸지 못하는 props와는 다르다.
사용방법
리액트는 컴포넌트가 클래스형인지 함수형인지에 따라 사용방법이 다르다.
- 클래스형 컴포넌트가 가지고 있는 state
- 함수형 컴포넌트가 useState라는 함수로 사용하는 state
클래스형 컴포넌트 state
클래스형 컴포넌트에서 state는 constructor에서 초기값을 설정한다.
값을 변경할 때에는 this.setState()를 써서 변경한다.
함수형 컴포넌트 state
함수형 컴포넌트에서는 다음과 같이 선언해야 사용할 수 있다.
import React, { useState } from 'react'함수형 컴포넌트에서는 다음과 같이 초기값을 설정한다.
const [message, setMessage] = useState('초기값');message='초기값'
setMessage는 message의 값을 변경하는 함수이다.
비동기적으로 이루어지는 setState호출
setState 호출 직후 새로운 값이 this.state에 반영되지 않을 수도 있다.
incrementCount() {
this.setState({count: this.state.count + 1});
}
handleSomething() {
// `this.state.count`가 0에서 시작한다고 해봅시다.
this.incrementCount();
this.incrementCount();
this.incrementCount();
}incrementCount() 함수가 this.state.count에서 값을 읽어오는데
React는 컴포넌트가 리렌더링될 때까지 this.state.count를 갱신하지 않기 때문에 매번 this.state.count의 값을 0으로 읽어서 값을 1로 설정한다.
해결방법
incrementCount()함수에 state를 인자로 전달하면 이전 state값에 접근할 수 있다.
componentDidMount()
React의 컴포넌트 클래스에서는 컴포넌트가 마운트되거나 언마운트 될 때 일부 코드를 작동할 수 있다.
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
componentDidMount() { // 컴포넌트가 마운트 되면 호출, tick()함수 호출
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() { // 컴포넌트가 마운트 해제되면 호출
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
ReactDOM.render(
<Clock />,
document.getElementById('root')
);메서드는 다음과 같은 순서로 호출된다.
-
<Clock />가 ReactDOM.render()로 전달되었을 때 React는 Clock 컴포넌트의 constructor를 호출합니다. Clock이 현재 시각을 표시해야 하기 때문에 현재 시각이 포함된 객체로 this.state를 초기화합니다. 나중에 이 state를 업데이트할 것입니다.
-
React는 Clock 컴포넌트의 render() 메서드를 호출합니다. 이를 통해 React는 화면에 표시되어야 할 내용을 알게 됩니다. 그 다음 React는 Clock의 렌더링 출력값을 일치시키기 위해 DOM을 업데이트합니다.
-
Clock 출력값이 DOM에 삽입되면, React는 componentDidMount() 생명주기 메서드를 호출합니다. 그 안에서 Clock 컴포넌트는 매초 컴포넌트의 tick() 메서드를 호출하기 위한 타이머를 설정하도록 브라우저에 요청합니다.
-
매초 브라우저가 tick() 메서드를 호출합니다. 그 안에서 Clock 컴포넌트는 setState()에 현재 시각을 포함하는 객체를 호출하면서 UI 업데이트를 진행합니다. setState() 호출 덕분에 React는 state가 변경된 것을 인지하고 화면에 표시될 내용을 알아내기 위해 render() 메서드를 다시 호출합니다. 이 때 render() 메서드 안의 this.state.date가 달라지고 렌더링 출력값은 업데이트된 시각을 포함합니다. React는 이에 따라 DOM을 업데이트합니다.
-
Clock 컴포넌트가 DOM으로부터 한 번이라도 삭제된 적이 있다면 React는 타이머를 멈추기 위해 componentWillUnmount() 생명주기 메서드를 호출합니다.
