React는 UI를 렌더링하기 위한 JS 기반 라이브러리 이다. UI는 버튼, 이미지 등과 같은 작은 단위로 구성될 수 있고, React는 그러한 작은 단위들을 결합하여 재사용할 수 있도록 돕는다. 이러한 작은 단위를 컴포넌트 라고 한다.
01. UI building blocks
우리는 html tag들을 이용하여 구조화된 문서를 만들 수 있다.
그리고 여기에 css style, js 가 추가되어 스타일링을 하고 문서를 동적으로 만들 수 있게 된다.
React는 markup, css, js 를 하나의 컴포넌트 내에 결합하여 재사용 가능한 UI 요소를 만들도록 돕는다. 또한 이러한 컴포넌트는 html tag처럼 markup 내에서 사용 가능하다.
02. Defining a component
React component는 markup에 포함할 수 있는 js 함수이다.
// Home.jsx
export default Home(){
return (
<div>
<MyButton>ClickMe</MyButton>
</div>
)
}
// MyButton.jsx
export default MyButton({children}){
return (
<button>{children}</button>
)
}03. How to build a component
3-1. 컴포넌트가 다른 컴포넌트 에서 import 하여 사용할 수 있도록 export default 를 사용하여 내보낸다.
3-2. 함수를 정의한다.
- 함수 이름은 대문자로 시작해야 함!
- 최상위 태그는 하나!
3-3. markup
- markup 하여 컴포넌트를 구성하고 jsx markup을 반환한다.
export default Example(){
return(
<div>
<h1>Hello Example!✨</h1>
</div>
)
}04. Using a component
컴포넌트는 다른 컴포넌트 내부에서 html tag 처럼 사용될 수 있다.
주의!
- 🚫 컴포넌트를 다른 컴포넌트 내부에서 여러번 사용하는 것은 허용되지만, 컴포넌트 정의를 다른 컴포넌트 내부에서 하는 것은 안된다. 🚫
export default function Gallery() {
// 🔴 Never define a component inside another component!
function Profile() {
// ...
}
// ...
}
