[React] state & props 1 (What Is State?)

1. State란?

컴포넌트(파스칼 케이스로 정의된 함수 그 자체) 내에서 변할 수 있는 값(변경될 수 있는 값)

 예시) 나이(1년 마다 변하므로), 결혼 여부(미혼 -> 기혼)

리액트에서는 이렇게 변경될 수 있는 컴포넌트를 State에 넣어서 관리한다.

쇼핑몰 구매 체크 목록을 예를 들어보자.

쇼핑 체크 목록에 구매할 물건의 개수나 구매 금액이 변경되고 이에 따라 사용자의 화면이 달라진다.

이처럼 컴포넌트 내에서 변할 수 있는 값(상태)은 state로 다루어주어야한다.

import React, { useState } from "react";
import "./style.css";

const CheckboxExample = () => {
	const [isChecked, setIsChecked] = useState (false);
    
    const handleChecked = (event) => {
    	setisChecked(event.target.checked);
    };
    return (
        <div className="App">
        <input type ="checkBox" checked={isChecked} onChange={handleChecked} />
        <span> {isChecked ? "checked!" : "unchecked"}</span>
        </div>
    );
}

 

2.useState 사용법

useState를 이용하기 위해서는 React에서 usestate를 불러와야한다.

import {useState} from "react";

[code] import 키워드로 useState를 불러오기

 

 

이후 useState를 호출하면 배열을 반환하는데 배열의 0번 째 요소는 현재 state의 변수고 1번 째 요소는 이 state의 변수를 갱신 할 수 있는 함수다.

 

<예시>

function checkboxExample () {
const [isChecked, setIschecked] = useState(false);
}

 

이 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용하면 된다.

예제에서는 isChecked가 boolean 값이기 때문에 true나 false 여부에 따라 다른 결과가 보이도록 삼항 연산자를 사용했다.

<span>{isChecked ? "Chedcked" : "Unchecked"}<span>

 

3.state 갱신하기

state를 갱신하려면 state변수를 갱신할 수 있는 함수인 setIsChecked를 호출한다.

 

예제의 경우 input [type=checkBox] JSX엘리먼트의 값 변경에 따라서 isChecked가 변경돼야한다.

 

사용자가 체크박스의 값을 변경하면 onChange 이벤트가 이벤트 핸들러 함수인 handleChecked를 호출하고 이 함수가 setIsChecked를 호출하게 된다.

 

setIsChecked가 호출되면 호출된 결과에 따라 isChecked변수가 갱신된다.

 

React는 새로운 isChecked 변수를 checkBoxExample 컴포넌트에 넘겨 해당 컴포넌트를 다시 렌더링한다.

const checkBoxExample = () => {
	const [isChecked, seIsChecked] = usState(false);
    const handleChecked = (event) => {
    	setIschecked (event.target.value);
    };
    return (
    <div className="App">
    	<input type="checkBox" checked={isChecked} onChange={handleChecked} />
        <span>{isChecked ? "Checked!" : "Unchecked"}</span>
        </div>
    );
};

[code] state 갱신하는 과정