[React] Component 안에서 Database 내용이 안떠요

Redux를 통해 Database 내용을 받아오려고 하는데 받기전에 Component 가 먼저 로딩되버려서 내용이 안뜨나요??

혹시 변수라던가 뭔가 내용을 표시하는데 필요한것을 render() 밖에서 선언하거나 쓴건 아닌지요?

밑에 예시에서는 props 로 fruit 이라는 오브젝트를 받아서 뿌려주는 Component인데 만약 저 fruit 안에 이세상 모든 종류의 과일의 정보와 사진등이 저장되어있다면 가져오는데 오래걸리겠죠?? 당연히 DB를 다 가져오기전에 Component 가 먼저 열릴거고 fruit 은 아직 다 가져오지 않았으니 빈 페이지만 보이게 됩니다.

export class Home extends Component {

fruit = this.props.fruit

render() {

return (

<div>{this.fruit}</div>

)

}

}

해결법은 아주 간단합니다.
저 fruit 변수를 render() 안에 선언하면 되죠!
state 의 내용이 변할때마다 Component 의 render() 함수가 변한다는 것은 React 의 가장 큰 특성중의 하나,
이걸 알고 있었지만 변수를 render() 밖에 선언한것에 대해서 인지를 못하고 있느라 좀 헤맸었죠 핳핳

어쨌든, 다음과 같이 바꾸면 문제 해결!

export class Home extends Component {

render() {

const fruit = this.props.fruit

return (

<div>{fruit}</div>

)

}

}

끗