210705 State 수정하기

단순한 자료형일때

이렇게 옆에 좋아요 버튼을 만들고, 따봉을 누르면 숫자가 하나씩 올라간다.

function App() {
  let [title, change] = useState(['남자 코트 추천', '여자 코트 추천', '봄 코트 추천']);
  let posts = '강남 고기 맛집';
  let [good, goodChange] = useState(0);

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <div className = "list">
        <h3>{ title[0] } <span>👍</span> {good} </h3>
        <p>7월 2일 발행</p>
        
        <hr/>
      </div>
      <div className = "list">
        <h3>{ title[1] }</h3>
        <p>7월 2일 발행</p>
        <hr/>
      </div>
      <div className = "list">
        <h3>{ title[2] }</h3>
        <p>7월 2일 발행</p>
        <hr/>
      </div>
    </div>
  );
}

버튼을 누르면 좋아요 숫자가 올라가야 하므로 state 변수로 만들어주었다. (초기값은 0)

그래서 누르면 1이 증가하는건 어떻게 하나요?

우선 '클릭 시' 동작을 수행해야 하므로 자바스크립트에서의 코드가

<div onclick="실행할 자바스크립트">

였다면, 리액트 JSX에서는

<div onClick={실행할 함수}>

1. click의 c가 대문자
2. 중괄호 사용
3. 중괄호 안에 코드가 아니라 함수명만 기재 (함수명 다음 소괄호를 넣지 않는다)

• 함수를 따로 만들지 않고 바로 안에다가 적고 싶다면 이런 방법을 써도 가능하다. (ES6 기준)

<div onClick={ function(){ 실행할 코드 } }>
<div onClick={ () => { 실행할 코드 } }>

이렇게 하면 될까?

<h3> { title[0] } <span onClick={ ()=>{ good + 1 } } >👍</span> { good }</h3>

결론은, 안된다.
state는 일반 변수와는 다르게 값을 변경할 때 지정된 변경함수를 사용해야 하기 때문이다. 우리가 state를 처음 만들 때 옆에 change 함수를 같이 만드는 것이 바로 이 때문이다.

즉, 이런 코드가 만들어져야함

<h3>{ title[0] } <span onClick={()=>{goodChange(good+1)}}>👍</span> {good} </h3>

array 안의 자료를 변경하고 싶다면

버튼을 눌렀을 때 '남자 코트 추천' '여자 코트 추천' 이런 제목을 변경하려면?

우선 버튼을 만들어주고

/* useState로 title 선언한 부분*/
let [title, change] = useState(['남자 코트 추천', '여자 코트 추천', '봄 코트 추천']);


<div className = "list">
        <h3>{ title[0] } <span onClick={()=>{goodChange(good+1)}}>👍</span> {good} </h3>
        <p>7월 2일 발행</p>
        <button onClick={ titleChange }>button</button>
        <hr/>
      </div>

titleChange라는 함수를 하나 만들되
1. title이라는 state는 직접 수정할 수 없기 때문에 (title[0] = '여자 코트 추천' 이렇게 못함) 복사본을 newArray에 저장한다.
2. newArray의 0번째 데이터를 '여자 코트 추천'으로 변경한다.
3. 그리고 그 배열을 change 함수 안에 넣어서 배열을 통째로 바꿔치기한다.

이렇게 만들어보자.

function titleChange(){
    var newArray = title;
    newArray[0] = '여자 코트 추천'
    change(newArray);
  }

이 함수도 동작하지 않음!
state를 복사할 때 deep copy가 필요 (reference data type이기 때문)
call by value, call by reference 개념인듯 하다.

Reference Type (참조 타입)
참조 타입의 데이터는 크기가 정해져 있지 않고 변수에는 데이터에 대한 참조만 저장된다. 즉, 변수의 값이 저장된 힙 메모리의 주소값을 저장한다.
참조 타입은 변수의 값이 저장된 메모리 블럭의 주소를 가지고 있고 자바스크립트 엔진이 변수가 가지고 있는 메모리 주소를 이용해서 변수의 값에 접근한다.

state가 array 데이터 일때 등호 =를 이용해서 복사를 하면 그 주소를 변수끼리 공유하게 되므로 문제가 일어나기 때문에, 복사본을 만들어 작업해야한다. 리액트에서 immutable data는 직접 변경하는 것이 권장되지 않음.

가장 쉽게 deep copy 만드는 법

function titleChange(){
    var newArray = [...title];
    newArray[0] = '여자 코트 추천'
    change(newArray);
  }

✨결국 가장 중요한 개념: state를 변경하고자 할 때 직접 건들지 않는다.✨