React, Component란

Component란 어플리케이션의 재사용 가능한 UI들의 결합체.

1. Export Component

export default function Profile() {
  return (
    
  )
}

2. Definite Component

function Profile() {
  return (
    
  )
}

💡 React 컴포넌트는 일반 JavaScript 함수이지만, 이름은 대문자로 시작해야 하며 그렇지 않으면 작동하지 않습니다!

 

3. 한 파일에서 여러 컴포넌트를 import 하거나 export 하는 방법

하나의 파일에 두 개의 default export를 정의할 수 없습니다.

이런 경우 새로운 파일 하나를 더 생성해서 default export를 사용하거나

named export를 사용하여 한 파일에서 여러 컴포넌트를 export할 수 있습니다.

export default function Gallery() {
  // ...
}

export function Profile() {
	// ...
}

import { Profile } from './Gallery.js';
import Gallery from './Gallery.js';

 

💡 named import와 default import 의 문법적 차이는 {} brace에 있다.

 

4. JSX 태그는 왜 하나로 감싸줘야 하는가

JSX는 HTML처럼 보이지만 내부적으로는 일반 JavaScript 객체로 변환됩니다.

하나의 배열로 감싸지 않은 하나의 함수에서는 두 개의 객체를 반환할 수 없습니다.

따라서 또 다른 태그나 Fragment로 감싸지 않으면 두 개의 JSX 태그를 반환할 수 없습니다.

 

💡 JSX를 한개의 객체로 내보내기 위해서는 <></> 빈태그 혹은 div로 감싸줘야하며 빈태그의 이름은 Framgent라고 부른다.

 

5. Components Props 전달

React 컴포넌트는 props를 이용해 서로 통신합니다.

props는 HTML 어트리뷰트를 생각나게 할 수도 있지만

객체, 배열, 함수를 포함한 모든 JavaScript 값을 전달할 수 있습니다.

function Avatar({ person, size }) {
  // person과 size는 이곳에서 사용가능합니다.
}

export default function Profile() {
  return (
    <Avatar
      person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }}
      size={100}
    />
  );
}

다음과 같이 부모에서 자식 컴포넌트를 사용할 때

자식 컴포넌트에 정의한대로 props 값들을 넘겨주면 부모 자식 컴포넌트간 통신이 가능합니다.

값이 지정되지 않았을 때, prop에 기본값을 주길 원한다면

변수 바로 뒤에 = 과 함께 기본값을 넣어 구조 분해 할당을 해줄 수 있습니다.

function Avatar({ person, size = 100 }) {
  // ...
}