State 관리 - 클래스형 컴포넌트 (setState)

 

단방향 데이터 흐름의 중요성

- 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다.

- 라이프 사이클과 연관지어 생각해보면, 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어난다.

- 만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각해보자.

- 그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 되면서, 또 다시 자식 컴포넌트가 리렌더링 된다.

- 무한루프에 빠지게 된다.

 

클래스형 컴포넌트에서 state 관리

- setState() 사용

- 아래 네모 예제를 통해 관리하는법을 보자.

 

Count 숫자만큼 네모칸을 화면에 띄우기

1. state에 count라는 변수를 추가하고, count 숫자만큼 네모칸을 화면에 띄우기

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 3, // 숫자넣기!
    };
  }

  componentDidMount() {}

  render() {
    // 배열을 만듭니다.
    // Array.from()은 배열을 만들고 초기화까지 해주는 내장 함수
    // Array.from()의 첫번째 파라미터로 {length: 원하는 길이} 객체를,
    // 두번째 파라미터로 원하는 값을 반환하는 콜백함수를 넘겨준다.
    // array의 내장함수 대부분은 콜백 함수에서 (현재값, index넘버)를 인자로 씁니다.
    // 여기서 v는 아무값(any)의 의미.
    const nemo_count = Array.from({ length: this.state.count }, (v, i) => i);

    // 콘솔로 만들어진 배열을 확인. 숫자가 0부터 순서대로 들어감.
    console.log(nemo_count);

    return (
      <div className="App">
        {nemo_count.map((num, idx) => {
          return (
            <div
            // div의 고유값을 갖게하기 위한 key.
              key={idx}
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "#ddd",
                margin: "10px",
              }}
            >
              nemo
            </div>
          );
        })}
      </div>
    );
  }
}

export default App;

 

2. 더하기, 빼기 버튼을 만들기

   return (
      <div className="App">
        {nemo_count.map((num, idx) => {
          return (
            <div
            // div의 고유값을 갖게하기 위한 key.
              key={idx}
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "#ddd",
                margin: "10px",
              }}
            >
              nemo
            </div>
          );
        })}

        <div>
          <button>하나 추가</button>
          <button>하나 빼기</button>
        </div>
      </div>
    );

 

3. 함수생성

  addNemo = () => {
    // this.setState로 count를 하나 더해준다,
    this.setState({ count: this.state.count + 1 });
  };

  removeNemo = () => {
    // 네모 갯수가 0보다 작을 순 없으니 if문으로 조건을 걸어준다.
    if (this.state.count > 0) {
      // this.setState로 count를 하나 빼준다.
      this.setState({ count: this.state.count - 1 });
    }else{
      window.alert('네모가 없어요!');
    }
  };

 

4. 함수연결

        <div>
          {/* 함수를 호출합니다. 
          이 클래스 안의 addNemo 함수를 불러오기 때문에 this.addNemo로 표기한다.
          addNemo() -> 소괄호는 바로 실행의 의미를 가지기 때문에 소괄호를 사용하지 않는다.
          */}
          <button onClick={this.addNemo}>하나 추가</button>
          <button onClick={this.removeNemo}>하나 빼기</button>
        </div>

 

5. 결과