React에서 데이터를 사용하고 추가 및 변경할 수 있는 state에 대하여 알아봅니다.


# React state 알아보기
컴포넌트에서 데이터를 선언하고 변경하기 위해 state를 사용합니다. state의 값을 변경하면 화면 뷰의 렌더링에도 함께 반영되게됩니다. 즉 값이 변경될 수 있는 컴포넌트 내부 데이터에는 state를 사용합니다.

멈저 컴포넌트에서 state에 값을 최초 선언하는 방법입니다.
class myApp extends components {
  constructor() {
    super();
 
    // State 초기 선언하기
    this.state = {
      siteName: 'webisfree',
      siteVisit: {
        today: 30
      }
    };
  }
}

컴포넌트 모듈 내부에 state를 사용하여 선언하였습니다. 사이트이름과 방문자 정보가 포함되어 있습니다.


! state 값 가져오기
값을 가져오는 방법입니다. 객체의 프로퍼티를 업데이트 하는 방법과 동일합니다.
this.state.siteName

값을 가져오는 방법은 사실 특별할 게 없습니다. 객체의 프로퍼티에 접근하는 방법과 동일합니다.

이번에는 값을 업데이트, 변경하는 방법을 알아봅니다.


! react state 값 변경하기
react에서 state를 변경할 때는 직접 값을 변경하지 않고 this.setState()가 사용됩니다. 이렇게 해야 react에서는 state의 값이 변경된 것을 알고 새롭게 렌더링이 바뀌게 됩니다.

"참고) state를 사용하는 방법은 다소 번거롭기는 하지만 React의 장점 중 하나로 계속해서 데이터를 확인하지 않기 때문에 성능 면에서 다른 프레임워크보다 우수할 수 있습니다."

this.setState({ 변경할 값 })


먼저 state의 값은 비동기 방식으로 업데이트가 이루어집니다. 이제 '없음'으로 변경해보겠습니다.
this.setState({
  siteName: '없음'
});

이제 state 내부의 siteName 값은 '웹이즈프리'에서 '없음'으로 변경되었습니다.


@ state 내부의 프로퍼티가 객체인 경우 방법
state에 선언된 프로퍼티가 문자나 숫자 등의 타입이 아닌 객체, 배열이라면? 이 경우 위의 방법으로는 원하는 결과를 얻을 수 없습니다. 이때는 아래와 같은 방법으로 수행합니다.
this.setState({
  siteVisit : {
    ...this.state.siteVisit ,
    today : !this.state.siteVisit.today
  }
})

이 방법은 deep merge 방식으로 값을 변경하였습니다. 내부에 객체를 복사해 추가한 부분이 눈에 띕니다. 객체 복사는 Object.assign()을 사용할 수 도 있습니다.

객체 복사 방법 더 알아보기 >
https://webisfree.com/2020-02-17/[자바스크립트]-객체를-새로운-객체로-복사-clone하는-방법

다른 방법으로 아래와 같이 변경할 수도 있죠.
this.setState(thisState => {
  let siteVisit = { ...thisState.siteVisit };
  siteVisit.today = 0;
  return { siteVisit };
});

setState()를 사용한 내부 함수에서 변경할 객체 값을 복사한 뒤에 반환하였습니다. 이제 siteVisit.today 값은 0으로 변경되어 나타나게 됩니다.