React Hooks에서 제공하는 useState

1. useState란?

useState는 가장 기본적인 Hook으로 함수형 컴포넌트에서도 가변적인 상태를 지니게 해줌. 가변적 상태를 지닐 수 있는 특징 덕에 상태를 관리해야 되는 일에 자주 사용함.

useState의 기본 문법

import React, { useState } from 'react';

function Exampe(){
	const [state, setState] = usetState(initinalState);
}

위 자바스크립트 문법은 "배열 구조 분해" 라고 하며, state와 setState, 총 2개의 값을 만들고 있음. 즉 useState를 사용하면 state라는 첫번째 값과 setState이라는 두번째 값을 반환.

위의 코드를 배열 구조 분해를 사용하지 않으면 아래와 같은 코드가 됨.

var exampleStateVariable = useState('');
var state = exampleStateVariable[0];
var setState = exampleStateVariable[1];

2. useState의 구조

useState를 이용하여 변수를 선언하면 2개의 아이템 쌍이 들어있는 배열이 만들어짐.

const [state, setState] = useState(initialState);

2개의 아이템 중 첫번째 아이템인 state는 현재 변수를 의미함.
두번째 아이템은 해당 변수인 첫번째 아이템을 갱신해주는 함수임.

두번째 아이템이 첫번째 아이템을 변경, 갱신하는 함수이기 때문에 useState의 변수를 변경시킬 때는 첫번째 아이템인 현재 변수 값에 직접 접근하지 않고 두번째 인자인 함수를 통해 변수를 변경함.

const [state, setState] = useState(initialState);

괄호 안에는 initialState가 들어가며 이 initinalState 최초로 렌더링 하는 동안 반환되는 state의 값이 됨.

또한 useState(); 괄호 안에는 문자열, 배열, boolean 등 다양한 값이 들어갈 수 있음.

const [example1, setExample1] = useState();
const [example2, setExample2] = useState('');
const [example3, setExample3] = useState(true);
const [example4, setExample4] = useState([]);

3. 예시

import React, { useState } from 'react';

function Example(){
	const [count, setCount] = useState(0);
    
    return(
    	<div>
            <p>{count} times Clicked!</p>
            <button onClick = {() => setCount(count+1)}> 
        </div>
    )
}

위의 Counter 코드를 살펴보며 포스팅을 마치겠습니다 :)

1. useState를 가져오고 배열 구조 분해를 통해 useState Hook을 생성하였습니다.

2. 첫번째 아이템인 count는 현재 값이 저장되는 변수였죠? count의 첫 렌더링에 initialState인 0으로 값이 정해져 있으니 지금 화면에는 0이 보입니다.

3. 위에서 state를 바꾸기 위해서는 두번째 아이템인 setState 함수를 사용해야 한다고 했었죠? 예시에서 버튼의 onClick에 setCount 함수를 사용하였습니다. 버튼이 클릭될 때마다 setCount 함수를 통해 값이 (count + 1)로 업데이트 됩니다.

4. 업데이트 된 count 값이 다시 화면에 출력되면 성공입니다.