[React] State란?

state 란?

• state는 뜻 그대로 상태, 상태를 “기억하기”위해 사용 
• 컴포넌트의 속성값을 저장, 변경할 수 있는 객체
• 리액트에서는 상태(state)가 변화하면 렌더링이 일어납니다
• 리액트가 상태 관리를 하는 이유는 리렌더링 여부를 판단하기 위함

따라서 리액트에서 데이터가 변할 떄 화면을 다시 랜더링 해주기 위해서는 State를 사용해야한다.

 

Props vs State

• Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용되며, 변경할 수 없다.
• State는 컴포넌트 내에서 관리되는 데이터로, 컴포넌트의 동작을 제어하거나 화면에 표시할 내용을 결정하며, 변경될 수 있다.

 

React에서의 상태 관리와 데이터 흐름

여러 자식 컴포넌트가 동일한 데이터를 필요로 하거나 서로 통신해야 할 때, 그 데이터를 부모 컴포넌트에서 state로 관리해야 한다  부모 컴포넌트는 props를 사용하여 자식 컴포넌트에 state를 다시 전달할 수 있다. 이를 통해 자식 컴포넌트들이 서로 또는 부모 컴포넌트와 동기화하도록 만든다.

 

useState란?

상태(state)를 관리할 수 있는 hook

동적으로 바뀌는 값을 관리할 때 사용 하며,상태 유지 값과그 값을 갱신하는 함수를 반환한다.

State를 업데이트 해주는 React 라이브러리에서 제공해 주는 빌트인 훅

훅(hook) : 리액트 v16.8 버전부터 나온 기능. 함수형 컴포넌트에서만 쓸 수 있는 함수로 리액트의 lifecycle 기능을 연동(hook) 할 수 있음.

useState의 특징

1. 해당 컴포넌트 안에서만 사용을 할 수 있다,
2. const [state, setState] = useState(initialState)와 같이 사용

 

⚠️주의!

부모 컴포넌트에서 useState를 한번만 업데이트해도, 안에 있는 자식 컴포넌트들 또한 전부 리랜더링(업데이트) 하게된다.

따라서 State를 잘못 쓰면 컴포넌트 리렌더링이 많이 일어날 수 있다

리액트에서 "리렌더링"이 일어난다는 것은 컴포넌트 함수가 다시 실행되어 새로운 JSX가 반환하고, 이 새로운 JSX를 기반으로 가상 DOM의 새로운 스냅샷을 생성하여 이전 스냅샷과 비교한 후, 실제 변경된 부분만 실제 DOM에 업데이트

 

요약: 리액트 컴포넌트의 함수가 다시 실행되어 새로운 가상 DOM 스냅샷을 생성하는 과정.

 

여러 개의 상태 다루기

1. 개별 상태 관리: 상태가 적고 서로 독립적인 경우에 적합

const [name, setName] = useState('');
const [price, setPrice] = useState(0);
const [today, setToday] = useState(null);

 

2. 객체로 상태 관리: 여러 상태가 있고 이들이 함께 변경되는 경우에 적합

const PaymentForm = () => {
    const [objectState, setObjectState] = useState({
        name: '',
        price: 0,
        today: null
    });
};

 

+) prevState : 객체의 특정 속성만 업데이트

: 상태를 객체로 관리할 때, 특정 속성만 업데이트하고 나머지 속성은 이전 상태를 그대로 유지 가능

import React, { useState } from 'react';

const PaymentForm = () => {
    const [objectState,setObjectState] =useState({
        name:'',
        price:0,
        today:null
    })

const inputTextChangeHandler=(event) =>{
    // name만 바뀐 값으로 업데이트, 나머지(price,today) 안 바뀐 값들은 이전 값 그대로
    setObjectState(prevState => ({...prevState, name:event.target.value}));
};
const inputNumberChangeHandler=(event) =>{
    setObjectState(prevState => ({...prevState, price:event.target.value}));
};
const inputDateChangeHandler=(event) =>{
    setObjectState(prevState => ({...prevState, today:event.target.value}));
};

  return (
    <form>
      <div className='new-payment__controls'>
        <div className='new-payment__control'>
          <label>이름</label>
          <input type='text' value={objectState.name} onChange={inputTextChangeHandler} />
        </div>
        <div className='new-payment__control'>
          <label>금액</label>
          <input type='number' value={objectState.price} onChange={inputNumberChangeHandler} />
        </div>
        <div className='new-payment__control'>
          <label>날짜</label>
          <input type='date' value={objectState.today} onChange={inputDateChangeHandler} />
        </div>
      </div>
    </form>
  );
};

export default PaymentForm;

 

객체 상태 부분 업데이트의 효율성

: 객체 상태에서 부분 업데이트를 사용하는 것이 리렌더링 자체를 막지는 못한다. 그러나 이 방법은 상태 관리의 복잡성을 줄이고, 불필요한 상태 변경을 피하여 리액트가 효율적으로 리렌더링할 수 있게 도와준다.

따라서 객체 상태에서 부분 업데이트 방법은 효율적이고 권장되는 방식이다.