컴포넌트

컴포넌트는 화면을 돌려주는 함수다. 이름은 대문자로 시작한다. JSX는 HTML처럼 보이지만 JavaScript 식이다.

function Hello({ name }) {
  return <p>안녕, {name}</p>
}

export default function Page() {
  return <Hello name="홍길동" />
}

Hello를 부르는 쪽이 넘긴 name이 props다. 컴포넌트 안에서는 인자로 받는다. 중괄호 {name} 자리는 JavaScript 값이다.

JSX에서 자주 막히는 것

• 부모 태그는 하나다. 여러 개면 <>...</>로 감싼다.
• HTML의 class는 className이다. for는 htmlFor다.
• 모든 태그는 닫거나, <input />처럼 스스로 닫는다.
• 주석은 {/* 설명 */}이다.

export default function FormHint() {
  return (
    <>
      <label htmlFor="title">제목</label>
      <input id="title" className="field" />
    </>
  )
}

브라우저에 보낼 수 없는 값(함수, 클래스 인스턴스)을 컴포넌트 자식으로 그대로 찍으면 오류가 난다. 문자열, 숫자, 엘리먼트, 그 배열만 화면에 놓는다.