[React] state란?

   

 

state 개념       

state는 함수 내에 선언된 변수처럼 컴포넌트의 렌더링 결과물에 영향을 주는, 데이터를 갖고 있는 객체입니다.

 

아래의 코드를 통하여 state가 어떤식으로 코드에서 사용되는지 알아보도록 하겠습니다.

class Welcome extends React.Component {
    constructor(props) {
        super(props);
        this.state = {name: 'mindragon'}; // 2. 직접 state를 세팅
    }

    render() {
        return(
            <h1>Hello, {this.state.name}</h1> // 3. state의 name 값 호출하며 렌더
        );
    }
}

ReactDOM.render(
    <Welcome />,  // 1. Welcome 컴포넌트 호출 
    document.getElementById('root') // 4. id가 'root'인 Element에 렌더
);

// 실행 결과
hello, mindragon

 

위의 코드를 분석한 결과는 아래와 같습니다.

1. <Welcome />가 ReactDOM.render()로 전달되었을 때 React는 Welcome 컴포넌트의 constructor를 호출합니다. 

2. Welcome이 이름이 포함된 객체로 this.state를 초기화합니다. 

3. React는 Welcome 컴포넌트의 render() 메서드를 호출합니다. 이를 통해 React는 화면에 표시되어야 할 내용을 알게 됩니다.

4. Welcome의 렌더링을 위해 DOM을 업데이트합니다.

 

---

state의 값 바꾸는 방법

위에서 보셨다시피 state는 change가능하고, component에서 처음 세팅을 해야만 사용할 수 있습니다. 그렇다면 값은 어떻게 바꿀까요?

 

1. 먼저, 아래처럼 state에 직접적으로 값을 설정하면 안됩니다.

this.state.name = 'bigmin' // 잘못된 방법

 

2. 반드시 setState()함수를 이용하여 state의 값을 바꾸어야 합니다. 

setState 함수는 비동기적이고 여러개의 setState가 실질적으로 한 번만 수행 됩니다.

즉, setState() 함수를 사용할 때는 prevState에 세팅하는 것이 가장 좋습니다. 

이 함수는 컴포넌트의 state 객체에 대한 업데이트를 실행합니다. state가 변경되면, 컴포넌트는 다시 렌더링됩니다.

// Bad
// 이 방법이 안좋은 이유는? -> setState가 비동기적이기 때문에
this.setState(() => ({  
	name: 'bigmin' // state의 값을 바꾸어준다.
}))

// Good
this.setState((prevState, props) => ({  
	name: prevState.name = 'bigmin' // prevState의 값을 바꾸어준다.
}))

 

 

References

react.org

lucybain.com/blog

github.com/uberVU