state 연습 + 코드 상세 해석

스테이트를 관리한다는 것은

한마디로 스테이트를 생성 업데이트 삭제하는 과정이라고 볼 수 있다

 

컴포넌트가 데이터를 어떻게 관리할까?

 

state는 단방향 데이터 관리이다. 

자식이 부모에게 영향을 못끼친다!

 

라이프 사이클에서 리렌더링 업데이트가 되는 경우

1. state 업데이트

2. props 업데이트

3. 부모 컴퍼넌트 재렌더링

4. 강제 업데이트

 

 

클래스형 state 관리

 

클래스형에서 state를 쓸릴 있으면 this.state.(스테이트 요소) 를 앞에다 항상 붙여줘야하며

스테이트를 이용해 배열을 만들어서 변수로 지정해주고 그것을 map으로 돌려서 리턴 값을 네모로 주면

스테이트값을 이용해서 네모 더하기 빼기를 구현 할 수 있다

import React from "react";

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

    this.state = {
      count: 3,
    };
  }

  addNemo = () => {
    //함수도 만들어 보자
    this.setState({
      count: this.state.count + 1, //지금 스테이트 값에서 +1 해준다 함수지정
    }); // 스테이트 값을 바꾸는 법 setState 클래스 형에서 state를 다룰때 앞에 this를 계속 달아줘야하는 것 같다
  };

  removeNemo = () => {
    if (this.state.count == 0) {
      window.alert("네모 없어요!");
    } else {
      this.setState({ count: this.state.count - 1 });
    }
  };

  render() {
    const nemo_count = Array.from({ length: this.state.count }, (v, i) => i); // 카운트를 쓰려면 this.state를 써야하고 어레이 프롬으로 길이가 카운트(3)인 배열을 만든다  (v, i)=>(i)를 써주는 건 배열의 요소가 언디파인이 아닌 0,1,2 같은 순서가 들어가게함 v는 아무거나 써도됨

    return (
      <div className="App">
        {nemo_count.map((num, idx) => {
          // for문이랑 비슷 [0,1,2]인 배열을 num이란 요소로 돌려버리고 idx는 순서값을 나타나게함 idx가 3이니까 대충 3번 돌려준단 말 같다
          return (
            <div
              key={idx}
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "gray", // 네모를 만들어 놓은것을 리턴하게 함 반복문으로 3개의 네모가 생김ㅇ
                margin: "10px",
              }}
            >
              nemo
            </div>
          );
        })}
        {/* 계속 this를 붙여주는 구나...  */}
        <button onClick={this.addNemo}>하나추가</button>
        <button onClick={this.removeNemo}>하나빼기</button>
      </div>
    );
  }
}

export default App;