231031 / Day 28

React Component

컴포넌트는 개념적으로 자바스크립트 함수와 유사하다. props 라고 하는 임의의 입력을 받아 화면에 어떻게 표시되는지를 엘리먼트를 반환한다. 즉 컴포넌트란 JSX를 return하는 함수이다. 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 조각으로 나누고 각각을 살펴볼 수 있다.

- 컴포넌트를 표한하는 방법에는 두 가지가 있다. -> 함수형과 클래스형 컴포넌트 (공식문서에서는 함수형 사용을 권장하고 있다.)

- 기본적으로 컴포넌트를 볼 때는 importd영역, JS를 쓸 수있는 영역, JSX영역, export영역으로 나누어 볼 수 있다.

- 컴포넌트를 만들 때 첫글자는 반드시 대문자로 작성되어야한다.

- 폴더는 소문자로 시작하는 카멜케이스, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓는다.

 

부모-자식 컴포넌트

컴포넌트 안에는 다른 컴포넌트가 들어갈 수 있다. 이때 품는 컴포넌트를 '부모 컴포넌트'라 부르고 안에 품어지는 컴포넌트를 '자식 컴포넌트'라 부른다.

부모-자식 컴포넌트를 연결하는 방법은 아래와 같다.

import React from "react";

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

function App() {
	return<Child />
}

export default App;

위코드를 작성하면 '나는 자식입니다' 라는 문장을 볼 수 있다.

컴포넌트는 App 컴포넌트이므로 App컨포넌트가 화면에 보여지는데, 이 App 컴포넌트는 Child를 자식으로 삼고 있기 때문에 결국 Child컴포넌트 안에있는 문장이 보이게 된다.

 

화면에 보이게 하는 것 = 랜더링