항해 28일차 (라이프사이클(클래스형 vs 함수형), react hooks)

항해 28일차

벌써 이번 주의 마지막 날이 되었다.
오늘은 한 주를 되돌아 보며 복습도 하고 다음 주를 보내기 위해 준비하는 날이다.
복습하면서 라이프 사이클(클래스형, 함수형)과 리액트 훅에 대해서 다시 공부해볼려고 한다.

그래서 라이프 사이클(클래스형, 함수형)과 리액트 훅에 대해 WIL을 써볼려고 한다.

라이프사이클

소프트웨어 개발에서 프로그램이 실행될 때, 특정한 단계들을 거치는 것을 의미한다. 이러한 라이프사이클은 일반적으로 초기화, 실행, 정지와 같은 단계들을 포함하며, 이들 단계는 프로그램이 실행되는 동안 반복적으로 수행될 수 있다. 즉 컴퓨터 프로그램이 실행될 때, 특정한 단계들을 거치는 것을 의미한다.

React 컴포넌트의 라이프사이클은 아래와 같이 세 가지 주요 단계로 구분할 수 있다.

1. 마운트(Mounting) : 컴포넌트가 최초로 DOM에 추가될 때 실행되는 단계이다. 마운트 단계에서는 constructor(), getDerivedStateFromProps(), render(), componentDidMount() 등의 라이프사이클 메소드가 호출된다.

2. 갱신(Updating) : 컴포넌트의 상태나 속성이 변경될 때 실행되는 단계이다. 갱신 단계에서는 getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate() 등의 라이프사이클 메소드가 호출된다.

3. 언마운트(Unmounting) : 컴포넌트가 DOM에서 제거될 때 실행되는 단계이다. 언마운트 단계에서는 componentWillUnmount() 라이프사이클 메소드가 호출된다.

React 컴포넌트의 라이프사이클은 컴포넌트가 생성, 갱신, 제거되는 과정에서 실행되는 여러 단계들을 포함한다. 이러한 라이프사이클 메소드와 훅을 이용하여, 컴포넌트의 상태와 속성을 관리하고, 컴포넌트가 렌더링되는 시점을 제어할 수 있다.

React와 같은 프론트엔드 라이브러리에서는 두 가지 주요한 라이프사이클 방법을 제공한다. 클래스형 컴포넌트에서는 "라이프사이클 메소드"를 사용하고, 함수형 컴포넌트에서는 "훅"을 사용한다.

이제 라이프사이클에 따른 클래스형과 함수형의 차이점을 보자.

클래스형

클래스형 컴포넌트에서는 render() 메소드를 중심으로 라이프사이클 메소드들이 호출된다. 마운트 단계에서는 constructor(), getDerivedStateFromProps(), render(), componentDidMount()가 실행된다. 갱신 단계에서는 getDerivedStateFromProps(), shouldComponentUpdate(), render(), getSnapshotBeforeUpdate(), componentDidUpdate()가 실행된다. 마지막으로 언마운트 단계에서는 componentWillUnmount()가 실행된다.

함수형

함수형 컴포넌트는 React Hook을 사용하여 라이프사이클을 제어한다. useEffect() Hook은 마운트, 갱신, 언마운트 단계에서 실행된다. useEffect() Hook 내부에서 return을 사용하여 언마운트 시에 정리(clean-up) 작업을 수행할 수 있다.

클래스형 컴포넌트와 함수형 컴포넌트 모두 마운트, 갱신, 언마운트 단계를 가지고 있으며, 각각의 라이프사이클 메소드와 Hook을 사용하여 컴포넌트의 상태와 속성을 관리할 수 있다. 최근에는 함수형 컴포넌트와 Hook을 이용한 라이프사이클 관리 방식이 더욱 선호되고 있다.

위에서 클래스형은 라이프사이클 메서드를 사용하고 함수형은 Hook을 사용한다.

그렇다면 Hook이라는 건 뭘까?

Hook

리액트(Hook)은 리액트의 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 메서드를 사용할 수 있도록 하는 기능이다. 즉 클래스형 컴포넌트에서 사용하던 state나 lifecycle 메서드를 함수형 컴포넌트에서도 사용할 수 있게 해주는 것.

Hook에는 많은 종류들이 있다.

Hooks

1. useState: 상태(state)를 추가하고, 상태 변경 함수를 제공한다. 함수형 컴포넌트에서 상태를 관리할 수 있도록 해준다.
2. useEffect: 컴포넌트가 렌더링 된 후 실행되는 코드를 작성할 수 있다. 주로 데이터를 가져오거나, DOM 요소를 조작하는 등의 작업을 처리할 때 사용한다.
3. useCallback: 함수를 캐싱하고 성능을 최적화할 수 있다. 불필요한 함수 재생성을 방지하고, 이전에 생성된 함수를 재사용한다.
4. useMemo: 계산 비용이 많은 함수의 결과를 캐싱할 수 있다. 렌더링 시에 매번 계산하는 것이 아니라, 이전에 계산된 값을 재사용하여 성능을 최적화한다.
5. useRef: DOM 요소나 변수를 참조할 수 있도록 해준다. 일반 변수나 객체를 사용할 때도 유용하다.

그 외에도 훅들은 많다..

즉 Hook을 사용하여 리액트의 생산성과 성능을 향상시켜준다.

마무리

오늘은 한 주를 되돌아 보면서 복습도 하고 라이프사이클, 훅에 대해서 깊게 살펴보았던 것 같다. 또한 공부 방법에 있어 좀 더 집중해야겠다는 반성하고 되었고, 다음주를 준비할 수 있는 부스터가 된 것 같다. 그리고 심화 과정을 공부하면서 강의를 좀 더 들어야 할 것 같고, 계속해서 공부해야 겠다..🔥