스파르타코딩클럽 - 항해99/항해99 Chapter3 - react 주특기 기본

Chapter3 - State 관리

Ming 2021. 11. 17. 21:05

단방향 데이터 흐름이란?

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

 

왜 단방향으로 써야하지?

라이프 사이클과 함께 생각해보면 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어난다. 만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각하고, 그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 될것이다. 그리고 또 자식 컴포넌트가 리렌더링 되며 반복될 것이다. 

 

 

네모 만들기

 

클래스형 컴포넌트

App.js 

import React from "react";

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

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

  componentDidMount(){

  };

  addNemo = () => {
    this.setState({count: this.state.count + 1});
  }

  removeNemo = () => {

    if (this.state.count > 0){  //if문으로 마이너스까진 가지 않도록 작성
      this.setState({count: this.state.count -1});
    } else {
      window.alert("네모가 없어요!")
    }
  }



  render(){
    const nemo_count = Array.from({ length: this.state.count }, (v, i) => 1);
   console.log(this.state)
    return (
      <div className="App">
        {nemo_count.map((n, i) => {
          return (
            <div
            key={i} //key 값을 정해놓으면 콘솔창에 오류가 나지 않는다.
            style={{
              width: "150px",
              height: "150px",
              backgroundColor: "#ddd",
              margin: "10px",
            }}>
              nemo
            </div>
          )
        })}

        <div>
          <button onClick={this.addNemo}>하나 추가</button> {/*또는 onClick={() => {this.addNemo();}}로 쓸수 있다.*/}
          <button onClick={this.removeNemo}>하나 빼기</button>
        </div>
      </div>
    );
  }
}

export default App;

 

 

함수형 컴포넌트

 

App.js

import React from "react";
import Nemo from "./Nemo";

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

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

  componentDidMount(){

  };


  render(){
 
    return (
      <div className="App">
        <Nemo />
      </div>
    );
  }
}

export default App;

Nemo.js

import React from "react";

const Nemo = (props) => {
  const [count, setCount] = React.useState(3);
console.log(count)
  const nemo_count = Array.from({ length: count }, (v, i) => i);

  const addNemo = () => {
    setCount(count + 1);
  }

  const removeNemo = () => {
    if (count > 0){
      setCount(count - 1);
    } else {
      window.alert("네모가 없어요!")
    }
  }
  return (
    <> {/*오류를 없애주기 위해서 빈 태그로 감싸줌 */}
    {nemo_count.map((n, i) => {
      return (
        <div
        key={i} //key 값을 정해놓으면 콘솔창에 오류가 나지 않는다.
        style={{
          width: "150px",
          height: "150px",
          backgroundColor: "#ddd",
          margin: "10px",
        }}>
          nemo
        </div>
      )
    })}

    <div>
      <button onClick={addNemo}>하나 추가</button> {/*또는 onClick={() => {this.addNemo();}}로 쓸수 있다.*/}
      <button onClick={removeNemo}>하나 빼기</button>
    </div>
    </>
  )
}

export default Nemo;

 

결과물은 같다!