페이지 로드시에 axios로 api에서 데이터를 받은 후에 그 정보를 state에 저장하여 출력하였는데
이곳 저곳 찾아보니 setstate 시작시점이 return 이후라서 render를 두번 한다는 점을 발견하였습니다.
이런 경우엔 렌더 이전에 데이터를 어떻게 집어 넣어 렌더가 되기전에 갖고 있어야 할까요?
constructor(props) {
super(props);
this.state = {
getData :
}
}
componentDidMount() {
this.getData();
}
getData = () => {
axios.get(“api”,{params:paramstring}).then(response=>{this.setstate({getData:response.data})})
}
componentWillUnmount () {clearTimeout(this.getData)}
이런형태로 짜여있습니다.
constructor => render => componentDidMount => render 순으로 동작하기때문에
constructor 단계에서 미리 state에 값을 넣어주면 됩니다.
state를 내부에서 쓰시고 싶으시면 화면을 호출하기 전 다른곳에서 데이터처리를 끝내고 prop 로 넘겨 this.state = {getData: props.data} 등으로 할 수 있겠네요.
혹시 constructor 에서 axios 연결로 데이터를 받아서 state default값으로 먼저 선언할수있을까요?
아쉽게도 constructor를 promise로 실행할 수 없으므로 안됩니다. 화면전환하기 전에 처리 완료 한 후에 해당 화면 컴포넌트로 데이터와 함께 로드하세요.
그렇다면 constructor에서 state를 임의로 작성하고 did mount 시에 axios 결과값을 setState로 해서 해당 컴포넌트를 2번 렌더링 하는 방법 이외엔 다른 방법이 없을까요?
해당화면을 불러오기 전 화면에서 미리 api요청해서 데이터 받고나서, 해당화면에서 데이터를 받으면 되지 않을까요?
처음에 언급했던 컴포넌트 호출전 데이터를 처리해서 넘겨주는 방법을 쓰시면 됩니다. ~~