간단한 컴포넌트 코드
리액트가 가진 Component 클래스를 상속해서 새로운 App 클래스를 만든다
생성 조건
- 컴포넌트 클래스 이름 앞글자는 대문자로 시작
- 반드시 render 함수를 가짐
return 부분에 내용을 넣는다
반드시 하나의 최상위 태그로 시작해야 한다
사용 예시
위와 같은 방식으로 <클래스 이름></클래스이름> 을 사용하면
해당 컴포넌트 코드가 그대로 들어간 형태로 실행됨을 확인할 수 있다
복잡하게 구성된 코드를 컴포넌트 이름 하나로 정리할 수 있다는 장점이 있다
더 복잡한 코드를 보기 간결하게 만들 수 있음!
prop
컴포넌트 자체에도 속성값을 할당할 수 있음
이런 방식으로 subject 컴포넌트에 title, sub 속성으로 컴포넌트를 표현할 수 있다.
해당 컴포넌트 코드에서는
{this.props.title} 또는 {this.props.sub} 로 바깥에서 할당한 속성값을 가져와서 사용할 수 있다.
이 방식을 이용하면 바뀌기 쉬운 텍스트를 prop 인자로 사용해두면 컴포넌트 호출 시 들어갈 값을 유동적으로 사용할 수 있다
컴포넌트 파일로 분리하기
- js 파일 생성
- 컴포넌트 그대로 붙여넣음
- 맨 윗줄
import React, {Component} from 'react';추가
리액트 라이브러리에서 Component 클래스를 로딩해줌 - 맨 밑줄
export default 파일명;추가
외부에서 사용가능하도록 허용한다 - 사용하는 곳에서 상단에 파일 import 해준다
