221214_TIL

Context API

• 전역 상태 관리
• 데이터를 전역으로 관리할 때, 유용하게 사용 가능

React Life Cycle

• class component 생명주기
• component는 [생성 - 업데이트 - 제거]의 생명주기를 가진다.
  ㄴ mount - update - unmount

1. 생성 (mount)
   1. Construtor
      • 컴포넌트 생성자 메서드
      • 컴포넌트가 생성되면 가장 먼저 실행되는 메서드
      • this.props, this.state에 접근 가능하며 리액트 요소 반환
   2. getDerivedStateFromProps
      • props로부터 파생된 state를 가져온다.
      • 즉, props로 받아온 것을 state에 넣어주고 싶을 때 사용
   3. render
      • 컴포넌트를 렌더링하는 메서드
   4. ComponentDidMount
      • 컴포넌트의 첫 번째 렌더링이 끝나면 호출되는 메서드
      • 해당 메서드가 호출되는 시점에는 화면에 컴포넌트가 나타난 상태임
      • 여기서 주로 DOM을 사용해야 하는 외부 라이브러리 연동과 해당 컴포넌트에서 필요로하는 데이터를 ajax로 요청 등의 행위를 한다.

useEffect( () => {           // []은 useEffect의 의존성 배열
console.log("ComponentDidMount")}, [])

---

2. 업데이트 (update)
   1. getDerivedStateFromProps
      • 컴포넌트의 props나 state가 바뀌었을 때도 이 메서드가 호출된다. (mount에서 2번 메서드와 동일함)
   2. shouldComponentUpdate
      • 컴포넌트가 리렌더링 할지 말지 결정하는 메서드.
      • React.memo와 유사함,. boolean 반환으로 결정된다.
   3. componentDidUpdate
      • 컴포넌트가 업데이트 되고 난 후, 발생한다.
      • 의존성 배열이 변할 때만 useEffect가 실행하는 것과 같음.

useEffect( () => {
	console.log("count or exampleProp Changed");
}, [count, exampleProp])

---

3. 제거 (unmount)
   1. componentWillUnmount
      • 컴포넌트가 화면에서 사라지기 직전에 호출
      • 여기서 주로 DOM에 직접 등록했었던 이벤트를 제거하고, setTimeout과 같은 것을 사용했다면 clearTimeout을 통해 제거한다.
      • 외부라이브러리를 사용했고, 해당 라이브러리에 dispose 기능이 있다면 여기서 호출한다.

useEffect( () => {
	console.log("");
	return( () => exampleAPI.unsubscribe() )
})

---

Functional Component 생명주기

• 리액트에서 Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해주는 함수다.
• Hook은 class안에서는 동작할 수 없음. class없이 React를 사용할 수 있게 한다.

---

Why? 리액트 훅을 도입한 목적?

1. 기존의 라이프사이클 메서드(method) 기반이 아닌 로직(logic) 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수있다는 이점이 있음.
2. 라이프사이클 메서드에는 관련없는 로직이 자주 섞여 들어간다. 이로 인해 버그가 쉽게 발생했고, 무결성을 쉽게 해치게 되었음이를 방지하고자 Hook을 도입.

Hook 사용 규칙 두 가지

1. 최상위에서만 Hook을 호출해야 한다.
   • 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다.
   • 이 규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장된다.
2. 리액트 함수 컴포넌트에서만 Hook을 호출해야 한다.
   • 일반 자바스크립트 함수에서는 Hook을 호출해서는 안된다.