[나만무/개발단계]Component LifeCycle

생명주기와 Hook

옛날 옛적 클래스 컴포넌트를 쓸때는
컴포넌트의 생명주기에 따라서 필요한 함수를 호출하였다.

https://ko.legacy.reactjs.org/docs/react-component.html#the-component-lifecycle

크게 보면 Mount(생성) - Update (업데이트) - UnMount(제거) 단계로 생명주기를 갖는다.
이 안에서도 세세한 사이클이 존재한다.

Mounting

1. render()를 통해 컴포넌트가 DOM에 생성,
2. componentDidMount()가 실행되어 Mount 작업 수행
   이때 setState()를 활용하여 상태 변경과 재렌더링을 진행한다.

Updating

props, state의 변화는 이 작업을 발생시킴.
1. shouldComponentUpdate
2. render
3. componentDidUpdate
의 단계를 수행

Unmounting

componenetWillUnmount 을 활용하여 이벤트 리스터를 제거하는 등의
clean up을 진행한다.

React Hooks

원래 함수형 컴포넌트에선 위처럼 컴포넌트의 생명주기를 컨트롤할 수 없었는데
이걸 가능하게 한게 Hook.

Mount : 컴포넌트가 Dom에 렌더링

function Example() {
 const [name, setName] = useState('hi'); 
  
 useEffect(() => {
   
 }, [])  
}

위에서 봤던 클래스 컴포넌트의 componentDidMount 의 역할을
빈 의존성 배열을 같은 useEffect가 수행한다.

Update : Props or State 변경

function Example({ id }) {
 const [name, setName] = useState('hi'); 
 
  // props로 받는 Id가 변경될때마다 이름을 Anas로 변경
 useEffect(() => {
   setName('ANAS');
 }, [id])  
}

UnMount : 컴포넌트가 DOM 에서 제거

function Example() {
  useEffect(() => {
    // 이 부분은 컴포넌트가 처음 Mount 될 때 한번만 실행
    console.log('컴포넌트가 나타났습니다.');

    // 오직 컴포넌트가 Unmount 될 때 한번만 실행
    return () => {
      console.log('컴포넌트가 사라졌습니다.');
    };
  }, []); // 의존성 배열이 비어있음

  return <div>Unmount 테스트 컴포넌트</div>;
}

hook이 등장하면서 확실히 컴포넌트의 생명주기를 학습하는데
더 쉽다고 예전에 리액트 갓 배울 때 지나가는 이야기로 들었었다.
그때는 사실 몰?루 했는데 지금 보니 hook이 정말 많은 것을 바꾸었구나... 싶다.