React.useState

1. React.useState에 정의

: React.useState를 한 문장으로 정의한다면 컴포넌트에 "상태변수"를 추가할 수 있는 훅이다. 여기까지 들었을 때 이런 궁금중이 생길 수 있다. "상태변수"라는 것은 어떤 것일까? 그래서 쳅터 2에서는 상태 변수에 대해서 작성해볼려고 한다.

 

2. state variable(상태 변수)

: 상태 변수란 한 문장으로 정의하자면 컴포넌트의 메모리이다. 컴포넌트는 다음 예시와 같이 상호작용의 결과를 통해 화면이 바뀔 수 있다.

• input에 값이 변할 때마다 input field의 값을 변화시켜야 하는 상황
• input에 값을 입력하고 button을 눌렀을 때 input의 값을 출력하는 상황

이 2가지 예시들에서는 공통적인 궁금중이 발생한다." input에 값을 입력할 때마다 그 값을 어디에 저장하고 있지?"라는 의문 말이다. 그리고 이 의문을 해결하는 주인공이 바로 state variable이다. 즉 state variable은 "특정 컴포넌트에 대한 메모리(저장 공간)"를(을) 뜻하는 것이다.

 

3. React.useState 사용 방법

: 여기까지 봤을 때는 React.useState에 대한 기본적인 정의를 알 수 있을 것이다. 하지만 여기까지 공부한다면 우린 React.useState에 대해서 실제로 써먹기는 힘들 것이다. 그래서 이번 쳅터에서는 React.useState에 대해서 "카운터 프로그램"을 통해서 간단히 실습을 해볼려고한다. React.useState의 생김새는 다음과 같다.

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

여기까지 useState에 대해서 살펴봤다. 그럼 본격적으로 counter progrem을 통해서 useState의 사용방법을 알아보도록 하겠다.

import React from "react";

export default function App() {

	//counter 상태 변수를 App이라는 컴포넌트에다가 부여
	const [counter , setCounter] = useState(0);
    
    //setCounter를 통해서 counter 상태변수를 하나씩 올리는 작업
    const onPlusCounter = () => setCounter((prev) => prev + 1)
    
    //setCounter를 통해서 counter 상태변수를 하나씩 내리는 작업
    const onMinusCounter = () => setCounter((prev) => prev - 1)

	return(
    <>
		<button onClick={onPlusCounter}>+</button>
        <span>{counter}</span>
        <button onClick={onMinusCounter}>-</button>
    </>
)}