[리액트(React) Study Log] [Person App-010] Manipulating the State

[리액트(React) Study Log] [Person App-010] Manipulating the State

 

1. state 조작

 - extending Component 는 setState method 를 제공함.

(setState 는 기존 state 를 새 상태 값과 merge 함. state 교체가 아니기 때문에 setState 에서 지정한 key 에 해당하는 상태값만 변경되고 지정하지 않은 otherState(아래 코드에서) 의 값은 기존 값으로 유지됨.)

 - react 에서 state 가 변경되었을 때 react 가 state 변경을 자동으로 인식해서 re-rendering 을 발생시키는데, this.setState 구문을 사용(immutable 한 방법 : 이전 상태 값을 유지하면서 새로운 상태 값으로 변경)해야 react가 state 의 변경을 인식할 수 있음.

 - react 에서 state 변경시는 immutable 하게 조작해야함. this.setState 는 immutability 를 유지하지만 아래 형태 처럼 변수 값을 직접 지정하는 방식으로 state 값을 지정하면 immutability 가 깨지기 때문에 절대 안 됨. (이렇게 하면 상태가 변경되어도 변경된 상태 값이 브라우져에 반영되지 않음.) setState 를 사용하지 않는 immutable 한 state 조작법에 대해서는 뒤에 다시 설명.

this.state.persons[0].name = 'David';

 

2. setState 를 이용하여 switchNameHandler 함수 정의

switchNameHandler = () => {

    // console.log('Was clicked!');

    // Do Not Use : this.state.persons[0].name = 'David';

    this.setState({

      persons: [

        { name: 'David', age: 25 },

        { name: 'Lina', age: 25 },

        { name: 'Nick', age: 25 }

      ]

    })

  }

 

3. 브라우져에서 버튼을 클릭해서 state 변경 확인.

 - 최초 화면

 - 버튼 클릭 후 화면