React useState, useEffect의 사용

useState의 사용

const state = {
  id: '1234',
  place: '선릉',
}
const { id, place } = state

=> 객체 구조분해 할당

const arr = ['1', '2', 'hooks']
const [a, b, c] = arr

a
b
c

=> 배열 구조분해 할당
const [state, setState] = useState(initialState);
useState는 배열을 반환한다.
첫번째에는 state
두번째는 setState 즉, state 변환

class : this.setState({ key: 'value'(바꿀 값)})
func : setState('value')

일반적으로 state와 setState를 convention으로

아주 간단한 버전의 useState

아주 간단한 버전의 useState

const useState = (init = undefined) => {
  let value = init

  const getter = () => value // 클로저
  const setter = next => (value = next) // 클로저

  return [getter, setter]
}

const [state, setState] = useState('클로저')

state() // '클로저'
setState("어려워!") 
state() // '어려워!'

useEffect

라이프 사이클 구현을 위해 만들어졌다.
CDM, CDU, CWU같은 각각의 lifecycle을 하나로 통합한 것이다.

useEffect(function);

useEffect(() => {}, [count])

두번째 인자에 빈배열을 넣으면 CDM와 같다.
두번째 인자에 state를 넣으면 해당 state가 될 때마다 useEffect가 작동된다.
위의 예시에서는 count가 변화하면 첫번째 인자인 함수가 실행된다.
count라는 값의 변화만 추적하는 것

useEffect(() => {
	console.log("componentDidUpdate")
})
// 랜더링 될 때마다 실행

useEffect(() => {
	console.log("componentDidMount")
	return () => console.log("componentWillUnmount")
}, [])
// 첫 랜더링 할 때만 _console.log("componentDidMount")_실행 CDM
// return 하면 CWU

useEffect(() => {
	console.log("componentDidMount")
	console.log("componentDidUpdate") // + shouldComponentUpdate
  return () => console.log(???)
}, [state])
// 일반 한 번 실행
// state가 update 될 때 마다 계속 실행
// 즉, Mount 될 때 및 update 될 때 둘 다 실행하고 싶을 때 쓴다. 
// return으로 넘겨주는 함수는 cleanup 함수라고 한다. 

만약 처음 Mount 하고 싶지 않고 다음 업데이트부터 실행하고 싶을 때는 조건문을 주면 된다.

isMount = false

useEffect(() => {
  if (!isMount) {
  console.log('CDM')
  setIsMounted(true)
  return 
  }

  console.log('CDU')
}, [state])

=> 처음 Mount 될 때 실행하고 state가 Update 될 때마다 console.log('CDU')가 실행된다

---

// WRONG!!
useEffect(() => {
	console.log("CDM 쓰고 싶어요")
}, [])

useEffect(() => {
	console.log("CDU 쓰고 싶어요")
}, [state])

cleanup

useEffect(() => {
 const timer =  setInterval(function,1000)
 return () => clearInterval(timer)
})

useEffect(() => {
  window.addEventListener('scroll', function)
  return window.removeEventListener('scroll', function)
}, [])

useEffect 사용하는 법에 대해서 react 공식 홈페이지를 참조하면 좋지만 개인적으로 바로 머리에 들어오지는 않았다.
특히 wrong에 작성되어 있는 useEffect의 두번째 인자에 빈 배열을 넣어서 CDM을 하는 것이 좋지 않은 방법인 건 알지만 해당 방법을 사용하지 않고 CDM과 똑같이 작동하도록 작성하는 방법은 예시대로 따라쳐봐도 잘 모르겠다.
앞으로 react를 사용하면서 정확하고 올바른 방법으로 useEffect를 사용할 수 있도록 반복학습을 꾸준히 해야겠다.