2. state

state는 리액트에서 많이 사용 된다.

비중 있게 사용되는 만큼 사용 이유와 사용 방법을 정리해 보았다.

 

state 사용 이유

데이터를 저장하는 방법에는 state를 사용하는 방법 외

변수에 저장하는 방법도 존재한다.

하지만

변수는 값이 변경되는 경우 html에 자동으로 반영이 안되는 반면

state는 값이 바뀌면 html이 자동으로 재렌더링을 한다.

이와 같은 차이점으로 

자주 변경이 되는 html요소는 state로 값을 저장하여 데이터바인딩을 하는 것이 좋다.

 

state 사용 방법

1.  import

state는 import를 해야 사용 할 수 있다.

보통 useState 단어를 입력하면 아래와 같이 상단에 자동으로 import 된다.

->import {useState} from 'react'

 

2.  구조분해할당

state 값은 아래와 같이 리턴 문 밖에 저장할 수 있다.

 

let [state이름, setState이름] = useState(저장하려는 값)

let [title, setTitle] = useState('오늘의 빅이벤트!')

-> 이와 같이 저장하는 방식은

     구조 분해 할당을 활용하여 데이터를 저장하는 것이다.

     useState('오늘의 빅이벤트!') 값은 아래와 같기 때문이다.

useState('오늘의 빅이벤트!') = ['오늘의 빅이벤트!', 함수]

 

3.  setState

state값을 변경 하고 싶다면,

내가 이름을 지은 setState함수를 활용하면 된다.

setTitle('변경 원하는 제목을 입력해주세요.')