리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있습니다.

• 일반 CSS
• Sass 사용하기
• CSS Module
• styled-components

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

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

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

• props

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

• state

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

• state 사용시 주의 사항