class형 컴포넌트
에서 componentDidMount
등의 컴포넌트의 생명주기
를 활용하여 상태값을 변경하는 등의 작업을 실행할 수 있습니다.
함수형 컴포넌트
에서도 마찬가지로 컴포넌트의 생명주기
를 참조하여 작업을 할 수 있습니다.
React
는 state
의 상태를 항상 체크하듯이, 마찬가지로 component
의 상태도 항상 체크합니다.
컴포넌트가 최초로 render 되었을 때를 의미합니다.
상태값과 관련없이 render의 완료시점을 봅니다.
상태값 state
가 변경된 시점을 봅니다.
컴포넌트의 구독해제
시점입니다.
useEffect
의 콜백
이 모두 실행된 시점입니다.
class형 컴포넌트
에서생명주기함수
를 사용할 수 있습니다!
방법을 모르신다면, 한번 찾아보시는 것을 추천합니다.
위에 서술한 생명주기
를 바탕으로 useEffect
내의 콜백
이 실행됩니다.
// ..code
const Table = () => {
const [count,setCount] = useState(0)
const [value,setValue] = useState('')
useEffect(()=>{
setValue('랜더됐네용')
},[]) // componentDidMount
useEffect(()=>{
setValue('숫자가 올라갔어!')
return () => {
console.log('나 effect됨!') // componentWillUnmount
}
},[count]) // componentDidUpdate
return(
<>
<button onClick={ () => { setCount((prev) => prev+1) } }>
Click me
</button>
{count} // state
{value} // state
</>
)
}
버튼 클릭시 countstate
가 1씩 증가하는 컴포넌트 입니다.
useEffect
의 두번째 인자
는 값이 비어있을때와 채워져 있을때로 나뉩니다.
ComponentDidMount
ComponentDidUpdate
state
)는 두번째 인자로 적은 'state'
.최초 Table
랜더시 valuestate
는 '랜더됐네용'
으로 변경됩니다.
여기서 첫번째 useEffect
는 컴포넌트가 랜더될때까지 기다려야 하므로, 코드를 읽는 중 useEffect
를 만나도 실행하지 않고 기다리게 됩니다.
이 후, componentDidMount
가 되면 setValue
를 실행합니다.
Table
호출 ->useEffect
대기Table
랜더완료componentDidMount
조건의useEffect
실행- 콜백인
setValue
실행{value}
='랜더됐네용'
두번째 useEffect
는 countstate
가 변경 되는 시점을 기다리게 됩니다. (componentDidUpdate
)
onClick
으로 countstate
+1 증가state
변경으로Table
컴포넌트reRender
->두번째 useEffect
의두번째 인자
인count
바라봄onClick
으로count
는1
이 되었지만, 아직두번째 useEffect
의count
는0
이었던 상태.- 이는
생명주기
componentDidUpdate
와 같으므로두번째 useEffect
는 실행됩니다.- 콜백인
setValue
실행{value}
='숫자가 올라갔어!
useEffect
는 생명주기
를 항상 참조하므로, 그 시점을 파악하며 사용하는 것이 중요합니다.