[WIL] React - LifeCycle, Hooks

LifeCycle

리액트의 컴포넌트는 모두 라이프 사이클(Life cycle, 혹은 생명주기)을 가집니다. 라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 나타낸다. 리액트 훅이 나오기 전에는 이러한 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를 사용했다.

 

라이프사이클은 크게 생성될 때(Mount), 업데이트할 때(Update), 제거할 때(Unmount) 세 단계이다.

 

• Mount : 처음 컴포넌트를 불러와서 생성하는 단계
• Update : 아래 4가지 경우로 인해 데이터가 바뀌거나 부모 컴포넌트가 랜더링할 때 일어나는 단계

1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
4. 강제로 업데이트 했을 때 (forceUpdate())

• Unmount : 페이지를 이동하거나, 사용자의 행동으로 인해 컴포넌트가 화면에서 사라지는 단계

리액트의 컴포넌트들은 위 순서에 따라 생성되고 업 데이트되고 사라지는 생명주기를 갖는다.

Hooks

Hooks는 클래스형 컴포넌트 고유 기능인 상태(state)관리와 라이프사이클 관리 기능을 함수형 컴포넌트에서도 쓸 수 있도록 해주는 함수들을 총칭한다. React 에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이, state와, 여러 React 기능을 사용할 수 있도록 만든 라이브러리.

Hook

함수 컴포넌트에서 React state와 lifecycle features을 “연동(hook into)“할 수 있게 해주는 함수.

현재 공식문서에서는, Class형 컴포넌트보다는 Function형 컴포넌트로 새로운 React 프로젝트를 만들기를 권장함

Hook 필요성

- 함수형 컴포넌트들은 기본적으로 리렌더링이 될때, 함수 안에 작성된 모든 코드가 다시 실행됨
vs 클래스형 컴포넌트들은 method의 개념이므로, 리렌더링이 되더라도 render() 를 제외한 나머지 method 및 state는 그대로 보존이 되어 있음.

 

-> 이는 함수형 컴포넌트들이 기존에 가지고 있던 상태(state)를 전혀 관리(기억)할 수 없게 만듦(모든 코드 및 변수를 기억할 수 없다)

그래서 함수형 컴포넌트를 Stateless Component라고 하는 것임

 

so Hook 을 통해 함수형 컴포넌트가 상태(state)를 가질 수 있게 한 것.

브라우저에 메모리를 할당하므로 함수 내에 써져 있는 코드 및 변수를 기억할 수 있게 됐다 

Hooks의 규칙

1.  최상위(at the Top Level)에서만 Hook을 호출해야 합니다

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하지 마세요.

대신 early return이 실행되기 전에 항상 React 함수의 최상위(at the top level)에서 Hook을 호출해야 합니다.

- 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장됩니다.

*이러한 점은 React가 useState 와 useEffect 가 여러 번 호출되는 중에도 Hook의 상태를 올바르게 유지할 수 있도록 해줍니다. 

 

2. 오직 React 함수 내에서 Hook을 호출해야 합니다

Hook을 일반적인 JavaScript 함수에서 호출하지 마세요.

대신 아래와 같이 호출할 수 있습니다.

• ✅ React 함수 컴포넌트에서 Hook을 호출하세요.
• ✅ Custom Hook에서 Hook을 호출하세요. 

Hook 종류

기본 Hooks

1. useState (동적 상태 관리)
2. useEffect (side effect 수행 -mount/unmount/update)
3. useContext (컴포넌트를 중첩하지 않고도 전역 값 쉽게 관리)

추가 Hooks

1. useReducer (복잡한 컴포넌트들의 state를 관리 -분리)
2. useCallback (특정 함수 재사용)
3. useMemo (연산한 값 재사용)
4. useRef (DOM선택, 컴포넌트 안에서 조회/수정할 수 있는 변수 관리)
5. useImperativeHandle
6. useLayoutEffect
7. useDebugValue

https://ko.reactjs.org/docs/hooks-effect.html

Using the Effect Hook – React

https://velog.io/@rudans987/%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-vs-%ED%95%A8%EC%88%98%ED%98%95-react-hooks

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

https://velog.io/@goyou123/React-Hooks-%EC%B4%9D%EC%A0%95%EB%A6%AC

React Hooks 총정리

https://choijying21.tistory.com/50

[WIL] 항해 99 4주차 리액트 숙련 회고 (라이프 사이클과 리액트 훅)

 

ㅇ 오늘 한 일

- 언어스터디 발표 준비 -리액트

- 리덕스 Thunk 강의