[React] 03. 버튼 - Button / state 변경(array)

 

 

 

 

 

🙆‍♂️버튼

---

function App() {
  let [title] = useState(["맛집","영화","카페"]);
  let [like] = useState(0);

  return (
    <div className="App">
      <header className='header'>
        <h3>블로그</h3> 
      </header>
      <div className='article'>
        <h4>{title[0]} <span>👍</span> {like}</h4>
        <p>2022/07/07</p>
      </div>
      <div className='article'>
        <h4>{title[1]} <span>👍</span></h4>
        <p>2022/07/07</p>
      </div>
      <div className='article'>
        <h4>{title[2]} <span>👍</span></h4>
        <p>2022/07/07</p>
      </div>
    </div>
  );
}

아직 코드에 대한 기능은 구현하진 않았지만 이런 사이트를 구현해봤습니다.

 

따봉 버튼이 눌린다면 인덱스값이 늘어나도록 하려면 onClick을 사용하면 됩니다.

실제로 HTML에서 인라인으로 자바스크립트를 사용하는 것과 비슷하지만

style 때 처럼 중괄호를 사용하셔야 합니다.

 

🚀state 변경

---

이제 함수를 이용해서 state를 변경하면 되는데 그냥 변경할 수 없습니다.

state 게시물에서 정리한 것 처럼 state변경은 전용 함수를 통해서만 가능하기 때문입니다.

 

let [like,change] = useState(0);

이렇게 해주고 맛집 부분에 onClick을 추가해준다면

 

<h4>{title[0]} <span onClick={()=>{change(like++)}}>👍</span> {like}</h4>

이렇게 추가한다면

 

잘 작동하는 모습입니다.

 

 

🚀state 변경[array]

---

그런데 이제 state가 배열로 저장된 글 제목을 수정하려면 어떻게 해야 할까요?

 

        <button onClick={()=>{
          let copy = [...title];
          copy[0] = "놀이동산";
          chg(copy);
        }}>놀이동산으로 수정</button>

결론부터 작성하면 이렇게 작성해야 합니다.

 

copy라는 변수를 만들어서 기존의 state 값을 저장해주고 원본은 건드리지 않고 복사본의 값을 변경하여

state 변경 함수를 사용함으로 수정할 수 있습니다.

특이한 점이 복사본에 저장할 때 [...ARRAY]와 같은 형식으로 작성되는데 그 이유는 밑에 정리하겠습니다.

 

 

🚀state 변경함수 특징

---

state 변경함수는 기존 state와 변경하려는 state를 비교하여 값이 같다면 변경하지 않습니다.

        <button onClick={()=>{
          let copy = [...title];
          copy[0] = "놀이동산";
          chg(copy);
        }}>놀이동산으로 수정</button>

이 코드로 따지면 기존의 title값과 copy값이 같다면 변경하지 않는 것입니다.

그 이유는 자원의 낭비를 하지 않기 위해서 입니다.

 

🚀array/object 특징

---

let arr = [1,2,3];

자바스크립트에서는 배열 값이 C언어에서 포인터처럼 작용합니다.

1,2,3이라는 값은 메모리(LAM)에 저장되어있고 배열 안에는 1,2,3의 메모리 주소가 저장되어 있습니다.

 

그래서 위에 [...ARRAY] 형식을 한 이유는

기존에 이 방식으로 state값을 수정해줘도 배열이 가리키는 메모리 주소에 있는 값은 바뀌겠지만 배열 자체에 저장된 메모리 주소 값은 바뀌지 않습니다. 그래서 state 변경함수 특징에 의해 변경이 되지 않는 것입니다.

[...ARRAY]를 사용함으로써 메모리 주소 값을 변경해줄 수 있습니다.

...은 괄호를 벗기는 명령어고 []로 다시 깜사줬기 때문에 새로운 배열을 생성한 것입니다.

그래서 [...ARRAY]방식이 되는 것입니다.