[React] State 사용하기

1. State 란

state는 데이터를 가지고 있는 객체입니다.
사용하는 쪽과 구현하는 쪽을 분리하여 각 방향에서 편의성이 높습니다.

2. import

import { useState } from 'react';

3. 변수 선언

아래의 코드와 같이 생성하고, useState 함수 안의 인자에 초기값을 넣어주면

const [state, setState] = useState(초기값);

state와 setState를 배열 형태로 return 해줍니다.
여기서 state와 setState는 변수명으로, 아무 이름으로 적어도 상관없지만

const [변수, set변수] = useState(초기값);

보통 두 번째 단어는 앞에 set을 붙인 후 camelCase 표기법에 따라 이름을 작성합니다.

4. 변수값 변경 (재선언)

위에서 선언했던 두 번째 단어 setState를 사용하여 변수 state의 값을 변경합니다.

setState(1); // state의 값을 1로 변경

setState 함수를 사용하여 변수명을 변경하면, 변수의 값이 변경될 때마다 해당 컴포넌트가 화면에 다시 렌더링됩니다.