개발

[React] 라이프사이클(클래스형 vs 함수형), react hooks

0hyeon의 2023. 2. 20. 10:24
반응형

마운트, 언마운트 DOM과 유사

 

1.라이프사이클 

리액트에서는 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생하는데 

라이프 사이클은 클래스형으로, 함수형은 Hook으로 구현된다.

 

 

1-2.라이프사이클 클래스형

공식 사이트에서도 '잘 사용하지 않는 생명주기 메서드'로 언급한

라이프 사이클 메서드에 대해서는 이 포스팅에서도 메서드의 종류만 확인하고 넘어가겠습니다. 

 

 

  • 마운트(컴포넌트 생성될때) 사용  : 
    • constructor
    • getDerivedStateFromProps
    • render
    • componentDidMount
  • 업데이트시 사용 : 
    • getDerivedStateFromProps
    • shouldComponentUpdate
    • componentDidUpdate
  • 언마운트 (화면에서 사라질때) 사용: 
    • componentWillUnmount

 

2.라이프사이클 함수형

  • 도입된 이유 :
    • 라이프사이클 메서드에서는 불필요한 로직들이 있고, 버그가 쉽게 발생하고, 무결성을 해치기 쉽기때문
    • 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다는 이점
  • 사용규칙
    • 최상위에서 Hook을 호출하고 조건문,반복문,중첩함수로 Hook을 실행하면안된다.
    • 함수 컴포넌트에서만 Hook을 호출하여야한다. (일반js에서는 X )

 

2-1.React hooks (Funtional Component 생명주기)

해당 내용들은 포스팅에서 따로 깊게 다뤄둔 hook관련 포스팅이 있어

별도의 코드설명은 생략하고 종류만 확인하겠습니다.

 

  • 2-1.useState : 상태를 업데이트 해준다.
  • 2-2.useEffect : 화면 최초랜더링시, 재랜더링시 발생하는과정에서 특정작업을 수행
  • 2-3.useContext : Context API 사용시 value값을 사용 
  • 2-4.useReducer : useState의 대체 함수로 컴포넌트 상태 업데이트 로직을 컴포넌트에서 분리
  • 2-5.useRef : DOM에서 해당 요소에 스크롤정보, 태그의 속성 정보들을 가져옴 (옵저버, 드롭다운, 스크롤이벤트 활용)
  • 2-6.useMemo : 연산이 오래걸리는 값을 메모이제이션하여 재사용 의존성배열에 의해 재랜더링시 실행
  • 2-7.useCallback : 메모이제이션된 함수를 재사용 의존성배열에 의해서 재랜더링시 실행됨

 

3.custom hook 만들기

리액트에서는 재사용성을 위해서 커스텀훅을 만들곤 하는데 useState와, OnChange 이벤트에서 발생하는 일련의 코드들을 묶어서 재사용한다. 

import { useState } from 'react'

const useInput = () => {
  //state 관리
  const [value, setValue] = useState('')
  //OnChange 관리
  const handler = (e: React.ChangeEvent<HTMLInputElement>) => {
    setValue(e.target.value)
  }
  return [value, handler] as const
}

export default useInput

 

 

사용 방법은 다음과 같다.

const [isData, onChangeHnadler] = useInput()
return (
    <>
      <input type="text" value={isData} onChange={onChangeHnadler} />
    </>
)
반응형