[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;

 

=> 클릭 후

 

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

See the Pen Component-State by goddaehee (@goddaehee) on CodePen.

 

 

 

 

 - 또다른 진부한 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;

 

0) 초기 상태 : 0번

 

1) "클릭해 보세요!" 클릭시 count up 되며.

 

2) "초기화 하기!" 클릭시 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;

 

 

 

See the Pen Component-Count by goddaehee (@goddaehee) on CodePen.

 

 

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

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