[리액트] 라이프사이클이란? 함수형 컴포넌트에서 사용하는 라이프사이클 Hooks 정리

라이프사이클이란?

정의

라이프사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다.

라이프사이클 다이어그램

https://wavez.github.io/react-hooks-lifecycle/

React hooks lifecycle diagram

추가설명

• 컴포넌트의 수명은 페이지에 렌더링되기 전 준비과정에서 시작해 페이지에서 사라질때 끝이 난다
• 라이프 사이클 메소드는 클래스형 컴포넌트에서만 사용할 수 있다
• 함수형 컴포넌트에서는 Hooks를 사용한다

라이프 사이클 메소드를 언제 사용할까?

• 컴포넌트가 처음 렌더링되었을때 특정작업을 하고싶을때
• 컴포넌트를 업데이트하기 전/후 특정작업을 하고싶을때
• 컴포넌트가 사라질때 특정작업을 하고싶을때
• 불필요한 업데이트를 방지하고 싶을때

즉, 라이프 사이클 메서드는 컴포넌트가 브라우저에

1. 나타날 때 (Mount)
2. 업데이트 될때 (Update)
3. 사라질 때 (Unmount)

이 중간 과정에서 어떤 작업을 하고 싶을 때 사용할 수 있는 메서드다

 

함수형 컴포넌트에서 라이프 사이클 Hooks 종류

1. 마운트 (Mount)

DOM이 생성되고 컴포넌트가 브라우저에 나타나는 것

마운트시 (컴포넌트가 브라우저에 나타날때/ DOM이 생성될때) 호출하는 메서드

1) useMemo

컴포넌트에서 발생하는 연산을 최적화해주는 Hook (변수버전의 최적화)

useMemo 사용법

useMemo(함수, 배열)
useMemo(() => 함수이름(), [])

• 첫번째 파라미터: 어떻게 연산할지 정의하는 함수
• 두번째 파라미터: 1) 이 배열 안에 넣은 내용이 바뀌면 우리가 등록한 함수를 호출해서 값을 연산 2) 만약에 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용

 

2. 업데이트 (Update)

브라우저에 컴포넌트가 업데이트 되는 것

컴포넌트가 업데이트 되는 4가지 경우

1) props가 바뀔때: 부모 컴포넌트에서 넘겨주는 props가 바뀔때

2) state가 바뀔때: 해당 컴포넌트가 가지고 있는 state가 setState를 통해 업데이트 될때 

3) 부모 컴포넌트가 리렌더링될때: 부모컴포넌트가 리렌더링될때 자식컴포넌트도 리렌더링이된다

4) this.forceUpdate로 강제로 렌더링을 트리거할때

업데이트시(위의 예시 중 하나라도 충족할때) 호출하는 메서드

1) useState

• 상태를 관리할 때 사용하는 Hook
• 하나의 useState 함수는 하나의 상태값만 관리 할 수 있다
• 컴포넌트에서 관리해야 할 상태가 여러개라면 useState를 여러번 사용한다

useState 사용법

const [상태값, 생태값을 변경하는 함수] = useState(초기값)
const [value, setValue] = useState(initial value)

• value: 상태값
• setValue: 해당하는 value의 상태를 업데이트하는 함수
• useState(): 함수 안에는 value 상태의 초기값이 들어간다

2) useReducer

• useReducer는 상태 관리를 담당하는 훅을 말한다
• useState는 단순히 상태 관리를 해주는 훅이라면 useReducer는 해당 상태를 업데이트할때 유용한 Hook이다
• useReducer는 useState를 통한 상태 관리 + 상태 추가, 제거, 수정 등의 핸들러를 하나의 함수로 사용할 수 있도록 해준다

useReducer 사용법

const [state, dispatch] = useReducer(리듀서 이름, 초기 데이터)

state 데이터

• state는 상태 즉 데이터다
• useReducer 함수의 두번째 인자로 들어가는 초기 데이터를 1로 설정하면 state의 값도 1이 된다
• 즉 useReducer 함수에 등록한 초기데이터는 state로 접근할 수 있게 된다

dispatch 함수

• state를 처리하기 위한 함수다
• 데이터의 값을 추가, 제거, 수정을 위한 함수다
• dispatch 함수 안에 등록한 타입(추가, 제거, 수정 등)을 명시해주면 해당 로직이 실행된다
• 예를 들어 dispatch({type: 'ADD'}) 함수를 호출하면 데이터 추가 작업이 실행된다
• dispatch 함수의 인자로 특정한 작업 타입을 명시해주면 타입에 따라 등록한 함수를 실행해주는 역할을 한다

reducer 함수

• dispatch 함수에서 특정 type을 인자로 받을때 실행할 로직을 정해준다
• 아래의 코드처럼 reducer 함수를 생성하면 dispatch 함수의 인자로 {type: 'ADD'}가 들어왔을때 case 'ADD'인 로직이 실행된다

export function userReducer(state, action) {
  switch (action.type) {
    case 'ADD':
      return [...state, action.data]
    default:
      throw new Error(`Unhandled action type: ${action.type}`)
  }
}

action

• userReducer 함수의 두번째 인자로 들어 있는 값
• dispatch 함수 실행시 인자로 넣어준 값을 받아온다
• dispatch({type: 'ADD'})가 호출된 경우에는 action은 {type: 'ADD'} 객체가 되며 switch 검사문에서 받는 action.type은 'Add'가 된다

3) useContext

useContext란?

특정한 값을 모든 컴포넌트에서 사용할 수 있도록 만들어놓고, 어디서든 만든 값을 불러와서 사용할 수 있도록 해주는 Hook

useContext의 장점

useContext가 없다면 상위 컴포넌트에서 생성한 데이터를 하위 컴포넌트에 전달하기 위해 해당 데이터가 필요하지 않은 여러 컴포넌트를 거치면서 props drilling 현상이 생긴다. useContext를 사용하면 해당 데이터가 필요한 부분에서만 값을 호출해 사용할 수 있다.

하지만 그렇다고 해서 항상 useContext 를 써야하는건 아니다. useContext는 여러 하위 컴포넌트에서 공유되어야 하는 값이 있을 때만 사용하는 것이고, 각 컴포넌트로별로만 관리하는 값이라면 그냥 useState 를 쓰는 것이 더 적절하다.

useContext 사용법

1. createContext 함수로 context 생성

const UserContext = createContext()

2. 생성한 context로 컴포넌트를 감싸주고 value에 하위 컴포넌트가 사용할 값을 전달

UserContext로 감싸진 UserList 컴포넌트와 UserList 컴포넌트의 모든 하위 컴포넌트들은 count 데이터를 쉽게 전달 받을 수 있다.

<UserContext.Provider value={ count: 1 }>
  <UserList />
</UserContext.Provider>

3. 만들어 놓은 context를 불러온 후에 useContext 를 써주면 Provider의 value 부분을 통해서 넘겨준 그 값을 받아올 수 있게 된다

import { UserContext } from '../App'
const { count } = useContext(UserContext)

 

4) useCallback

 

3. 마운트 (Mount) & 업데이트 (Update) & 언마운트(Unmount)

1) useEffect

• 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정하는 Hook
• 클래스형 컴포넌트에서 componentDidMount와 componentDidUpdate를 합친 형태
• 컴포넌트가 Mount되거나 Update될때 실행된다 
• 컴포넌트가 업데이트될때: 1) props가 바뀔때 2) state가 바뀔때 3) 부모 컴포넌트가 리렌더링이될때
• useEffect 함수는 기본적으로 렌더링되고 난 직후마다 실행되며 두번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다

(1) 마운트 (Mount)

함수의 두번째 파라미터로 비어 있는 배열을 넣어준다

useEffect(컴포넌트가 마운트될때 실행할 함수, []);

useEffect(() => {
  <실행할 코드>
}, []);

(2) 마운트 (Mount) & 업데이트 (Update)

useEffect(컴포넌트가 마운트, 업데이트 될때마다 실행할 함수);

useEffect(() => {
  <실행할 코드>
});

(3) 마운트 (Mount) & 등록한 변수/state값 업데이트 (Update)

컴포넌트의 내부에 있는 변수 또는 state값이 업데이트될때만 실행하는 hook

함수의 두번째 파라미터로 배열 안에 검사하고 싶은 state값을 넣어준다

useEffect(배열안에 있는 변수/state가 업데이트되는 시점에 실행할 함수, [업데이트 되는지 지켜볼 변수/state]);

useEffect(() => {
  <실행할 코드>
}, [변수값/state값]);

(4) 언마운트(Unmount)

return () => { <실행할 코드> }를 useEffect 안에 넣어준다

useEffect(() => {return 컴포넌트가 사라질 때 실행할 함수})

useEffect(() => {
  return () => { 
    <실행할 코드> 
  }
})