첫 번째 컴포넌트

1. 컴포넌트

• 마크업, CSS, JS를 앱의 재사용 가능한 UI 요소

1-1. 컴포넌트 내보내기

`export default` 는 표준 JavaScript 구문으로 나중에 다른 파일에서 가져오는 기능이다.

1-2. 함수 정의하기

`function Profile() {}`을 사용하면 `Profile`이라는 자바스크립트 함수를 정의.

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

 

1-3. 마크업 추가하기

이 컴포넌트는 `src` 및 `alt` 속성을 가진 `<img />`태그를 반환한다. HTML처럼 작성되있지만 실제로는 자바스크립트이며,

이 구문을 JSX라고 한다.

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

// 마크업이 모두 return키워드와 같은 라인에 있지 않은 경우 괄호로 묶는다.
return (
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson">;
)

 

괄호가 없으면 `return` 뒷 라인의 모든 코드는 무시된다.

 

1-4. 컴포넌트 사용하기

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

export default function Gallery() {
	return (
         <section>
           <h1>Amazing scientists</h1>
           <Profile />
           <Profile />
           <Profile />
        </section>
    );
}

• `<section>` 은 소문자이므로 React는 HTML 태그를 가리킨다.
• `<Profile />` 은 대문자 P로 시작하므로 React는 `Profile`이라는 컴포넌트를 사용한다고 이해.
• `Profile`컴포넌트는 `Gallery`안에서 렌더링 되기 때문에 `Gallery`는 각 `Profile`을 "자식"으로 렌더링하는 "부모 컴포넌트"라고 할 수 있다.

컴포넌트는 다른 컴포넌트를 렌더링할 수 있지만 그 정의를 중첩해서는 안된다.

export default function Gallery() {
	// 절대 컴포넌트 안에 다른 컴포넌트를 정의하면 안됨!!
    function Profile() {
    	// ...
    }
    // ...
}

// 최상위 레벨에서 컴포넌트를 정의해야한다.
export default function Gallery() {
	// ...
}
// 최상위 레벨에서 컴포넌트를 선언한다.
function Profile() {
	// ...
}​

자식 컴포넌트에 부모 컴포넌트의 일부 데이터가 필요한 경우, 정의를 중첩하는 대신 props로 전달한다.