[React] 리액트 state(useState)

리액트 필수 개념

 

1.state

 

2. props

 

3. 컴포넌트

 

 

리액트 state에 대해서 알아보자 !

 

State

 

화면에 표시하는 데이터나 길이가 변하는 상태 등을 모두 State로 관리한다.

컴포넌트의 상태를 나타내는 값이다.

이벤트가 실행되는 경우 등에 업데이트 처리를 수행함으로써 동적 애플리케이션 구현

 

 

useState

 

useState 함수 반환값은 배열 형태로 첫 번째에 State 변수, 두 번째에 그 State를 업데이트하기 위한 함수가 설정됨

 

useState 사용 예

const [num,setNum] = useState();

 

이때 num이 상태를 가진 변수가 되고 setNum이 상태를 업데이트하는 함수가 된다.

useState는 함수이므로 사용할 때는 ()를 붙여 함수를 실행한다.

초깃값 설정  const[num,setNum] = useState(0);

배열의 분할 대입에서 명칭은 자유롭게 붙일 수 있지만 암묵적인 규칙을 적용하여

예제처럼 변수명이 num이면 업데이트 함수명은 setNum으로 쓴다.

 

 

카운트업 기능 구현

import { useState } from "react";

export const App = () => {
    //State 정의
    const [num , setNum ] = useState(0);    //추가

//버튼 클릭 시 State를 카운트업
const onClickButton = () => {
    alert();    //삭제
    setNum(num + 1); //추가
    };
    return (
        <>
           <h1 style={{ color : "coral" }}>개발자또리입니다!</h1>
           <button onClick={onClickButton}>카운트업</button>
           <p>{num}</p>
        </>
    );
};

 

코드를 실행시키면

카운트업 버튼을 클릭할 때마다 1씩 증가하고

아래와 같이 초기 표시된 화면은 0,

카운트업 버튼을 10번 클릭 시 10 으로 증가한 화면을 확인할 수 있다.

버튼 클릭 시 setNum함수에서 State의 값을 1씩 증가시키므로 화면에 표시한 State값이 카운트업된다.

 

 

기본적인 State 사용 방법에 대하여 알아보았다.

자바스크립트에서 변수로 다루는 문자열, 논릿값, 배열, 객체 등 무엇이든 State로 관리할 수 있다.

 

 

 

https://sorydory.tistory.com/entry/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-props

[리액트] 컴포넌트 , props