React Component / State

React-Hooks

최근 많은 기업이 함수형 컴포넌틀 사용하지만 함수형 컴포넌트 자체로 클래스형 컴포넌트의 모든 기능을 구현할 수 없다.
React에서 함수형 컴포넌트에서도 클래스형 컴포넌트와 동일한 기능을 사용할 수 있도록 Hooks 라는 도구를 제작했다.

State(State, setState, useState)

state : 컴포넌트에서 사용하는 변수 (state)
setState : 컴포넌트에서 사용하는 변수 (state)를 바꿔주는 기능
useState : 컴포넌트에서 사용하는 변수 (state)를 만들어주는 기능

useState로 State 변수 생성 / 수정

⚒️document.getElementById를 사용해 코드 구현

import React from 'react';

export default function CounterDocumentPage(){

   function onClickCountUp(){
      const count = Number (document.getElementById("count").innerText) + 1
      document.getElementById("count").innerText = count
   }


   function onClickCountDown(){
     const count = Number (document.getElementById("count").innerText) - 1
     document.getElementById("count").innerText = count
   }

   return (
      <div>
         <div id="count">0</div>
         <button onClick={onClickCountUp}>카운트 올리기</button>
         <button onClick={onClickCountDown}>카운트 내리기</button>
      </div>
   );
};

💡useState를 사용해 코드 구현

import React from 'react';
import { useState } from 'react';

export default function CounterStatePage(){

   const [count, setCount] = useState(0)     // let count = 0
                                             // count는 state, useState는 함수

   function onClickCountUp(){
      setCount(count+1)    // count = count + 1 
   }

   function onClickCountDown(){
      setCount(count-1)    // count = count +1
   }





   return (
      <>
        <div>{count}</div>    {/* count는 {}를 통해 변수로 사용 */}
        <button onClick={onClickCountUp}>카운트 올리기</button> 
        <button onClick={onClickCountDown}>카운트 내리기</button> 
      </>
   );
};
입력하세요

리액트에서 let을 안쓰고 state를 변수로 사용하는 이유

React Component는 화면에 보여지는 부분과 데이터를 관리하는 부분으로 나눠진다.
자바스크립트 변수 let 또는 const를 사용하게 되면 정보가 변경되었을 경우, 뒷쪽 데이터 부분만 변경되고, 앞쪽 화면에는 반영되지 않는 문제가 발생한다.
이 문제를 해결하기 위해서는

document.getElementById(”count”)innerText

를 사용해 반영하도록 해야한다.


하지만 컴포넌트 변수 state를 사용해 화면에 반영되도록 하고, setState()를 사용해 변경하면, setState()안에서 명령이 실행되어 변경된 데이터가 화면에 출력된다.