리액트의 컴포넌트

component?

컴포넌트란 UI 또는 기능 등을 부품화해서 재사용이 가능하도록 소스 코드를 나누는 것이다.
리액트에서 컴포넌트 작성방법은 클래스형과 함수형 2가지 방식이 있다.

하나의 페이지를 여러개의 컴포넌트로 나누는 이유

코드의 재사용성과 유지보수와 관리, 효율성 등을 위해.
가령 HTML, CSS, JAVASCRIPT의 각 소스 파일을 따로 만들고 필요에 따라 불러와서 사용하는 것이다.

각 파일 모듈은 독자적인 모듈 스코프를 갖는다. 따라서 모듈 내부에서 선언한 모든 식별자는 기본적으로 해당 모듈 내부에서만 참조할 수 있다.
이때 모듈 내부에서 선언한 식별자를 다른 모듈들이 재사용할 수 있도록 하기위해 (다른 폴더로 파일을 내보내기 위해) export 를 사용하게 된다.

export & import

export 키워드를 사용해 선언문 앞에 사용하여 변수, 함수, 클래스 등 모든 식별자를 export 할 수 있다.
반면 다른 모듈에서 공개(export)한 식별자는 자신의 모듈 스코프 내부로 import 할 수 있다. (같은 폴더 내의 다른 모듈이 export한 식별자 이름으로 import 할 수 있다.)

각각의 컴포넌트로 나누게 될 경우 컴포넌트간 계층이 생기게 되는데
이때 import되어 불려가는 컴포넌트를 자식 컴포넌트,
import해서 불러오는 컴포넌트를 부모 컴포넌트라고 한다.

import {BodyWrap} from '@emotion/styled'
export const BodyWrap = styled.div`
	font-color : "blue";
`