React Component

presentnow·2023년 11월 4일
post-thumbnail

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() {
    // ...
  }
  // ...
}



출처
React>your-first-app


0개의 댓글