리액트를 다루는 기술을 참고하여 기술하였습니다.
state란?
state란 리액트에서 컴포넌트 내부에서 바뀔수 있는 값을 의미한다.
리액트는 state를 두가지로 나누는데 하나는 클래스형 컴포넌트에서 사용하는 state이며, 함수형 컴포넌트에서 사용하는 useState이다.
배열 비구조화 할당
const array=[1,2]
const one = array[0];
const two = array[1];이렇게 array에 있는 값을 one 과 two로 옮겨주고 싶을때 사용하는것이 배열 비구조화 할당이다.
이를 다음과 같이 표현할수 있다.
const array=[1,2];
const [one,two]=array;
* one =array[0]
* two =array[1]이렇게 표현이 가능하다.
useState
state는 다음과 같은 구조를 사용한다.
const [변수명, set변수명] =useState('변수 초기값');위와 같이 작성했을때, 변수의 초기값은 useState안의 값이 되며, 변수를 변경하고 싶을때는 set변수명 함수를 사용하게 된다.
set변수명 (변수를 변경할 값을 입력하면 된다. 자바스크립트를 사용하고 싶다면 {}에 작성)
주의할점
리액트에서는 state값을 변경할때, setState혹은 useState를 통해 전달받은 세터함수를 사용해야 한다.
즉 하드코딩을 통해서 원본 배열이나 객체를 변경시키면 안된다.
- 꼭 사본을 만들어서 변경할것.
const object={a:1, b:2,c:3}
const nextObject={...object,b:2}이렇게 해서 변경해야 한다.
…은 스프레드 연산자로 변경할 값 이외의 값을 그대로 받아온다는 뜻.
Uploaded by N2T
