• 리액트의 이벤트 시스템
  • 이벤트 사용 시 주의사항

• 이벤트 핸들링 익히기

• 함수형 컴포넌트로 구현

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

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

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

• props

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

• state

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

• state 사용시 주의 사항

리액트 컴포넌트에서 사용하는 JSX 문법

• JSX란?

• JSX의 장점

• JSX 문법

  • 감싸인 요소
  • 자바스크립트 표현
  • if 문 대신 조건부 연산자(삼항 연산자)
  • AND 연산자(&&)를 사용한 조건부 렌더링
  • undefined를 렌더링하지 않기
  • 인라인 스타일링
  • class 대신 className
  • 꼭 닫아야 하는 태그
  • 주석

리액트 기초

리액트는 페이스북 개발 팀이 만든 자바스크립트 라이브러리입니다.

기존의 어떤 데이터가 변할 때마다 어떤 변화를 주는 방식이 아닌 기존 뷰를 날려 버리고 새로 렌더링하는 방식입니다.