개요

state가 개인적으로 아직 어렵다고 느껴져서 복습 한다는 느낌으로 개념 이나 만드는 법 을 작성 하려고 한다.

state란?

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.
왜 바뀌어야 할까요? 목적은 하나에요. 바로 UI(엘리먼트)로의 반영을 위해서죠.

처음에 들었을 때는 변수와 같은거 아니야? 라고 생각했는데 차이점이 많이 있었다.
일단 내가 쉽게 알아야 하기 때문에 쉽게 보자면
자료를 잠깐 저장할 땐 변수 물론 state도 사용 가능하다.

변수의 경우 변경되면 html에 자동으로 반영이 안된다.
하지만 state는 변경되면 html이 자동으로 재렌더링이 된다. 엄청 편하겠다 라고 생각이 들었다.

이것 외에도 차이점이 더 있다.

state 만드는 법

useState()

위 함수를 사용.

const [a, b] = useState("react");

react라는 자료를 저장한 모습
a는 state에 보관한 자료가 되겠다.
b는 state를 변경해주는 함수 이다.
둘다 자유롭게 작명 가능하다.

const [a, b] = useState( [1, 2, 3, 4, 5] );

이렇게도 작성 가능.

state 변경하는 법

등호로 바꿀수 없나 했는데 변경이 안된다.
정확히는 html에 반영이 안된다.

const [a, b] = useState(0);

{ b(1) }

0을 1로 변경 하고 싶을때 변경함수를 이용하는데
함수이기 때문에 소괄호를 붙이고 안에 새로 바뀔 state값을 집어 넣어주면 되겠다.
매우 간단하다.
문자 일경우에도 ""이것만 넣어서 바꿔주면 되겠다.

마무리

물론 예를 들어서 쓴거라 매우 쉬워보이긴 하는데 이렇게도 해보고 저렇게도 해보니까 어려운 것도 많았다.
나중에 하나하나 복습한다는 느낌으로 글을 작성해 봐야겠다.