컴포넌트

어떤 페이지에 같은 인사말 카드를 세 곳에 배치해야 하는데, 각각 같은 제목과 레이아웃을 가져야 한다고 해봅시다. 마크업을 세 번 복사하면 디자인이 바뀔 때마다 세 곳 모두 수정해야 합니다. React의 해결책은 그 UI 조각을 한 번 작성한 다음 **컴포넌트**로 재사용하는 것입니다. 컴포넌트는 JSX를 반환하는 JavaScript 함수인데, JSX는 UI의 한 부분을 설명한 것입니다. HTML 태그처럼 작성해서 사용하면 React가 함수를 호출해서 화면에 무엇을 표시할지 결정합니다.

가장 간단한 예시입니다:

jsx

function Greeting() {
  return <h1>Hello</h1>
}

Greeting은 <h1>Hello</h1>을 반환하는 함수입니다. 실제로 보여주려면 다른 컴포넌트 안에서 태그처럼 사용해서 렌더링해야 합니다:

jsx

function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
    </div>
  )
}

App도 컴포넌트입니다. div 안에 Greeting 컴포넌트 두 개를 렌더링하고, 각각 자신의 <h1>Hello</h1>을 출력합니다. 이것이 조합(composition)입니다. 작은 컴포넌트들을 만들고 이들을 조합해서 더 큰 컴포넌트를 만들고, 이렇게 계속 쌓아 올려 전체 앱을 완성합니다.

이 과정에서 지켜야 할 몇 가지 규칙이 있습니다. 컴포넌트 이름은 대문자로 시작해야 합니다. Greeting과 App이 태그로 작동하는 이유는 React가 이들을 div나 h1처럼 소문자로 시작하는 일반 HTML 요소들과 구분할 수 있기 때문입니다. JSX를 반환하는 컴포넌트는 반드시 하나의 루트 요소를 반환해야 합니다. App이 두 개의 Greeting 태그를 하나의 div로 감싸는 것처럼 말입니다. 이 부분은 처음 배우는 사람들이 거의 모두 실수합니다. 형제 요소 여러 개를 감싸지 않고 반환하면 React가 오류를 던집니다. 형제 요소들을 추가 div 없이 반환해야 한다면 Fragment를 사용하세요:

jsx

function Greeting() {
  return (
    <>
      <h1>Hello</h1>
      <p>Welcome back</p>
    </>
  )
}

<>와 </>가 Fragment입니다. 페이지에 요소를 추가하지 않으면서 h1과 p를 하나의 반환값으로 묶어줍니다.

버전 참고

이전 React 코드는 종종 함수 대신 클래스로 컴포넌트를 정의했습니다:

jsx

class Greeting extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

기존 코드베이스에서는 여전히 이런 클래스 컴포넌트를 볼 수 있습니다. 이 핸드북은 전체적으로 함수 컴포넌트를 사용합니다. 이것이 현재의 표준적인 React 작성 방식입니다. React가 한 스타일에서 다른 스타일로 어떻게 발전했는지는 역사와 버전을 참고하세요.

Juno컴포넌트는 함수입니다 핵심 아이디어는 한 문장으로 설명됩니다: 컴포넌트는 함수이고, <Greeting /> 같은 태그로 호출하면 그 함수가 실행되고 반환된 내용이 표시됩니다. 이것만 이해하면 React의 나머지는 이 함수들 안에 무엇을 넣을 수 있는지 배우는 것입니다.

다음은 JSX입니다. 이 return 문 안에서 본 문법을 자세히 알아봅시다.

컴포넌트 ​

컴포넌트