Component

1. 컴포넌트란?

컴포넌트란 화면을 구성하는 하나의 단위이다.

레고로 만들어진 장난감이 있다고 했을 때 그것을 이루는 하나하나의 레고 블럭과 같다.

// App 컴포넌트

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

형식은 위와 같고 한마디로, html을 반환하는 함수인 것이다.

 

2.컴포넌트 코드 보는법

컴포넌트 밖에서는 내가 필요한 파일을 import하거나, 또는 export default 라는 기능을 통해 내가 만든 컴포넌트를 

밖으로 내보내는 코드가 있다.

 

그리고 return을 기준으로 아랫부분에서는 HTML을  작성할 수 있다.

여기에 작성한 html 코드와 값들이 화면에 보여진다.

 

3.주의 할 점

• 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 한다.
• 폴더는 소문자로 시작하는 카멜케이스로 작성하고,컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름 짓는다.

카멜 케이스-맨 첫 글자를 제외한 각 합성어의 첫 글자만 대문자로 표기하는 것.

 

4. 컴포넌트 안에 컴포넌트 넣기 ( 부모 컴포넌트와 자식 컴포넌트 )

컴포넌트는 다른 컴포넌트를 품을 수 있다.

이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트,

다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 부른다.

 

// src/App.js
import React from "react";

function Child() { //자식 컴포넌트
  return <div>나는 자식입니다.</div>;
}

function App() { //부모 컴포넌트
  return <Child />;
}

export default App;

App.js 파일안에서 Child라는 새로운 컴포넌트를 만들었다.

그리고 App 컴포넌트에 Child를 리턴하고 Child 컴포넌트에 마치 HTML 태그를 쓰듯이 넣었다.

이렇게 한 컴포넌트에 다른 컴포넌트를 넣을 수 있다.

 

이렇게 코드를 작성하면 화면에는 "나는 자식입니다"라는 문장이 보여지게 될 것이다.

왜냐하면 이 파일에서 내보내진 (export default 된) 컴포넌트는 App 컴포넌트이기 때문에

화면에는 App 컴포넌트가 보여진다. 근데 App은 Child 컴포넌트를 자식으로 삼고 있기 때문에

결과적으로 Child 컴포넌트의 리턴값이 화면에 나오는 것이다.

 

이렇게 화면에 보여지게 하는 작업을 렌더링하다 라고 하며 

그리고 이렇게 함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 이 방식을 JSX라고 부른다.