Intro
내 머릿속에 있는, 이해한 듯 안 한듯 희미하게 잔상처럼 남아있는 내용을 나의 단어로 풀어서 작성해보려고 합니다. 기술블로그를 쓸 때는 정확한 정보를 전달해야 한다는 강박관념 같은게 있었습니다. 정확한 Reference를 찾아서 짜집기해서야 글 한 편이 겨우 나왔습니다. 그러한 글쓰기로도 분명히 배우는 점이 있습니다. 많은 리서치를 하게 됩니다. 하지만, 그것을 온전히 내 것으로 소화한 것 같은 기분이 들지 않았습니다. 그냥, 보여주기 식의 글이 내 블로그에 하나 추가될 뿐이었습니다.
공부한 내용을, 이해한 내용을 나의 단어로 풀어서 한 번 작성해보려고 합니다. 두서없이 마구 써내려가보려고 합니다. 그 다음에서야 Reference를 찾아보고 살을 덧붙여 가보려고 합니다.
Level 2 방학때 만들겠다던 나의 블로그가 아직 완성되지 않았습니다. 일단은 Velog에 매일매일 써내려가볼까 합니다.
본문: 함수 컴포넌트의 LifeCycle Method
함수 컴포넌트는 클래스 컴포넌트와는 달리 componentDidMount, componentDidUpdate, componentWillUnmount 등의 LifeCycle Method 가 없습니다. 단, useEffect hook을 사용하여 LifeCycle Method를 흉내낼 수는 있습니다.
클래스 컴포넌트는 React에 의해 인스턴스화되어, Mount → Unmount 까지의 흐름이 제어되지만, 함수 컴포넌트는 클래스 컴포넌트와는 달리 인스턴스화되지 않고, 호출되어 실행 후 return 값을 반환하고 종료되기 때문에 LifeCycle이 없기 때문입니다.
따라서, 함수 컴포넌트에서는 클래스 컴포넌트와 같이 컴포넌트의 LifeCycle 을 고려하여 구현하는 것은 바람직하지 않습니다. useEffect Hook을 사용하여 LifeCycle Method를 흉내내는 경우에도, 컴포넌트의 mount, update 여부에 따라서 특정 로직을 실행시키는 것이 아니라, dependencies의 값이 변경된 경우에 특정 로직을 실행시키도록 하여 React의 DOM 반영 시점을 염두에 두지 않는 것이 중요하겠습니다. 다만, 최초 Mount되었을 때에만 특정 로직을 실행하겠다(componentDidMount 타이밍에 무엇을 하겠다)는 로직은 꽤나 빈번하게 사용됩니다. 이러한 로직은 별도의 hook을 사용하면 편리하게 할 수 있습니다.
const useEffectOnce = (fn) => {
useEffect(fn, []);
}