[항해99] 3/27 WIL (4)

네번째 Keyword

1. 라이프사이클(클래스형 vs 함수형)

React의 컴포넌트는 모두 Life Cycle을 가진다.

---

import React, { Component } from 'react';

class App extends Component {
  render() {
    const name = 'CHOI';
    return <h1>Hello, {name}</h1>
  }
}

클래스형 컴포넌트는 render() 함수를 이용, UI를 구성할 JSX 코드를 반환해주는 형식으로 구성된다.

• 생성될 때 (마운트 시 - mount)
  constructor, render, componentDidMount ..
• 업데이트할 때
  render, componentDidUpdate ..
• 제거할 때 (마운트 해제 시 - unmount)
  componentWillUnmount

---

import React from 'react';

const App = () => {
  const name = 'CHOI';
  return <h1>Hello, {name}</h1>
}

함수형 컴포넌트는 클래스가 아닌 React Hook으로 생명주기를 관리할 수 있다. props와 이벤트 핸들링, 함수 선언에 this가 필요 없다.

2. React Hook

• useState: state를 사용. 관리하고 있는 state가 업데이트 되면 컴포넌트가 Rerendering 된다.
• useMemo: 캐싱을 지원하여 컴포넌트 내부 연산 작업을 최적화할 수 있다.
• useCallback: 함수의 레퍼런스를 제어하여 최적화하는 데 사용된다.