Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, useEffect등의 기능을 제공합니다.

• useState
• useEffect
• useReducer
• useMemo
• useCallback
• useRef
• 커스텀 Hooks 만들기
• 다른 개발자가 만든 Hooks

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

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

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

• props

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

• state

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

• state 사용시 주의 사항