리액트 - 컴포넌트생성

• 컴포넌트: 재사용 가능한 UI요소, 마크업으로 뿌릴 수 있는 자바스크립트 함수이므로 재사용이 아니더라도 기능별 컴포넌트(함수)로 생성하여 유지보수가 쉽도록 해줌
• 컴포넌트 이름은 일반함수와 구별위해 파스칼표기법, jsx마크업을 반환하는 함수
• return 뒤에 jsx로 마크업, 한줄 아닐 경우 ()로 묶어야함
• jsx는 self closing 태그 <img /> 형식

// App.jsx
function Profile() {
  return <img src="https://i.imgur.com/MK3eW3Am.jpg" alt="Katherine Johnson" />;
}

```js
return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);
```

 

컴포넌트 사용

• 다른곳에서 사용하지않고 서로 밀접하게 관련된 경우 같은 파일안에 컴포넌트 생성
• Gallery는 부모컴포넌트, Profile은 자식컴포넌트
• 컴포넌트 안에서 다른 컴포넌트 정의 불가, 최상위 레벨(파일)에 정의

function Profile() {
  return <img src="https://i.imgur.com/MK3eW3Am.jpg" alt="Katherine Johnson" />;
}

export default function Gallery() {
  return (
    <section>
      <h2>놀라운 과학자들</h2>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}