[ 리액트 / React ] State 상태 변수 (ps. Destructing)

React

[ 리액트 / React ] State 상태 (ps. Destructing)

Destructing 문법 간단 정리

일반 문법

let a = 1;
let b = 2;
console.log(a)
console.log(b)
// -> 1, 2출력​

Destructing 문법

let [a, b] = [1, 2]
console.log(a)
console.log(b)
// -> 1, 2출력

 

State(상태 변수)란?

React에서 사용하는 '동적인 데이터를 위한 변수'
= React에서 컴포넌트의 동적인 데이터를 관리하는 객체

 

State 사용법

useState(훅)를 이용한 상태 관리

import { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
        </div>
    );
}

# 코드 설명

import { useState } from "react";

   - useState를 사용하기 위한 import문

const [count, setCount] = useState(0);

   - useState를 이용한 상태 변수 'count'와 관리 함수 'setCount' 선언
   - 기본 형태
       - 변수형 [작명1, 작명2] = useState(기본값)
          (보통 '작명2'의 자리엔 'set작명1'과 같은 형태로 작명한다.)
          ex) const [name(작명1), setName(set작명1)] = useState("");
       - '작명1' = 상태 변수 (state 변수)
       - '작명2' = state 관리 함수

! Destructing과 연관성?
   - useState(기본값)  --> [기본값, 관리 함수] Retrun
           -> const [count, setCount] = useState(기본값);
           -> const [count, setCount] = [기본값, 관리 함수];
           => ( count는 기본값, setCount는 관리 함수가 할당 )

<button onClick={() => setCount(count + 1)}>+1</button>

  - [ 관리 함수 ] setCount()의 사용
    ( const [count, setCount] = useState(0); )
  - setCount()의 역할
     - 앞서 선언한 'count'를 관리하기 위한 함수
  - setCount() 사용 시
     1. state 변수(여기선 count)의 값을 변경
         ex) setCount(5) -> count의 값은 5로 변경됨
     2. 컴포넌트 리렌더링 ( 변경된 부분의 UI 자동 업데이트 )

 

 

 

 

React, react, 리액트, state, 스테이트, 상태, state 변수, 상태 변수, Destructing