React에 대해 공부하기-3 state,useState

 

리액트를 사용해보면서, 공부하면서 궁금한 했던 부분이
props,state,가상돔코드,map함수 적용하기

등등이 있었다.

그중에 오늘은 공부하면서 알게된 state에대해 정리해보려고한다.

 

State 란?

UI에 변경되는것이 반영되고,
컴포넌트 함수가 다시 실행되어 UI가 다시 그려져도(리렌더링) 데이터가 유지되는값
이라고 한다.

const [상태, 상태설정하는 함수] = useState(초기값)

 

state는 이런식으로 사용한다.

-상태를 설정하는 함수를 보통 "set+상태명"으로 변수명을 작성한다.

-상태 업데이트 함수를 호출하면 컴포넌트는 해당 상태의 변경을 감지하고 리렌더링 한다.

여기서 use- 는 react에서 hook 훅함수 또는 훅이라고 불리고, function 키워드나 화살표 함수로서 선언된 함수형 컴포넌트에서 state를 다루기 위해 만들어진 도구라고 생각하면된다.

 

State는

값이 변경될때마다 컴포넌트가 업데이트 되어야하는 경우

값이 변경되고 그변경되는 것이 화면에 보여야하는 경우 사용한다고한다.

예를 들자면 인스타그램의 좋아요,하트 숫자 의 예시를 들수 있을거같다.

 

실제 사용 예시를 보자면

import React, { useState } from 'react';

function Counter() {
  // useState를 사용하여 상태 선언 (초기값 0)
  const [count, setCount] = useState(0);

  // 증가 함수
  const increment = () => {
    setCount(count + 1);
  };

  // 감소 함수
  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>좋아요</button>
      <button onClick={decrement}>싫어요</button>
    </div>
  );
}

export default Counter;

기본적으로 이런식의 구조를 가지고 onClick을통해 클릭시 숫자가 증가하고, 감소하는걸 알수있다.

 

함수를 다시 실행시켰는데 데이터 값은 그대로 유지하면서 바뀐 것을 반영하고 싶을때 사용하는게 

state라는 개념이다

state는 react 내부적으로 UI가 바뀌어도 그 값은 계속 유지되도록 설계되있다.

 

다음 글은 map함수나 오늘 다루지못한것들을 정리할 예정이다.

 

 

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript