Tip for React javascript

React 를 사용해 템플릿 작업을 하면서 알게된 팁들을 하나씩 적어가겠습니다.

 

첫번째 TIP.  this.setState 후처리 TIP

setState 이후에 수행하고 싶은 작업이 있을 경우 아래처럼 작성하셔서 진행 가능합니다. 

promise 객체로 setState 를 한번 감싸서 던져주시면. then 구문을 통해서 후처리가 가능해집니다.

 

popupClicked = (key, value) => {
  return new Promise((resolve) => {
    this.setState(update(this.state, {[key]: {$set: value}}),()=>{
      resolve(someValue)
    })
  })
}

this.popupClicked('key','value').then((someValue)=>{
	this.props.history.push(`/app/${someValue}/page`)
})

 

두번째 Tip. 여러분이 array 를 이용하여 rendering 을 할때 Tip

이건 사실 react tip 이 아니라 기본적인 javascript 에 대한 이해의 부재이다.

select 태그를 사용할 때, array.map() 을 이용하여 filter 링을 해서 return  값들만 option 에 넣은 경우. 가끔 key 가 중복된다는 이슈가 있을 수 있다. 그런경우, 혹시나 자신이 map 의 return 을 아무것도 넘기지 않는 경우가 없는지 확인해보자.