Components

Components

components를 청사진으로 생각해도 좋다.
function component가 반환하는 것은 무엇이든지 React element로 렌더링된다.
React element를 사용하여 화면에서 보고 싶은 내용을 설명할 수 있다.
 
  • nestable (컴포넌트 안에 컴포넌트 생성)
  • reusable (클래스처럼 한번 만들어놓고 계속 재사용 가능)
컴포넌트는 리액트 파라마임에 필수적이다.
 
React Core Components
 

커스텀 컴포넌트

Core Component 외에도 커스텀 컴포넌트를 만들어서 자유롭게 사용할 수 있다.
앱의 파일 구조에 따라 export 방법은 여러가지가 있다.
//Cat은 컴포넌트, Text는 element
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default Cat; //function component export

//이제 <Cat />이런식으로 커스텀 컴포넌트 생성 가능
 
<Text>~~</Text>는 writing element를 편리하게 만드는 일종의 자바스크립트 구문을 사용하고 있다.
⇒ JSX에 대해 알아보자
JSX