[React] React의 상태 관리

[React 상태 관리]

-  React는 변수 대신 state를 사용
-  state 왜 사용?
 >> state가 변경되면  새로고침 없이 HTML이 자동으로 리렌더링 된다. 
(변수를 쓰면은 새로고침해야 바뀜)

 

1. setState
- 클래스형 컴포넌트에서 사용하는 방법
- 요즘은 클래스형 컴포넌트 잘 사용하지 않음

2. useState
- 함수형 컴포넌트에서 state 사용하는 방법 (가장 기본적인 방법인듯..)
- React Hook 라이브러리에 포함된 함수

import React, { useState } from 'react';

const CalResultView = ({inputData, inintCalResult}) => {            //{inputData}  => 부모로 부터 받아온 props
    const [ inputs, setInputs ] = useState({        //state 지정 //const [ 상태 값 저장 변수 , 상태 값 갱신 함수 ] = useState(상태 초기 값)
        calResult : '',
        calculating : false  //계산 누르면  F->T    클리어 누르면 T -> F
    });

    const { calResult, calculating } = inputs;   //비구조화 할당
    

    const calculatingResult = (e) => {
      if(!calculating){   //계산
        setInputs({             //setState를 구현
          ...inputs,          //기존의 input 객체 복사 (함수형 컴포넌트는 자동으로 객체 안 만들어주기 때문에)
          calResult : eval(e.target.value) ,      //값 수정
          calculating : true
        });
      }else{         //클리어
        setInputs({       //계산 완료시 c버튼을 누르면 초기화
          calResult : '',
          calculating : false
        });
      }

      inintCalResult(calculating);  //부모에게 초기화 전달
      console.log(calculating)
    }

    return (
        <ResultDiv>
            <CircleButton onClick={calculatingResult}  value={inputData} calculating={calculating}> {calculating?"C":"="}</CircleButton>  {/** 함수 호출 시 this를 쓰지 않음 */}
            {calResult} 
        </ResultDiv>
    );
};

3. useReducer
- React Hooks 라이브러리에 포함된 함수
- 특정 액션에 따라 state 값이 달라져야 하는 경우 사용
- setState함수를 여러번 사용하지 않아도 되서 재사용성이 높다.

 

4. Redux
- 규모가 큰 프로젝트에서 가장 많이 사용 하는 상태 관리 라이브러리 (실제 업무에서 가장 많이 사용하는 듯.. 채용공고만 봐도..)
- 하위 컴포넌트가 복잡하게 많은 경우 props를 계속 해서 전달해줘야하는 불편함이 있는 데, 

  이 때 리덕스를 사용하면 모든 component가 props없이 state를 직접 꺼낼 쓸 수 있다.
- 또한 store에서 상태값 저장과 액션로직을 작성하기 때문에 (컴포넌트는 요청만 한다)
  상태관리가 용이하고 버그가 일어났을 때도 해결하기 수월함
 
- 컴포넌트안에 dispatch를 통해 Reducer에게 액션을 요청한다.