reactjs 필수스킬, state 변경함수 동작원리 알아보기

1. 개요

• state 변경함수는 기존state와 신규state가 동일하면 동작을 안함
• 이런 특징 때문에 state 변경함수 사용 시 주의사항이 있음
  • 일반적인 문자열이나 숫자 데이터는 그냥 조건 없이 state변경 함수로 state 변경 가능
  • 근데 array랑 object는 저장된 데이터가 아닌, [데이터를 감싸는 괄호]가 state와 연결되는 형태임
  • 그래서 그냥 바꾸면 안되고 [...state명] 형태로 써줘야함
  • 대괄호 열고 점(.) 3개 찍고 state명 입력하고 괄호 닫아줘야 한다는 뜻임
  • 이렇게 하면 array의 괄호를 벗기고 새로운 array를 만들어줌
    • (기존의 array와 별개의 array가 만들어진다는 뜻)
  • 이거 안하면 기존state와 신규state가 동일한 걸로 인식됨
    • (괄호 안에 들어있는 데이터는 바뀌었지만 state에 연결되어 있는 괄호는 그대로니깐)
    • state1 = [1,2,3]이라는 스테이트가 state2 = [4,5,6]으로 바뀌었지만 state명과 연결된 것은 숫자들이 아니라 괄호라는 뜻
  • 여기서 괄호는 array 자료형을 감싸는 괄호([])를 의미함

2. 코드

import {useState} from 'react';

function App() {
	let [state1, setState1] = useState([1, 2, 3]);
 	let [state2, setState2] = useState([1, 2, 3]);

 	let a = 0;
 	function 비교() {
    	if (state1 == state2) {
      		a = "같음";
    	} else {
      		a = "다름";
    	}
    	return a;
  	}
    console.log(비교());
    return()
}
        
export default App;

• 위 코드는 state1과 state2의 내용물을 비교해서 같은지 다른지 브라우저의 console에 찍어주는 코드임
• 분명 state1과 state2에 들어있는 데이터는 {1,2,3}으로 동일하지만 저 코드를 실행해보면 둘이 다르다고 나옴
• 이제 개요부분을 다시 읽어보면 이해가 될거임
• state1 = [1,2,3] <= 여기서 state1의 본체는 1,2,3이 아니라 괄호( { } )였음
• 괄호 안에 들어있는 숫자가 같든 다르든 그건 상관없이 state1의 괄호와 state2의 괄호가 같냐 다르냐가 중요했던 것