[React] state

SuJeong·2022년 11월 6일
0

React

목록 보기
7/9

1. state란?

컴포넌트 내부에서 컴포넌트의 상태값 -> 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값


2. state 선언 및 적용

import React, { useState } from 'react';

  const [value, setValue] = useState({
    id: '',
    pw: '',
  });

  const saveUserValue = e => {
    const name = e.target.name;
    const targetValues = { ...value, [name]: e.target.value };
    setValue(targetValues);
  };
  • useState()를 사용해서 state를 관리한다.
    • 첫번째 요소 : 동적으로 관리하고자 하는 상태값
    • 두번째 요소 : 상태값을 업데이트하는 함수
    • useState()에 인자는 state의 초기값
  • 결국 value = { id: '', pw:'' } 이고 해당 객체에 변화를 주고 싶으면 setValue()로 관리하게 되는 것이다.
  • saveUserValue() 함수 호출 시 spread문법으로 기존 value의 값들을 가져온 후 해당 value객체에 해당하는 키의 값을 setValue()를 통해서 e.target.value로 업데이트 시킨다.
  • setState function으로 해당 state를 업데이트하지 않고 단순 할당으로는 바뀐 값을 기준으로 화면이 다시 그려지지 않는다. setState function을 통해 state의 값을 변경해야만 값의 업데이트와 리렌더링의 효과를 볼 수 있다.
profile
Front-End Developer

0개의 댓글