[리액트] state는 직접 수정 금지

state는 직접 수정하면 안된다.

• Why?
  • 예기치 못한 버그 발생 가능 (무슨 버그인지는 구글링을 해보자!)

 

•  그럼 state 수정 어떻게 하나요?
  • 배열을 복사하면 됩니다!🤗
    
    • 배열 복사는 []와 spread operator를 기억하자 => 예를 들어, [...상품] 
      • ...(spread operator)으로 원래 있던 데이터의 대괄호를 벗기고, []로 다시 감싸준다.  
    • 아니면 map이나 filter를 사용해도 된다.
      • 이 아이들도 새로운 배열을 반환해주기 때문에!

 

예를 들어 data.js 파일에서 채소 데이터 3개를 가져오고,

더보기 버튼을 눌렸을 때 ajax로 다른 채소 3개를 가져온다고 하자!

import Product from "./Product";
import Data from "./data.js";

function App() {
	let [채소, 채소변경] = useState(Data);
    
    //...기타 내용
    //...
    <div className="container">
              <div className="row">
                {채소.map((data, idx) => (
                  <Product
                    src={`https://~@(*^#(#($$#idx + 1}.jpg`} //예시를 위한 임의 주소 설정
                    title={data.title}
                    content={data.content}
                    price={data.price}
                    key={idx}
                  ></Product>
                ))}
              </div>
            </div>
            <button
              className="btn btn-primary"
              onClick={() => {
                axios
                  .get("https://@@#$%%%.json") //예시를 위한 임의 주소 설정
                  .then((result) => {
                    채소변경([...채소, ...result.data]);
                  })
                  .catch(() => {
                    console.log("채소가 없는 것 같네요..🥗");
                  });
              }}
            >
              더보기
            </button>
          </div>
}

 <Product~~~></Product>에는 map으로 채소를 복사하여 새로운 배열을 생성했고,

더보기 버튼을 누르면 ajax 요청으로 데이터를 가져온다. 그리고 가져온 데이터를 채소라는 state에 추가한다.