[project_nemo] 클래스형 컴포넌트 state 관리

단방향 데이터 흐름

부모만 자식을 변경한다.

 

클래스형 컴포넌트에서 state관리 - setState()

 

참고

클래스형 컴포넌트 틀

import React from 'react';

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

  this.state = {};
  }


render() {
  return (
    <div className="App">

    </div>
  );
}
}

 

state 지정 후 뷰 만들기

import React from 'react';

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

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


render(){
  return (
    <div className="App">
        {/* count:3으로 state지정 후 뷰 만들기 */}
        <div style={{
          width: '150px',
          height:'150px',
          backgroundColor: '#eee',
          margin: '10px'
        }}>
          nemo
        </div>
    </div>
  );
}
}
export default App;

이제 state의 숫자만큼 map돌리기

참고: map은 array의 내장함수

지금 count:3으로 그냥 숫자임 이럴땐 어떤수의 길이만큼 배열을 반환해주는 배열의 내장함수 사용

이렇게까지하면 콘솔에 undefined가 뜨기때문에 정상적인 값을 넣어준다.

const nemo_count = Array.from({length: this.state.count}, (v, i) => (i));
// 배열의 순서를 값으로 줌
// v = 아무 값, i = index = 순서
  console.log(nemo_count);

map 돌려준다.

import React from "react";

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

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

  render() {
    // 어떤수의 길이만큼 배열을 반환해주는 배열의 내장함수 사용
    const nemo_count = Array.from({ length: this.state.count }, (v, i) => i);
    console.log(nemo_count);
    return (
      <div className="App">
        {/* count:3으로 state지정 후 뷰 만들기 */}
        {nemo_count.map((num, idx) => {
          return (
            // 리액트 요소 반환
            <div
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "#eee",
                margin: "10px",
              }}
            >
              nemo
            </div>
          );
        })}
      </div>
    );
  }
}
export default App;

콘솔창에 뜨는 warning은 유니크 값을 가진 key라는 props가 필요하단 말

-> map을 만든 div를 구분 가능하게 해달라

버튼도 추가해준다.

이제 함수를 만든다.

이제 연결해준다.

자바스크립트에서처럼 this.addNemo() 소괄호를 넣어주면 즉시 실행이란 뜻으로 렌더링 후 즉시 실행되어버린다.(버튼을 누르지않아도)

 

하나빼기 버튼 누르니 삭제된 네모!

이제 더 이상 삭제할 네모가 없을때 alert를 띄워주자

클래스형 컴포넌트 state관리

app.js 전체코드

import React from "react";

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

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

  addNemo = () => {
    // 스테이트 고치기(중괄호 안에 수정하고싶은 state값 넣어줌)
    this.setState({count: this.state.count + 1});
    // 지금있는 state값에서 +1
  }

  removeNemo = () => {
    if(this.state.count > 0){
      this.setState({ count: this.state.count - 1 });
    } else {
      window.alert('더이상 네모가 없습니다!');
    }
    this.setState({count: this.state.count - 1});
  }

  render() {
    // 어떤수의 길이만큼 배열을 반환해주는 배열의 내장함수 사용
    const nemo_count = Array.from({ length: this.state.count }, (v, i) => i);
    console.log(nemo_count);
    return (
      <div className="App">
        {/* count:3으로 state지정 후 뷰 만들기 */}
        {nemo_count.map((num, idx) => {
          return (
            // 리액트 요소 반환
            <div
              key = {idx}
              style={{
                width: "150px",
                height: "150px",
                backgroundColor: "#eee",
                margin: "10px",
              }}
            >
              nemo
            </div>
          );
        })}
        <button onClick={this.addNemo}>
          하나 추가
        </button>
        <button onClick={this.removeNemo}>
          하나 빼기
        </button>
      </div>
    );
  }
}
export default App;