[React.js] State

🤷 State 란? 

Dynamic Information은 변화하는 정보를 의미한다. 이러한 Dynamic Information을 React는 실시간으로 렌더링 해야한다.

여기에 쓰이는 두가지 방법이 바로 'Props' 와 'State' 인 것이다. (이외의 컴포넌트 값들은 고정되어있음)

 

Props가 상위 컴포넌트에서 하위 컴포넌트로 보내주는 값이라면,

State는 컴포넌트 자기 자신이 가지고 있는 값으로, 변화가 필요할 경우 setState()함수를 통해 값을 변경해줄 수 있다.

 

 

출처: studyingych 님의 tistory 블로그

 

Props	State
읽기 전용(read-only)	비동기 가능
수정 불가	this.setState() 수정 가능
상위에서 하위로 props 전달	하위에서 상위로 event를 통해 전달
모두 Object이며 화면에 보여줄 정보(상태)를 가지고 있음
Props, State 값이 바뀌면 render()가 자동으로 호출됨

---

📒 State 선언 및 접근

 

- 선언 : 외부 컴포넌트에서 결정된 props와 달리, state는 컴포넌트 자체에서 선언하면 된다.

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor(props) {
    super(props);					//this.props
    this.state = { title: 'Best App' }			//state 초기화
  }
	
  render() {
    return (
      <h1>
        Wow this entire app is just an h1.
      </h1>
    );
  }
}

클래스필드 문법을 사용하면 state = {} 한줄로 가능하나, ES6만 사용한다면 위처럼 state를 선언해야 한다.

 

먼저, 클래스의 state를 포함할 생성자 함수(constructor())를 만들어준다.

여기서, super(props)는 React.Component를 가리킨다. (자바스크립트에서는 부모 클래스 생성자)

super() 호출 전에 this 사용이 불가한데, 이는 우리가 새로운 생성자를 만들면서 기존 React.Component 생성자를 덮어썼기 때문이다. 그렇기 때문에, super(props)로 this를 초기화해줘야 밑에 this.state 구문이 정상적으로 작동되는 것이다.

또한, this.props에 정확히 접근하기 위해 반드시 super() 안에 props를 넣어줘야 한다.

마지막으로, this.state로 초기화를 하면 된다.

 

 

- 접근(표현) : props와 유사하게 객체 형태로 접근하면 된다.

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
	// constructor method begins here:
  constructor(props) {
    super(props);
    this.state = { title: 'Best App' }
  }
	
  render() {
    return (
      <h1>
        {this.state.title}			// title 이라는 state를 표현함
      </h1>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

---

📒 this.setState({state}, [callback]) : state 업데이트

state 변경을 위해 반드시 거쳐가야 하는 함수. React에선 setState가 호출되면 컴포넌트가 리렌더링 되도록 설계됨.

두 번째 인자인 callback 함수가 있는 경우, 해당 함수를 진행하고 나서 리랜더링이 진행된다.

this.state = {
  menu: 'chicken',
  hungry: 'true'
}

this.setState({hungry: 'false'})

// result
this.state = {
  menu: 'chicken',
  hungry: 'false'
}

 

특히, setState는 객체의 깊숙한 부분까지 확인이 불가하다. 아래처럼 찾는 것이 아니라 값 자체가 바뀌어버린다.

  state = {
    number: 0,
    foo: {
      bar: 0,
      foobar: 1
    }
  }
  
  this.setState({
    foo: {
      foobar: 2
    }
  })
  
  // result
    state = {
    number: 0,
    foo: {
      // bar is deleted!
      foobar: 2
    }
  }

this.setState({
  number: 0,
  foo: {
    ...this.state.foo,			// 전개연산자 사용하여 해결 가능
    foobar: 2
  }
});

 

- 함수에서 this.setState() 부르기

import React from 'react';
import ReactDOM from 'react-dom';

const green = '#39D1B4';
const yellow = '#FFD712';

class Toggle extends React.Component {
  // state 생성자 메소드(함수)
  constructor(props) {
    super(props);
    this.state = { color: green }
    this.changeColor = this.changeColor.bind(this);		// 메소드와 생성자의 this를 연결!
  }

  // 색을 바꾸는 메소드
  changeColor() {
    const newColor = this.state.color == green ? yellow : green;
    this.setState({ color: newColor });
  }

  // 렌더링 메소드(state를 배경색으로, button Event Listener에 changeColor())
  render() {
    return (
      <div style={{background: this.state.color}}>
        <h1>
          Change my color
        </h1>
        <button onClick={this.changeColor}>
          Change color
        </button>
      </div>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('app')
)

 

기본적으로, this.setState() 동작을 하는 메소드를 추가하였다. (changeColor())

다만, Event Listener에 이 메소드가 적용되면 this값이 변하기 때문에 생성자와 .bind(this) 바인딩 해주는 것이다.

 

- this.setState()의 자동 렌더링(automatically calls render)

 

위 코드를 예로 들면, changeColor() 적용만 한 뒤 창을 새로 키면 배경색이 바뀌는 것을 볼 수 있다.

이는, this.setState()가 state 변경을 완료한 뒤, 자동으로 render()를 실행하기 때문이다.

따라서, render() 함수안에 this.setState()를 적용할 경우 무한 루프가 생기기 때문에 별도 메소드에 적용하는 것이다.

---

state를 본격적으로 배우게 되면서, this의 이해도가 필요함을 느꼈다.

이벤트리스너에서 this가 아마 이벤트 관련요소로 지정되기 때문에 생성자 함수와의 바인딩이 필수라고 생각된다.

또한, class 내 생성자 함수와 super() 사용이유 등, class 문법관련해서는 추가하거나 따로 포스팅을 해야겠다.