[REACT] 함수형 컴포넌트에서 state관리 - useState()

<결과>

 

 

 

함수형 컴포넌트에서 state관리 - useState()

함수형 컴포넌트는 state가 없다고 말씀드렸었죠?

맞아요. 함수형 컴포넌트는 state가 없지만 react hooks를 사용하면 state를 가질 수 있습니다!

 

 

순서

 

 

---

(1) Nemo 컴포넌트 만들기

클래스형에서는 App.js에서 직접 만들었지만

네모라는 컴포넌트를 따로 만들어서 App.js에서 불러온다.

 

 

 

(2) App에서 <Nemo/>불러오기

import를 해주고 원하는 render에서 리턴할때 네모를 불러온다.

 

 

 

(3) useState()로 count를 state로 등록하자

 

 

(4) 뷰를 만든다. (반환할 리액트 요소)

 

 

(5) 함수를 만들고 버튼에 연결한다.

 

 

 

---

 

 

 

 

 

 

App.js

import React from "react";
import Nemo from "./Nemo";
class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      
    };
  }

  componentDidMount() {}


  render() {
  

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

export default App;

Nemo.js

 

import React from "react";

const Nemo = (props) => {
  // count에는 state 값이, setCount는 count라는 state 값을 수정하는 함수가 될거예요.
  // useState(초기값): () 안에 초기값을 넣어줍니다.
  const [count, setCount] = React.useState(3);

  const addNemo = () => {
    // setCount를 통해 count에 저장된 값을 + 1 해줍니다.
    setCount(count + 1);
  };

  const removeNemo = () => {
    // setCount를 통해 count에 저장된 값을 - 1 해줍니다.
    // 이번엔 if문 대신 삼항 연산자로 해볼거예요!
    setCount(count > 0 ? count - 1 : 0);
  };

  const nemo_count = Array.from({ length: count }, (v, i) => i);
  // 반환할 리액트 요소가 없을 때는 null을 넘겨주세요!
  return (
    <div className="App">
      {nemo_count.map((num, idx) => {
        return (
          <div
            key={idx}
            style={{
              width: "150px",
              height: "150px",
              backgroundColor: "#ddd",
              margin: "10px",
            }}
          >
            nemo
          </div>
        );
      })}

      <div>
        {/* 함수를 호출합니다. */}
        <button onClick={addNemo}>하나 추가</button>
        <button onClick={removeNemo}>하나 빼기</button>
      </div>
    </div>
  );
};

export default Nemo;