[React] useState 사용법 (+ 배열 or 객체 state 값 변경)

useState란? 

함수형 컴포넌트 안에서 상태 관리를 하기 위한 Hook

 

 

🐾 State 특징 

• 변수 대신 쓰는 데이터 저장 공간
• 문자, 숫자, array, object 다 저장 가능
• State for WebApp : state는 변경되면 html이 자동으로 재렌더링 됨!
• 자주 바뀌거나 중요한 데이터들은 state에 저장

 

 

🔊 사용 방법

 

우선 useEffect hook을 사용하기 위해서 import 해준다. 

import useState from 'react';  // import

 

1. 선언하기 

let[name, setName] = useState('내용');

첫 번째 인자 :  값을 저장할 변수

두 번재 인자 :  변수를 변경하기 위한 함수

 

2. 변경하기 

setName('state값 변경');

이처럼 state의 값을 변경할 때에는 setState 함수를 통해서만 변경할 수 있다. 

이는 React에서 지켜야하는 불변성 때문인데.. 불변성을 얘기하자니 너무 길어질 것 같아서 다음 번에 정리하는 걸로....! 

(한 개념에 대한 공부가 수 십개의 개념을 가지고 오는 마법....🧙‍♂️)

 

어쨋든 웹에서는 값의 변화를 계속해서 확인해야하는데

값을 직접적으로 바꿔줘버리면 변화를 인지 할 수 없어서 이렇게 setState 함수를 이용한다. 

 

 

 

 

 

📌 state 데이터 수정 테크닉 

 

단순한 숫자나 문자열 변수가 아닌 배열이나 객체인 state 값을 변경할 때는 아래와 같은 방법으로 변경해야한다.

(이것도 immutable-불변성 때문)

 

 

1. 기존 state 복사본 만들기 (deep copy(값 공유X) : array, object)
2. 복사본에 수정 사항을 반영하기
3. 변경 함수( )에 집어넣기

 

const [post,setPost] = useState(['1번', '2번', '3번', '4번']);

// STATE값 변경 3STEP

var newArray = [...post];  //deepcopy
newArray[0] = '1번 수정!';
putPost( newArray );