React Component

컴포넌트

객체 지향 언어 용어로 화면 UI를 담당하는 클래스

• 클래스 컴포넌트와 함수 컴포넌트 두 가지 존재
• 리액트가 제공하는 기본 컴포넌트와 리액트 개발자가 필요에 의해 만드는 사용자 컴포넌트 두 가지 존재
  • 기본 컴포넌트
    • ex) <div>
  • 사용자 컴포넌트
    • 코드를 간결하게 만들기 위해 제작
    • ex) <HelloWorld/>
• MCV의 뷰(화면 담당)를 독립적으로 구성하여 재사용할 수 있고 컴포넌트를 통해 새로운 컴포넌트를 쉽게 생성할 수 있음, 블록 조립 형태

 

클래스 컴포넌트

React.Component에서 상속하는 사용자 컴포넌트 제작 방식으로 전통적인 방식의 컴포넌트

• render 메서드를 반드시 구현
  • render를 통해 가상 DOM 객체를 생성하여 전달

 

함수 컴포넌트

클래스 컴포넌트를 함수 형태로 만든 뒤, render 메서드만 함수 몸통으로 구현한 컴포넌트

• 반환 값으로 가상 DOM 객체를 생성하여 전달
• export default 사용

함수 컴포넌트 생성 방법

1. function 키워드로 만드는 방법
2. 화살표 기호 ⇒ 를 사용해서 만드는 방법
   • 이름을 가질 수 없는 익명 함수 사용
   • 변수에 익명 함수를 설정하는 방식으로 구현

 

속성

- 클래스의 멤버 변수
- 리액트에서 속성은 부모 컴포넌트에서 자식 컴포넌트 쪽으로 전달되는 객체 타입의 데이터

• 리액트 속성은 불변 속성, 속성 값을 사용자 코드에서 임의로 변경 불가
• 속성 값이 변하면 컴포넌트 리렌더링 발생

key 속성

• 같은 이름의 컴포넌트가 여러 개일 때, 구분하려는 의도로 만들어진 속성
• 배열 형태로 컴포넌트 구현 시, key 속성 반드시 명시

children 속성

• 자식 요소를 포함할 수 있는 컴포넌트에서 사용

 

구성 요소

Props

상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터

• 어떠한 값을 컴포넌트에 전달해줘야할 때 사용
• 전개 연산자처럼 한꺼번에 전달

State

컴포넌트의 상태를 저장하고 변경할 수 있는 데이터

Context

부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터