컴포넌트(3) - 상태 관리

컴포넌트 상태 관리

• 프로퍼티의 특징 중 하나는 컴포넌트 내부에서 값을 바꿀 수 없음
• 이 때, 값을 바꿔야 하는 경우 상태(state)를 사용함

 

• state로 상태 관리
  • state는 값을 저장하거나 변경할 수 있는 객체
  • 보통 버튼을 클릭하거나 값을 입력하는 등의 이벤트와 함께 사용됨
• state로 상태 관리 예시 (/src/ex/State) :

  import React from 'react';
  
  class State extends React.Component {
      constructor(props) {
          super(props);
          
          this.state = {  // ⓐ
              loading: true,
              formData: 'nothing'
          };
          
          this.handle = this.handle.bind(this);  // ⓑ
          
          setTimeout(this.handle, 3000);  // ⓒ
      }
      
      handle() {
          const data = 'new';
          const { formData } = this.state;  // ⓓ
          
          this.setState({  // ⓔ
              loading: false,
              formData: data + formData
          });
          
          console.log('loading값', this.state.loading);
      }
      
      render() {
          return (
              <div>
                  <span>로딩중: {String(this.state.loading)}</span>
                  <span>결과: {this.state.formData}</span>
              </div>
          );
      }
  }
  
  export default State;

  └ ⓐ : 변수 state 초기값을 this.state에 객체 형태로 정의했음
  └ ⓑ : 함수로 넘어갈 this는 반드시 생성자에서 bind() 함수로 묶어주어야 함
  └ ⓒ : setTimeout() 함수를 사용하여 3초 후 handle() 함수를 호출함
  └ ⓓ : this.state를 사용하여 state값에 접근함
  └ ⓔ : this.setState()를 사용하여 state값을 변경함

 

• App 컴포넌트 수정 (src/App.js) :

  import React from 'react';
  import State from './ex/State';
  
  class App extends React.Component {
      render() {
          return (
              <div>
                  <State />
              </div>
          );
      }
  }
  
  export default App;

• 결과 :

• 3초후 결과 :

 

• state를 사용할 때 주의할 점
  • 생성자에서 반드시 초기화 해야함
    • 초기화를 하지 않으면 내부 함수에서 state값에 접근할 수 없음
    • 마땅한 초기값이 없으면 state에 빈 객체라도 넣어야 함
  • state 값을 변경할 때는 setState() 함수를 반드시 사용해야 함
    • render() 함수로 화면을 그려주는 시점은 리액트 엔진이 정하기 때문에 state 값을 직접 변경하면 안됨
    • 따라서, state 값을 직접 변경해도 render() 함수는 새로 호출되지 않음
    • 하지만, setState() 함수를 이용하여 state 값을 변경하면 리액트 엔진이 자동으로 render() 함수를 호출함
    • setState() 함수의 인자로 함수를 전달하면 이전 state 값을 따로 읽는 과정을 생략함
  • setState() 함수는 비동기로 처리되며, setState() 코드 이후로 연결된 함수들의 실행이 완료된 시점에 화면 동기화 과정을 거침

 

• setState() 함수의 인자를 사용하여 state 값을 변경한 예시 :

  // 일반 함수 사용
  handle(data) {
      this.setState(function(previousState) {
          const newState = {
              loading: false,
              formData: data + previousState.formData
          };
          return newState;
      });
  }
  
  // 화살표 함수 사용
  handle2(data) {
      this.setState(prevState => ({
          loading: false,
          formData: data + prevState.formData
      });
  }​

  
  
  

---

• 클래스 인스턴스 변수와 forceUpdate() 함수로 state 관리
  • 출력 검증 작업 없이 함수가 호출될 때마다 새롭게 화면을 출력할 때 사용
  • forceUpdate() 함수는 클래스 인스턴스 변수와 화면을 강제로 출력해주는 함수
  • 이 방법은 리액트 성능에 제약이 있기 때문에 매번 새롭게 화면을 출력해야 되는 경우를 제외하고는 사용하지 않는 것이 좋음

 

• forceUpdate() 함수 사용 예시 (/src/ex/ForceUpdate.jsx) :

  import React from 'react';
  
  class ForceUpdate extends React.Component {
      constructor(props) {
          super(props);
          
          this.loading = true;  // ⓐ
          this.data = 'nothing';  // ⓐ
          
          this.handle = this.handle.bind(this);
          
          setTimeout(this.handle, 3000);
      }
      
      handle() {
          const data = 'new';
          
          this.loading = false;  // ⓑ
          this.data = data + this.data;  // ⓑ
          this.forceUpdate();  // ⓒ
      }
      
      render() {
          return (
              <div>
                  <span>로딩중 : {String(this.loading)}</span>
                  <span>결과 : {this.data}</span>
              </div>
          );
      }
  }
  
  export default ForceUpdate;​

  └ ⓐ : 클래스 변수로 초기값을 정의함
  └ ⓑ : 내부 state를 변경함
  └ ⓒ : 컴포넌트 내장 함수인 forceUpdate()를 호출하여 강제로 화면을 새로고침함

 

• App 컴포넌트 수정 (/src/App.js) :

  import React from 'react';
  import ForceUpdate from './ex/ForceUpdate';
  
  class App extends React.Component {
      render() {
          return (
              <div>
                  <ForceUpdate />
              </div>
          );
      }
  }
  
  export default App;​

• 결과 :

• 3초후 결과 :