개발
[React] 라이프사이클(클래스형 vs 함수형), react hooks
0hyeon의
2023. 2. 20. 10:24
반응형
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} />
</>
)
반응형