state 관리 함수형 컴퍼넌트

useState()를 사용한다!

 

함수형 컴포넌트를 하나 만든다 >> export

App.js에서 import

 

근데 개인적으로 왜 배열을 for문 같이 돌려주냐를 생각해봤다

 

const nemo_count = Array.from({ length: count }, (v, i) => i);

이렇게 카운트의 숫자를 배열길이로 가진 배열을 하나 만들고

 

아래 처럼 맵을 사용해서 for 반복문 처럼 돌린다// 즉 유기적으로 count 스테이트 값을 이용해 반응형? 으로 만들기 위함 이라고 생각한다

{nemo_count.map((q, idx) => {

        // for문이랑 비슷 [0,1,2]인 배열을 num이란 요소로 돌려버리고 idx는 순서값을 나타나게함 idx가 3이니까 대충 3번 돌려준단 말 같다

        return (

          <div

            key={idx}

            style={{

              width: "150px",

              height: "150px",

              backgroundColor: "gray", // 네모를 만들어 놓은것을 리턴하게 함 반복문으로 3개의 네모가 생김ㅇ

              margin: "10px",

            }}

 

컴포넌트 만들고 > 뷰만들고 > 액션이 들어간 함수 만들고 > 연결해주고

import React from "react";

const Nemo = (props) => {
  const nemo_count = Array.from({ length: count }, (v, i) => i);
  const [count, setCount] = React.useState(3); //함수형에선 이렇게 스테이트 관리 ()안에 들어갈 값은 초기값이 된다
  // [스테이트로 쓸 변수명, count라는 값을 바꿔줄 함수]

  const addNemo = () => {
    //함수형에선 const를 써줘야한다
    setCount(count + 1); // setState 이용해 간결하게 표현가능
  };

  const removeNemo = () => {
    setCount(count > 0 ? count - 1 : 0);
  };

  console.log("in nemo");
  console.log(count); // this.state 안써줘도 된다
  return (
    <div className="App">
      {nemo_count.map((q, 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={addNemo}>하나추가</button>
      <button onClick={removeNemo}>하나빼기</button>
      {/* this.state 안써줘도 됨 */}
    </div>
  );
};

export default Nemo;