모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재합니다.

컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다.

컴포넌트를 처음으로 렌더링할 때 어떤 작업을 처리하거나, 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 때 등에 컴포넌트 라이프사이클 메서드를 사용합니다.

라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다.

• 라이프사이클 메서드의 이해
• 라이프사이클 메서드 살펴보기
• 라이프사이클 메서드 사용하기

컴포넌트를 선언하는 방식은 두 가지입니다.
하나는 함수형 컴포넌트이고 또 다른 하나는 클래스형 컴포넌트입니다.

• 클래스형 컴포넌트
  • 함수형 컴포넌트

• 컴포넌트 생성
  • src 디렉터리에 MyComponent.js 파일 생성
  • 코드 작성
  • 모듈 내보내기(export) 및 불러오기(import)

• props

  • JSX 내부에서 props 렌더링
  • 컴포넌트를 사용할 때 props 값 지정하기
  • props 기본값 설정: defaultProps
  • 컴포넌트 태그 사이의 내용을 보여주는 children
  • 비구조화 할당 문법을 통한 props 내부 값 추출
  • propTypes를 통한 props 검증
  • 클래스형 컴포넌트에서 props 사용하기

• state

  • 클래스형 컴포넌트의 state
  • 함수형 컴포넌트에서 useState 사용하기

• state 사용시 주의 사항