State 관리 - 함수형 컴포턴트 (useState, React Hooks)

React Hooks

- 함수형 컴포넌트는 state가 없지만 react hooks를 사용하면 state를 가질 수 있다.

 

1. Nemo.js 생성

import React from "react";

const Nemo = (props) => {

    // 반환할 리액트 요소가 없을 때는 null을 넘겨준다.
    // 처음 껍데기 잡으실때도 null을 사용
    return null;
}

export default Nemo;

 

2. App에서 Nemo.js 불러오기

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


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

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

export default App;

 

3. useState()로 count를 state로 등록

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

 

4. 뷰를 생성 (반환할 리액트 요소 생성)

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>하나 추가</button>
        <button>하나 빼기</button>
      </div>
    </div>
  );

 

 5. 함수생성 및 연결

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

  const removeNemo = () => {
    // setCount를 통해 count에 저장된 값을 - 1 해줍니다.
    // 삼항 연산자
    setCount(count > 0 ? count - 1 : 0);
  };

<div>
        <button onClick={addNemo}>하나 추가</button>
        <button onClick={removeNemo}>하나 빼기</button>
      </div>

 

6. 완성

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 해줍니다.
    // 삼항 연산자
    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;