array, object state 변경하는 법(블로그 만들기)

state 변경함수 동작원리 

 

state 변경함수를 쓸 때

기존state === 신규state 이렇게 먼저 검사해봅니다.

 

 

array/object 동작원리 

 

1. 자바스크립트는 array/object 자료를 하나 만들면

예를 들어서 let arr = [1,2,3] 이렇게 만들면 

[1,2,3] 자료는 램이라는 가상공간에 몰래 저장이 되고

let arr 변수엔 그 자료가 어디있는지 가리키는 화살표만 담겨있습니다.

array, object 자료 다룰 때는 원본 데이터를 직접 조작하는 것 보다는

기존값은 보존해주는 식으로 코드짜는게 좋은관습입니다. 

(왜냐면 원본 막 바꿔버렸을 때 갑자기 원본이 필요해질 수도 있기 때문입니다 : )

 

 

정리

리액트에서 array/object state를 수정하고 싶으면

독립적인 카피본을 만들어서 수정하는게 좋습니다. 

[...기존state] 

{...기존state} 

이렇게 하면 독립적인 카피가 하나 생성됩니다.

 

 

---

그럼 코드로 정리하기에 들어가 보도록 하죠~~

혼자 분석해보고 모르겠으면 내려가 주세요 !

/*eslint-disable*/ 

import { useState } from "react";

function App() {
  let post = "강남 우동 맛집";
  let [글제목, 글제목변경] = useState([
    "남자 코트 추천",
    "강남 우동 맛집",
    "파이썬 독학",
  ]);
  let [따봉, 따봉변경] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>

      <button
        onClick={() => {
          let s = [...글제목];
          s.sort();
          글제목변경(s);
        }}
      >
        가나다순정렬
      </button>

      <button
        onClick={() => {
          let copy = [...글제목];
          copy[0] = "여자 코트 추천";
          글제목변경(copy);
        }}
      >
        글수정
      </button>

      <div className="list">
        <h4>
          {글제목[0]}
          <span
            onClick={() => {
              따봉변경(따봉 + 1);
            }}
          >
            😋
          </span>{" "}
          {따봉}
        </h4>
        <p>2월 17일 발행</p>
      </div>

      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

 

/*eslint-disable*/  
//이건 경고까지는 아니고 주의하라는 터미널에 나오는 문구를 없애주는 작업입니다.

import { useState } from "react"; 
// react에서 가지고 있는 useState를 불러옵니다.

function App() {
  let post = "강남 우동 맛집";
  //이건 보시는 그대로 post에다가 "강남 우동 맛집"을 넣어줍니다.
  
  let [글제목, 글제목변경] = useState([
    "남자 코트 추천",
    "강남 우동 맛집",
    "파이썬 독학",
  ]);
  //초기값에 array안에 3개를 넣어주었습니다.
  
  let [따봉, 따봉변경] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>

      <button
        onClick={() => {
          let s = [...글제목];
          s.sort();
          글제목변경(s);
        }}
      >
      // 버튼에 onclick 이벤트를 넣어서 sort 함수로 가나다순 정렬되도록 만들어 두었습니다.
      
        가나다순정렬
      </button>

      <button
        onClick={() => {
          let copy = [...글제목];
          copy[0] = "여자 코트 추천";
          글제목변경(copy);
        }}
      >
      // 다시 onClick이벤트인데 이번에는 copy안에 원본 배열중에 0번째 "남자 코트 추천"을 
      "여자 코트 추천"으로 변경하도록하고 글제목 변경에다가 변경사항을 넣어줍니다.
      
        글수정
      </button>

      <div className="list">
        <h4>
          {글제목[0]}
          <span
            onClick={() => {
              따봉변경(따봉 + 1);
            }}
          >
            😋
          </span>{" "}
          {따봉}
        </h4>
        //이제는 잊지 않을거 같은 onClick 이벤트 ..ㅋㅋㅋ 아시다시피 onClick 이벤트에다가 따봉을
        누르면 따봉변경에 따봉+1이 실행되어 숫자가 1씩 더해집니다.
        
        <p>2월 17일 발행</p>
      </div>

      <div className="list">
        <h4>{글제목[1]}</h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );
}

export default App;

이걸 다 읽으신다면 이제 당신은 onClick 이벤트에 대한 array 사용법을 마친것이라고 보면 되겠습니다.

우리 함께 장인이 되어 onClick 조져 버립시다.

아자 아자~~!~!