setstate 관련 문제..

React
1

페이지 로드시에 axios로 api에서 데이터를 받은 후에 그 정보를 state에 저장하여 출력하였는데
이곳 저곳 찾아보니 setstate 시작시점이 return 이후라서 render를 두번 한다는 점을 발견하였습니다.
image
이런 경우엔 렌더 이전에 데이터를 어떻게 집어 넣어 렌더가 되기전에 갖고 있어야 할까요?
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)}
이런형태로 짜여있습니다.

2

constructor => render => componentDidMount => render 순으로 동작하기때문에
constructor 단계에서 미리 state에 값을 넣어주면 됩니다.
state를 내부에서 쓰시고 싶으시면 화면을 호출하기 전 다른곳에서 데이터처리를 끝내고 prop 로 넘겨 this.state = {getData: props.data} 등으로 할 수 있겠네요.

3

혹시 constructor 에서 axios 연결로 데이터를 받아서 state default값으로 먼저 선언할수있을까요?

4

아쉽게도 constructor를 promise로 실행할 수 없으므로 안됩니다. 화면전환하기 전에 처리 완료 한 후에 해당 화면 컴포넌트로 데이터와 함께 로드하세요.

5

그렇다면 constructor에서 state를 임의로 작성하고 did mount 시에 axios 결과값을 setState로 해서 해당 컴포넌트를 2번 렌더링 하는 방법 이외엔 다른 방법이 없을까요?

6

해당화면을 불러오기 전 화면에서 미리 api요청해서 데이터 받고나서, 해당화면에서 데이터를 받으면 되지 않을까요?

7

처음에 언급했던 컴포넌트 호출전 데이터를 처리해서 넘겨주는 방법을 쓰시면 됩니다. ~~