[React] Component 생명주기(LifeCycle)와 Hooks

리액트의 컴포넌트 생명주기(Lifecycle)는 컴포넌트가 생성되고 파괴될 때까지의 여러 단계를 설명합니다. 이러한 생명주기는 주로 클래스 기반 컴포넌트에서 중요한 역할을 합니다. 각 단계는 특정 시점에서 호출되는 메서드(생명주기 메서드)로 구성되어 있습니다. 여기에는 주로 다음과 같은 단계가 있습니다:

1. 마운팅(Mounting)
컴포넌트가 DOM에 삽입되는 단계입니다.

- constructor()
  - 컴포넌트가 생성될 때 가장 먼저 실행됩니다.
  - 초기 상태를 설정하거나 메서드를 바인딩하는 데 사용됩니다.
-  static getDerivedStateFromProps(props, state)
  - 컴포넌트가 생성될 때와 컴포넌트가 새로운 props를 받을 때 호출됩니다.
  - 상태를 props에 따라 업데이트하는 데 사용됩니다.
-  render()
  - 컴포넌트의 UI를 렌더링하는 메서드입니다.
  - 순수 함수로서, this.props와 this.state에 접근할 수 있지만, 이를 변경하면 안 됩니다.
-  componentDidMount()
  - 컴포넌트가 마운트된 직후, 즉 DOM 트리에 삽입된 후에 호출됩니다.
  - 네트워크 요청이나 DOM에 직접적인 접근 등의 작업을 수행하는 데 적합합니다.

2. 업데이트(Updating)
props 또는 state의 변경으로 컴포넌트가 업데이트되는 단계입니다.

-  static getDerivedStateFromProps(props, state)
  - 컴포넌트가 새로운 props를 받을 때 호출됩니다.
-  shouldComponentUpdate(nextProps, nextState)
  - 컴포넌트가 리렌더링 여부를 결정할 때 호출됩니다.
  - 성능 최적화에 유용합니다. 기본적으로 항상 true를 반환합니다.
-  render()
  - 컴포넌트를 리렌더링합니다.
-  getSnapshotBeforeUpdate(prevProps, prevState)
  - 실제 DOM 변경이 일어나기 직전에 호출됩니다.
  - DOM의 현재 상태(예: 스크롤 위치)를 캡처하는 데 사용될 수 있습니다.
-  componentDidUpdate(prevProps, prevState, snapshot)
  - 업데이트가 발생하고 나서 DOM에 변경이 반영된 후에 호출됩니다.
  - 이전 props와 state를 이용하여 특정 작업을 수행할 수 있습니다.

3. 언마운팅(Unmounting)
컴포넌트가 DOM에서 제거되는 단계입니다.

-  componentWillUnmount()
  - 컴포넌트가 언마운트되고 파괴되기 전에 호출됩니다.
  - 타이머 제거, 네트워크 요청 취소, 컴포넌트에 의해 생성된 구독 해제 등의 정리 작업을 수행합니다.

 

---

리액트의 훅(Hooks)은 함수형 컴포넌트에서 상태 관리와 리액트의 다른 기능들을 "훅"하는 데 사용됩니다. 클래스 기반 컴포넌트에서만 가능했던 상태 관리, 라이프사이클 메소드 등의 기능을 함수형 컴포넌트에서도 사용할 수 있게 해 줍니다. 여기 대표적인 훅들과 그들의 용도를 설명하겠습니다:

1. useState

• 용도: 컴포넌트의 상태 관리.
• 사용법: [state, setState] = useState(initialState) 형태로 사용됩니다.
• 예시: const [count, setCount] = useState(0) - count는 상태 변수, setCount는 이 변수를 업데이트하는 함수입니다.

2. useEffect

• 용도: 사이드 이펙트(side effects)를 수행합니다 (데이터 fetching, subscriptions, 수동 DOM 조작 등).
• 사용법: useEffect(() => { ... }, [dependencies]) 형태로 사용됩니다.
• 예시: 컴포넌트가 마운트될 때와 특정 값이 변경될 때 작업을 수행합니다.

3. useContext

• 용도: 컨텍스트(Context)의 값을 읽기 위해 사용됩니다.
• 사용법: const value = useContext(MyContext) 형태로 사용됩니다.
• 예시: 컨텍스트에 저장된 현재 테마 값이나 사용자 정보를 읽을 수 있습니다.

4. useReducer

• 용도: useState보다 복잡한 상태 로직을 관리할 때 사용됩니다.
• 사용법: [state, dispatch] = useReducer(reducer, initialState) 형태로 사용됩니다.
• 예시: 상태 업데이트 로직을 컴포넌트 바깥에 작성하여 복잡한 컴포넌트를 더 관리하기 쉽게 만들 수 있습니다.

5. useCallback

• 용도: 렌더링 성능을 최적화하기 위해 사용됩니다. 주로 자식 컴포넌트에 props로 전달되는 함수를 메모이제이션합니다.
• 사용법: const memoizedCallback = useCallback(() => { ... }, [dependencies]) 형태로 사용됩니다.

6. useMemo

• 용도: 렌더링 성능을 최적화하기 위해 사용됩니다. 값의 메모이제이션에 사용됩니다.
• 사용법: const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]) 형태로 사용됩니다.

7. useRef

• 용도: ref를 생성합니다. DOM에 직접 접근할 때, 또는 렌더링 간에 데이터를 유지할 때 사용됩니다.
• 사용법: const myRef = useRef(initialValue) 형태로 사용됩니다.

8. useLayoutEffect

• 용도: DOM 변경 후, 화면에 그 변화가 반영되기 바로 전에 동기적으로 코드를 실행할 때 사용됩니다.
• 사용법: useEffect와 동일하지만, 타이밍이 다릅니다.

9. useImperativeHandle

• 용도: 자식 컴포넌트에서 부모 컴포넌트에 ref를 노출할 때 사용합니다.
• 사용법: useImperativeHandle(ref, () => ({ ... }), [dependencies]) 형태로 사용됩니다.

훅은 함수형 컴포넌트를 더 강력하고 유연하게 만들어 주며, 리액트 개발에서 중요한 역할을 합니다. 훅을 사용함으로써 클래스 기반 컴포넌트의 복잡성을 피하고, 더 간결하고 읽기 쉬운 코드를 작성할 수 있습니다.