State 관리

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

자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각해보자
그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 되겠죠
그럼 또 자식 컴포넌트가 리렌더링이 됩니다.

함수형

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;

버킷추가 하기

setState({ list: [...this.state.list, new_item] });

리스트에 더 추가하고자 할때 ... 전개연산자로 풀어주고 뒤에 추가할꺼 붙이고 다시 닫아준다.

데이터 수정하기

데이터는 변수에 값을 저장 한것이 아니라
변수에 그 값을 담은 장소의 주소를 주는것이다.
그래서 변수를 복사할때
let newa= b라고하면 주소를 그대로 복사하는것이다.
let newa = [...b]
이런식으로 deep카피가 이루워져야한다.