State가 뭐예요?
변수를 저장하는 방법이라고 보면 편하다. JS에서는 let,var,const들을 사용해서 변수들을 저장했는데 리액트에서는 state를 만들어서 데이터를 저장 할 수 있다.
- 그럼 State를 쓰는 이유는 무엇일까?
state는 변동사항이 생기면 html도 자동으로 재렌더링해주기 때문!
예를들어
let [성별,변경] = usetState("남자")
라고 했을 때 state 변경을 하기 위해서는
변경("여자")을 해준다면
state안의 값이 "남자"에서 "여자"로 바뀔 것이다.
만약 let안에 array나 list같은 함수가 있다면?
array자료[X] = '바꿀값'
이렇게 해주면 된다.
State변경 함수 동작 원리
변경을 했다고 해도
기존 state === 신규 state 라면 바꿔주지 않는다.
- 이유가 뭐에요?
let data1 = [1,2,3];
let data2 = data1;
data2[0] = 1000;
console.log(data2 === data1)
라고 할때 콘솔창엔 'true'가 나올 것이다.
두개의 데이터가 같다고 할 때, data2의 값을 바꾸면 data1의 값도 동시에 바뀐다고 컴퓨터가 인식하기 때문.
그럼 어떡해야 할까요?
독립적인 카피본을 만들어서 수정하는 것이 가장 좋다.
[...기존state] 이런식으로 copy본을 하나 만들면 독립적인 카피가 생성된다.
그 후, copy본을 수정하면 변경을 하면 잘 바꿔 준다.
let [성별,변경] = useState(['남자','여자']) 일때
let copy = [...성별] 이렇게 만들어 주면 된다.
그 후
copy[0] = '중성'; 변경(copy)
해주면 '남자'의 값이 '중성'으로 잘 변경 될 것 이다.
