[React] 4. React 컴포넌트(3) - State 알아보기(React Hooks 사용)

4. React 컴포넌트(3) - State 관리

 

이번 포스팅은 [ React 컴포넌트 내용 중 State에 대한 내용 ] 입니다. : ) 

 

https://ko.reactjs.org/docs/state-and-lifecycle.html

https://reactjs.org/docs/hooks-reference.html#usestate

 

 

1. state란?

 - 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다. 

 - 프로퍼티(props)의 특징은 컴포넌트 내부에서 값을 바꿀 수 없다는 것이었다.

   하지만 값을 바꿔야 하는 경우도 분명 존재하며, 이럴때 state라는 것을 사용한다.

 - 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다. 

 - 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용된다 볼 수 있다.

※ 참고
리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었다.
즉 State, Life Cycle 등등 이 없기 떄문에 클래스형 컴포넌트를 사용 했었다. 

리액트 16.8부터 Hooks 라는 기능이 도입되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. 
useState Hook을 사용하여 State 사용이 가능하다.

 

2. 사용방법?

0. 들어가기 앞서 어떤 상황에 React에선 state를 사용하면 좋을지 예제를 통해 생각해 보자.

ex)

import React, { useState } from 'react';

const Main = () => {
    let myName = "GodDaeHee";

    function changeName() {
        myName = myName === "GodDaeHee" ? "KimDaeHee" : "GodDaeHee";
        console.log(myName);
    }

    return (
        <div>
			<h1>안녕하세요. {myName} 입니다.</h1>
			<button onClick={changeName}>Change</button>
        </div>
    );
};

export default Main;

 

 - Change 버튼을 클릭 하면 console.log에 값이 찍히는 것을 볼 수 있지만, 화면출력은 변경되지 않는다.

 - 예전엔 changeName함수를 다음과 같이 작성하여 직접 렌더링 방식으로 작성 했었을 것 이다.

const Main = () => {
    let myName = "GodDaeHee";

    function changeName() {
        myName = myName === "GodDaeHee" ? "KimDaeHee" : "GodDaeHee";
        console.log(myName);
        document.getElementById("name").indderText = myName;
    }

    return (
        <div>
			<h1>안녕하세요. <span id="name">{myName}</span> 입니다.</h1>
			<button onClick={changeName}>Change</button>
        </div>
    );
};

 - 하지만 물론 react 컴포넌트에서는 이또한 화면 렌더링이 바뀌지 않는다.

 - react에서는 컴포넌트에서 동적인 값을 상태(state)라고 부르고 이를 사용하여 변경 하면 되는데 한번 살펴 보도록 하자.
 - useState를 사용하여 함수형 컴포넌트에서 상태 관리를 하는 방법을 알아 보도록 하자.

 

※ 참고
https://ko.reactjs.org/docs/hooks-overview.html

 

1. 선언방법

 - react 모듈에서 { useState }를 불러오고 useState()를 선언해서 사용면 된다.
 - useState의 변수값이 바뀌면 컴포넌트가 새롭게 렌더링 된다.

const [state, setState] = useState(initialState);
const [ 데이터, 데이터변경함수 ] = useState(초기값(생략가능));

ex)

import React, { useState } from 'react';

const Main = () => {
	// let myName = "GodDaeHee"; // useState를 사용하여 변경
	const [ myName, setMyName ] = useState("GodDaeHee") 

    function changeName() {
        /*
		myName = myName === "GodDaeHee" ? "KimDaeHee" : "GodDaeHee";
        console.log(myName);
        document.getElementById("name").indderText = myName;
		*/
		setMyName(myName === "GodDaeHee" ? "KimDaeHee" : "GodDaeHee");
    }

    return (
        <div>
			<h1>안녕하세요. {myName} 입니다.</h1>
			{/* <button 
				onClick={() => {
					setMyName(myName === "GodDaeHee" ? "KimDaeHee" : "GodDaeHee");
				}}
			>Change</button> */}
            <button onClick={changeName}>Change</button>
        </div>
    );
};

export default Main;

 - 클릭시 마다 화면 렌더링이 바뀌는 것을 볼 수 있다.

 

 - 또다른 진부한 count 예제도 살펴보고 가면 좋을 것 같다.

 

ex)

import React, { useState } from 'react';

const Main = () => {
    const [ cnt, setCnt ] = useState(0)
    const updateCnt = () => setCnt(cnt + 1);
    const clearCnt = () => setCnt(0);
    return (
        <div>
            클릭한 횟수는 {cnt}번 입니다.
            <div>
                <button onClick={updateCnt}> 클릭해 보세요! </button>
                <button onClick={clearCnt}> 초기화 하기! </button>
            </div>
        </div>
    );
};

export default Main;

 - 클릭시 count up 되는 부분, 0으로 정상적으로 초기화 된다.

 

2. 객체(Object)도 상태변수(State Value)로 사용 가능하다.

ex) 하기와 같이 객체를 상태 변수로 사용해도 동일하게 동작 한다.

import React, { useState } from 'react';

const Main = () => {
    const [ state, setState ] = useState({cnt : 0})
    const updateCnt = val => 
    setState({
        ...state,
        [val] : state[val] + 1
    })
    const { cnt } = state
    return (
        <div>
            클릭한 횟수는 {cnt}번 입니다.
            <div>
                <button onClick={updateCnt.bind(null, 'cnt')}> 클릭해 보세요! </button>
            </div>
        </div>
    );
};

export default Main;

 

3. useState를 호출하여 반환된 업데이트 함수는 setState와 유사하게 사용 가능 하다.

ex)

import React, { useState } from 'react';

const Main = () => {
    const [ cnt, setCnt ] = useState(0)
    // const updateCnt = () => setCnt(cnt + 1);
    // const clearCnt = () => setCnt(0);
    return (
        <div>
            클릭한 횟수는 {cnt}번 입니다.
            <div>
            <button onClick={() => setCnt(prevCnt => prevCnt + 1)}> 클릭해 보세요! </button>
            <button onClick={() => setCnt(0)}> 초기화 하기! </button>
            </div>
        </div>
    );
};

export default Main;

 

ex) Main 컴포넌트를 3번 호출 해보자.

import React, { Component } from 'react';
import Main from './component/Main';
import Wrapper from './component/Wrapper';

function App() {
  return (
    <div>
      <Main />
      <Main />
      <Main />
    </div>
  );
}

export default App;

 

 - 호출한 컴포넌트별로 상태관리가 가능한 것을 확인할 수 있을 것이다.

 - 아주 간단히 몇가지 예제를 통해 컴포넌트의 상태 관리하는 방법을 살펴 보았다.

 

 

 

출처 : https://goddaehee.tistory.com/301?category=395445