React : state 변경 방법 componentDidMount 활용 / setState , setTimeout 사용

🍒Jooooooo_eun🍒·2021년 12월 8일
0

React basic

목록 보기
4/16
post-thumbnail

우선 리액트 공식문서를 보면

컴포넌트 생명주기
모든 컴포넌트는 여러 종류의 “생명주기 메서드”를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다. 이 생명주기 도표를 필요할 때마다 활용하면 좋습니다. 아래 목록에서 자주 사용되는 생명주기 메서드를 진하게 표시했습니다. 나머지 것들은 상대적으로 자주 사용되지 않습니다.

라고 나와있다.
mount(마운트) 될 때 dom은 이 순서대로 호출되는데, 호출의 내용을 파악하면 좋다

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

여기서 componentDidMount 를 활용해 state를 변경해보자!


class 선언 내부 바로에 붙여준다

           componentDidMount() {
              setTimeout(() => {
                //변경함수 this.setState
                this.setState({
                  count: this.state.count + 1
                });
              }, 1000);
            }

해당 코드를 붙여넣으면 dom 생성과 함께
setTimeout 함수를 사용해 1초 뒤에 state 값을 바꿔줄 수 있다.

1초뒤 숫가자 1로 변경됨!

this.setState 부분은 이런식으로도 적어낼 수 있다.

	this.setState((previousState) => {
   		 const newState = { count: previousState.count + 1 }
    		 return newState;
	})
profile
먹은만큼 성장하고 싶은 초보 개발자의 끄적끄적 개발메모장 ✍

0개의 댓글