[React 리액트] setState() - state 값 동적 변경

리액트 - setState() 함수 이해하기

 

setState 개념

리액트에서 props나 state 값이 변경이 되면 해당 컴포넌트의 render() 함수가 다시 호출되며 해당 render() 함수에 속해있는 다른 컴포넌트들도 다시 렌더링되면서 화면이 다시 그려지게 됩니다.

 

컴포넌트가 생성된 후 state 값을 바꾸는 방법은 setState 함수를 사용합니다.

this.state.mode = 'welcome' // 리액트가 state 값이 바뀌었다는 것을 인식하지 못함 -> 렌더링 안됨

this.setState({
    mode:'welcome' // state값이 바뀌었다는 것을 인식학고 render가 호출됨 -> 렌더링되면서 화면이 다시 그려짐
})

주의할 점

render함수 안에서 this는 컴포넌트 자체를 가르키지만 이벤트 (onClick)함수 안에서 this는 아무것도 가르키지 않기 때문에 onClick함수를 bind 함수를 사용하여 this를 바인딩 해주어야 합니다. 

onChange = (e) => {}  화살표 함수를 사용하면 bind하지 않아도 가능합니다. (화살표 함수에서 this는 상위 태그를 가리키기 때문)

 

---

 

setState 실습

 

App.js - constructor 함수 부분

constructor(props){
    super(props);
    this.state ={
      mode:'read',
      subject:{title:'WEB', sub:"World Wide Web!"},
      welcome:{title:'Welcome', desc:'Hello, React!!'},
      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"}
      ]
    }
  }

컴포넌트가 생성될 때 최초로 가장 먼저 실행되는 constructor 함수 에서는 이런식으로 수정하면되지만

이미 컴포넌트가 생성 이후에 동적으로 state값을 바꿀 때에는 이렇게 바꾸면 안됩니다. 

 

리액트 입장에서는 저런식으로 값을 바꿔버리면 리액트가 state값이 바뀌었는지 인식하지 못하기 때문에 렌더링을 할 수가 없습니다.

 

this.state.mode = 'abc' - 이런식으로 변경 X, setState() 함수 사용 O

 

 

App.js - render() 부분 (setState 사용)

render(){
    console.log('App render');
    var _title, _desc = null;
    if(this.state.mode === 'welcome'){
      _title = this.state.welcome.title;
      _desc = this.state.welcome.desc;
    }else if(this.state.mode === 'read'){
      _title = this.state.contents[0].title;
      _desc = this.state.contents[0].desc;
    }

    return (
      <div className="App">
          <Subject 
            title={this.state.subject.title} 
            sub={this.state.subject.sub}>
          </Subject>
          <header>
            <h1><a href="/" onClick={function(e){
              e.preventDefault();
              // this.state.mode = 'welcome'; // 이렇게 사용하면 리액트에서 인식하지 못함
              this.setState({ // 이와 같이 사용
                mode:'welcome'
              })
            }.bind(this)}>{this.state.subject.title}</a></h1>
            {this.state.subject.sub}
          </header>
          <TOC data={this.state.contents}></TOC>
          <Content title={_title} desc={_desc}></Content>
      </div>
    );
  }

 

위처럼 this.setState() 라는 함수에 변경하고 싶은 값을 객체 형태로 주어 state값을 변경하면 리액트가 인식하고 render() 함수를 호출하여 화면을 다시 그리게 됩니다.

 

 

모두 리액트 공부 화이팅  ! ( ' ^ ' ) !

 

 

 

리액트 글 모두 보러 가기

devmoony.tistory.com/category/Web/React%20%EB%A6%AC%EC%95%A1%ED%8A%B8

'Web/React 리액트' 카테고리의 글 목록