[React] State란? 변경되는 동적인 값

📌  State 란 무엇인가? 

- state란 리액트에서 이벤트에 의해 변경되는 동적인 값입니다.

- 버튼을 클릭하는 onClick 이벤트, input 입력으로 인해 발생하는 onChange 이벤트에 의해 입력값이 변경된 경우 사용됩니다. 
- props는 부모 컴포넌트가 설정하는 값이며 읽기 전용이지만, state는 하위 컴포넌트도 데이터를 변경할 수 있습니다. 
- 함수형 컴포넌트는 'useState'라는 Hook 을 사용하여 state를 다룰 수 있습니다. 

 

---

📌  State 사용하기 : useState 

함수형(function) 컴포넌트에서 { useState } Hooks를 활용해 state를 사용해보겠습니다.

useState란 리액트의 기본 Hook 중 하나로, 컴포넌트에서 state를 추가할 때 사용합니다.

※ 기본훅 : useState, useEffect, useContext

 

•  반드시 setState 로 데이터를 변경하기 

state 값을 변경할 때는 반드시 setState를 사용하여 변경해야 합니다.

setState를 사용한 경우, state값이 변경되면 useState가 변경을 감지하고, 자식 컴포넌트들까지 리렌더링이 발생합니다.

직접 state를 수정하게 되면 리액트가 render 함수를 호출하지 않아 변경이 일어나도 렌더링이 일어나지 않을 수 있습니다. 

 

⚡ useState 형태 

const [ state, setState ] = useState(initialState)
const [ 상태, 세터함수 ] = useState(초기값) 

useState 함수를 호출하면 배열 [state, setState] 이 리턴됩니다.

배열의 첫번째 요소는 현재 상태(state)이고, 두번째 요소는 상태를 바꾸어주는 setState 함수가 리턴됩니다. 

useState 함수 인자에는 상태의 초기값을 넣어주는 데, 생략 가능합니다 :D 

 

⚡ useState 사용하기 : input값에 따라 변하는 메시지

아래 코드는  input값에 따라 변하는 메시지 나타내기 

input 이벤트로 발생한 데이터(e.target.value)를 message 변수에 대입하는 코드입니다.  

 

1) useState로 message 관리 : 초기값 설정,  세터함수(setMessage) 선언 

const [message, setMessage] = useState('');

2) event 로 발생한 value 값을 Message에 대입해서 state를 갱신하기  

setMessage(e.target.value); 

 

import React, {useState} from "react";

function MyComponent() {

    const [message, setMessage] = useState(''); 
    const onChange = (e) => {
        setMessage(e.target.value);
    }
    return(
        <div>
            <input onChange={onChange}/>
            <p>{message}</p>
        </div>

    );
}

export default MyComponent;

 

• 실행결과