[React] State 다루기

1. State

• 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.

• props와의 차이점이라면, state는 컴포넌트 내부에 존재하고 있기 때문에, 상태 값 변경이 가능하다는 것이다.(즉, 구현하는 쪽에 중점을 둔다.)

• this.setState() 메소드를 통해서 상태 값을 변경해준다.

• 상위 컴포넌트의 state는 하위 컴포넌트의 props로 전달된다.

 

import React, { Component } from 'react'
import Subject from './components/Subject';
import Content from './components/Content';
import TOC from './components/TOC';

class App extends Component {
  // 초기 this.state를 지정하는 class constructor
  constructor(props) {
    super(props);
    this.state = {
      subject: { title: "WEB", sub: "World Wide Web!" },
      contents: [
        { id: 1, title: 'HTML', desc: 'HTML is for information' },
        { id: 2, title: 'CSS', desc: 'CSS is for design' },
        { id: 3, title: 'JavaScript', desc: 'JavaScript is for interactive' }
      ]
    }
  }

	// this.state를 이용해 state 값 사용
     // 상위 컴포넌트의 state는 하위 컴포넌트의 props로 전달된다.!!!!!!
  render() {
    return (
      <div className="App">
        <Subject title={this.state.subject.title} sub={this.state.subject.sub} />
        <TOC data={this.state.contents} />
        <Content />
      </div>
    );
  }
}


export default App;

 

클래스 컴포넌트는 항상 props로 기본 constructor를 호출해야 한다.

 

- Constructor(생성자) : JS Class 문법

constructor 메소드는 class 로 생성된 객체를 생성하고 초기화하기 위한 특수한 메서드다.  "constructor"라는 이름을 가진 특수한 메서드는 클래스 안에 한 개만 존재할 수 있다. 만약 클래스에 여러 개의 constructor 메서드가 존재하면 SyntaxError 가 발생할 것이다. constructor는 부모 클래스의 constructor를 호출하기 위해 super 키워드를 사용할 수 있다.

 

State 객체를 사용하고 싶다면 컴포넌트를 생성할 때 가장 윗부분(render() 함수보다 먼저)에 constructor() 함수를 적어준다. 컴포넌트 생성자에서 super를 호출하기 전에는 this를 사용할 수 없기 때문이다. 즉, 컴포넌트의 시작 부분에서 constructor()constructor()라는 함수가 컴포넌트의 초기화를 시켜줘야 StateState에 값을 넣어 사용할 수 있는 것이다.

 

 

- super(props)를 써야 하는 이유

자바스크립트에서 supersuper는 부모 클래스 생성자의 참조다. 그리고 자바스크립트는 언어적 제약사항으로서 생성자에서 super를

 

Hooks를 사용한다면 super 나 this에 대해 고민하지 않아도 된다!!!

 

 

2. setState

 

- 컴포넌트에서 state를 직접 바꾸면 안 된다.

this.state를 지정할 수 있는 유일한 공간은 바로 constructor입니다.

// Wrong
this.state.comment = 'Hello';

 

다음과 같이 setState() 함수를 사용해서 state를 변경해야 한다.

// Correct
this.setState({comment: 'Hello'});

 

- State 업데이트는 비동기적일 수도 있다.

 

this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state를 계산할 때 해당 값에 의존해서는 안 된다.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

 

props와 state의 비동기적 업데이트를 고려해 함수를 인자로 사용하는 다른 형태의 setState()를 사용하면 된다. 그 함수는 이전 state를 첫 번째 인자로 받아들일 것이고, 업데이트가 적용된 시점의 props를 두 번째 인자로 받아들일 것이다.

// Correct
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

// Correct
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

 

 

- 독립적으로 state들을 업데이트할 수 있다.

 

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }
  
  // 독립적으로 각각 업데이트
  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }