React, Redux, Firestore를 연동해서 사용했고요 밑에 나오는 예시를 통해 알아볼게용
자 여기 country.com 이라는 사이트가 있습니다.
여기는 나라 목록이 쭉 있고 원하는 나라를 클릭하면 나라 정보가 쫙 나오는 아주 시시한 사이트죠.
코드는 요로코롬 생김
South Korea 를 클릭했더니 country.com/south-korea 로 주소이동을 뙇 했습니다.
(slugify 라는 패키지를 이용해서 South Korea를 south-korea로 변경한후 param에 넣어주었군요!)
South Korea의 정보가 화면에 쫙 표시되었습니다.
대충 훑어보고 다른나라 정보를 보고싶어 뒤로 간후 이번엔 China 를 눌렀습니다.
그랬더니 아 글쎄, South Korea의 내용이 0.2초 동안 나오고 China로 바뀌네요?
어떻게 된 노릇일까 곰곰히 생각에 잠긴 개미군,
아하, 데이터베이스를 불러오는 동안 기존 중앙 state (redux store)에 저장되어 있던 내용(South Korea)이 먼저 나오고 데이터베이스가 업데이트 되면서 render()가 다시 실행되어 China가 나오는구나!
하면서 다시 고민에 잠긴 개미군, 그렇다면 어떻게 해야할까..
개미군의 머리속엔 예전에 얼핏봤던 lifecycle method들이 떠오르는군요.
다시 검색을 하고 componentDidUpdate 를 쓰기로 결심합니다.
componentDidUpdate 안에서 console.log(this.props.countryInfo) 를 찍어보자.. 데헷, 새로 클릭한 나라의 정보만 콘솔에 나오기 시작했습니다. 야호 성공
state를 하나 만들고 그 안에 비어있는 countryInfo를 선언한다음 componentDidUpdate 에서 countryInfo 안에 내용을 넣어주면 끝
급하게 마무리 하는 감이 없잖아 있지만 다음코드로 완성 뿅
componentDidUpdate 안에 if 문 안넣어주면 무한루프 도는건 함정
자 여기 country.com 이라는 사이트가 있습니다.
여기는 나라 목록이 쭉 있고 원하는 나라를 클릭하면 나라 정보가 쫙 나오는 아주 시시한 사이트죠.
코드는 요로코롬 생김
export class Country extends Component {
render() {
const { countryInfo } = this.props
if (countryInfo) {
return (
// Country info
)
} else {
return (
// Loading spinner
)
}
}
}
const mapStateToProps = (state) => {
return {
countryInfo: state.firestore.ordered.countryInfo
}
}
export default compose(
firestoreConnect(props => [{
collection: 'countries',
where: ['countryName', '==', props.match.params.countryName]
}]
),
connect(mapStateToProps),
)(Country)
South Korea 를 클릭했더니 country.com/south-korea 로 주소이동을 뙇 했습니다.
(slugify 라는 패키지를 이용해서 South Korea를 south-korea로 변경한후 param에 넣어주었군요!)
South Korea의 정보가 화면에 쫙 표시되었습니다.
대충 훑어보고 다른나라 정보를 보고싶어 뒤로 간후 이번엔 China 를 눌렀습니다.
그랬더니 아 글쎄, South Korea의 내용이 0.2초 동안 나오고 China로 바뀌네요?
어떻게 된 노릇일까 곰곰히 생각에 잠긴 개미군,
아하, 데이터베이스를 불러오는 동안 기존 중앙 state (redux store)에 저장되어 있던 내용(South Korea)이 먼저 나오고 데이터베이스가 업데이트 되면서 render()가 다시 실행되어 China가 나오는구나!
하면서 다시 고민에 잠긴 개미군, 그렇다면 어떻게 해야할까..
개미군의 머리속엔 예전에 얼핏봤던 lifecycle method들이 떠오르는군요.
다시 검색을 하고 componentDidUpdate 를 쓰기로 결심합니다.
componentDidUpdate 안에서 console.log(this.props.countryInfo) 를 찍어보자.. 데헷, 새로 클릭한 나라의 정보만 콘솔에 나오기 시작했습니다. 야호 성공
state를 하나 만들고 그 안에 비어있는 countryInfo를 선언한다음 componentDidUpdate 에서 countryInfo 안에 내용을 넣어주면 끝
급하게 마무리 하는 감이 없잖아 있지만 다음코드로 완성 뿅
export class Country extends Component {
state = {
countryInfo: "",
}
componentDidUpdate = () => {
if (!this.state.countryInfo) {
this.setState({
countryInfo: this.props.posts
})
}
}
render() {
if (this.state.countryInfo) {
return (
// Country info
)
} else {
return (
// Loading spinner
)
}
}
}
const mapStateToProps = (state) => {
return {
countryInfo: state.firestore.ordered.countryInfo
}
}
export default compose(
firestoreConnect(props => [{
collection: 'countries',
where: ['countryName', '==', props.match.params.countryName]
}]
),
connect(mapStateToProps),
)(Country)
componentDidUpdate 안에 if 문 안넣어주면 무한루프 도는건 함정
Comments
Post a Comment