[TIL] 11.6 react life cycle/ fetch

오늘 한일

signin 을 했을 때 token 값이 바로 적용이 되지 않았다. render 과정에서 생긴 문제 인것 같았다. 

this.setState({success: result.success})
sessionStorage.setItem("token",result.token)
alert(result.message)

setState로 먼저 render가 돼고 sessionStorage에 값을 저장해 주기 때문에 바로 적용이 되지 않았던 것이다. 

sessionStorage.setItem("token",result.token)
alert(result.message)
this.setState({success: result.success})

이렇게 순서를 바꿔 주어 해결을 하였다. react lifecycle에 대해서 좀더 자세히 알아야 할것 같아서 간단히 살펴 보았다. 

 

constructor

생성자 함수로 컴포넌트가 새로 만들어 질때 마다 호출 된다.

 

componentDidMount

컴포넌트가 화면에 나타나게 됐을 때 호출됩니다. 해당 컴포넌트에서 필요로 하는 데이터를 요청하거나 DOM의 속성을 읽거나 직접 변경하는 작업을 진행한다.

 

componentDudUpdate

이 API는 컴포넌트에서 render() 를 호출하고난 다음에 발생한다.

 

componentWiiUnmount

등록했었던 이벤트를 제거하고  setTimeout 을 걸은것이 있다면 clearTimeout 을 통하여 제거를 한다. 

 

참고 블로그 : https://velopert.com/3631

 

fetch 

    let message = {
      method: "POST",
      body: JSON.stringify(this.state),
      headers: {"Content-type": "application/json"}
      }

    let result = await fetch("http://127.0.0.1:3000", message)
      .then(date => {return date.json()})

GET/HEAD 에는 body가 없기 때문에 body를 빼주어야 한다.