[React] arrow function

@이유

> setInteval 공부를 하면서 useEffect안에서 setState 를 사용하면서 발생하는 문제점 때문에

 

---

Arrow function 

> * arrow function은 자신을 포함하는 외부 scope에서 this를 계승받는다.

useEffect(()=>{
  //(1)
  const interval = setInterval(()=>{
    let next = (index + 1) % loadingImages.length
    setIndex( next )
  },200)

  //(2)
  const interval = setInterval(()=>{
      setIndex( index => (index + 1) % loadingImages.length )
  },200)

  return () => clearInterval(interval);
}

setIndex() 를 할때 let next 를 넣게 되면 setInterval 안 함수안에 박제(?)된 값으로 저장된다.

그래서 위에 (1) 은 해당 값안에 있는 index을 사용하게 되고 (2) 은 상위 스코프에 있는 index를 사용하게 됩니다. 

 

https://dev.to/trentyang/replace-lifecycle-with-hooks-in-react-3d4n