React) state 변경하기

oching·2022년 5월 17일

목록 보기

4/23

state 변경하기

이런 블로그를 만들어보겠습니당.
일단 state로 빼면 좋을 부분부터 정해보면,

우선, 첫번째 블로그의 글 list부분의 제목

let [글제목, 글제목변경함수] = useState(['여자 신발 추천', '강남 하이볼 맛집', '파이썬 독학']);

state안의 글제목으로 오는 자료가 많으니 배열로 넣었음.
그럼 글제목안에 자료내용들이 배열의 형태로 차곡차곡쌓였겠지.
그런 다음 쓰고 싶은 곳에 가서

 <h4>{글제목[0]}</h4>
 <h4>{글제목[1]}</h4>
 <h4>{글제목[2]}</h4>

이렇게 인덱싱해서 바인딩하기

그 다음, 두번째 따봉 아이콘을 누르면 옆의 숫자가 증가시키기만들어야겠지.

 let [따봉, 따봉변경함수] = useState(0);

1. onclick={함수}걸기 따봉 아이콘을 눌렀을 때

<span onClick={}>👍</span> {따봉}

2. state함수 사용

state의 상태를 변경시켜주려면 state함수를 사용해야한다.
따봉변경함수(변경시킬내용)를 onclick안에 넣어 실행하기.

<span onClick={() => {따봉변경함수(따봉+1)}}>👍</span> {따봉}

array, object의 state변경

array, object와 같은 참조형 타입을 변경하기전, 이해해야할 두 가지가 있음.

1. state는 기존state==신규state를 검사해 같다면, 변경안해준다.

state는 효율적으로 자원을 사용하기 위해 state를 변경하기 전, 기존의 state와 달라지는 게 맞는지 검사한다. 이때 달라진다고 판별이 되면 변경, 그게아니라면 그냥 변경안해줌.

2. state가 array,object형이라면 shallow copy를 만들어서 수정해야함.

위의 특징으로 인해 array, object와 같은 참조형 타입의 경우 우리가 그 안에 들어있는 내용값이 같다/다르다가아닌 해당 arr,obj가 어디를 참조하고있는지 데이터의 주소를 보고 판단해야한다. 내용값이 달라졌다해서 둘은 다른 state가 되는 것이 아니라, 참조하는 주소가 달라져야 다른 state가 된다고 판단한다는 것.

한번 만들면서 정확히 이해해보자

글 제목 수정 버튼을 누르면 list의 제일 첫번째인
'여자신발추천'을 '여자코트추천'으로 바꿔주자.

  let [글제목, 글제목변경함수] = useState(['여자 신발 추천', '강남 하이볼 맛집', '파이썬 독학','오늘의 광고']);

 <button onClick={()=>{
        let copy = [...글제목];  //1. swallow copy
        copy[0] = '여자 코트 추천';  //2. 배열의 부분만 변경
        글제목변경함수(copy); //3. 함수에 copy내용 전달해 실행
      }}>글 제목 수정 버튼</button>

글제목으로 받아오는 배열을 copy라는 변수에 담아 복사한다.
이때 주의할 점은 spread operator 문법을 이용해 [...글제목]으로 독립적 카피본을 만들어야한다는 것. spread oprator은 그냥 괄호 벗겨줘 라는 의미이다.
[...글제목]은 그냥 글제목 배열 그대로 가져오되 껍데기 벗겨주고 다시 배열로 묶으렴이라고 생각해도 좋다. 기존 껍데기 벗고 새로운 껍데기 입었으니 서로 다른(독립적인)배열이라고 인식되는 것.
만약 이렇게 하지않는다면? 참조형타입인 배열의 성격으로 인해 해당 state가 변경되지않았다고 판별되어 state변경이 일어나지않는다.