웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > react

React state값 변경, 업데이트 방법

Last Modified : 2020-08-28 / Created : 2020-05-16
18,169
View Count

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 값 변경 후 콜백 실행하기


react의 state값은 비동기로 실행됩니다. 즉 state값의 업데이트가 생각한 순서와 다르게 실행될 수 있습니다. 이런 문제를 해결하기 위해서 state 업데이트 후 콜백 함수를 사용하는 방법이 있습니다. 만약 값이 업데이트 된 이후 alert() 메시지를 출력하려면 아래와 같이 콜백을 수행할 수 있죠.
this.setState({
  siteName: 'webisfree'
}, showMsg() );

function showMsg() {
  alert('Done !!!');
}

이제 showMsg() 함수는 반드시 state 값이 업데이트 된 후에 수행되게 됩니다.



@ 컴포넌트 forceUpdate() 내장 함수로 렌더링하기

참고로 컴포넌트는 값을 변경 후 강제로 렌더링 할 수 있는 forceUpdate() 내장 함수를 가지고 있습니다. 방법은 아래와 같습니다.
this.siteName = '없음';
this.forceUpdate();
이 방법을 사용하면 setState()를 사용하지 않고도 값을 변경 후 웹페이지에 변경된 내용을 출력할 수 있습니다. 다만 성능에는 그리 좋지 못하므로 반드시 필요한 경우에만 사용하는 것이 좋습니다.


@ 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으로 변경되어 나타나게 됩니다.

Previous

[react] className을 조건에 따라 여러개 다이나믹하게 선언하기

Previous

[React] jsx, tsx 파일의 주석 작성하는 방법은?