Jul 04, 2023
[리액트 공식문서] 컴포넌트 기초
![[리액트 공식문서] 컴포넌트 기초](https://inblog.ai/_next/image?url=https%3A%2F%2Finblog.ai%2Fapi%2Fog%3Ftitle%3D%255B%25EB%25A6%25AC%25EC%2595%25A1%25ED%258A%25B8%2520%25EA%25B3%25B5%25EC%258B%259D%25EB%25AC%25B8%25EC%2584%259C%255D%2520%25EC%25BB%25B4%25ED%258F%25AC%25EB%2584%258C%25ED%258A%25B8%2520%25EA%25B8%25B0%25EC%25B4%2588%26logoUrl%3Dhttps%253A%252F%252Finblog.ai%252Finblog_logo.png%26blogTitle%3D2duckchun&w=1920&q=75)
- 컴포넌트는 리액트의 코어 컨셉(Core Concept)이다.
- 리액트의 모든 UI는 컴포넌트의 집합체라고 할 수 있으며, 컴포넌트를 잘 설계하는 것이 리액트 여행을 잘 하는 방법이다.
컴포넌트 (UI를 빌딩하는 블록)
- 리액트에서 가장 중요한 것은 컴포넌트이다.
- HTML, CSS, Javascript를 잘 조합하면 좋은 웹 문서를 만들 수 있다.
- 리액트는 HTML, CSS, Javascript를 조합한 JSX문법으로 컴포넌트를 쉽게 만들 수 있게 해준다.
- 건축의 개념에서 보자면, 앱은 완성된 건축물이고 컴포넌트는 그 조립 단위라고 볼 수 있다.
- 따라서 리액트를 잘 다룬다는 개념은 컴포넌트를 잘 다룬다는 개념과 일치하다고 봐도 무방하다.
// 컴포넌트의 집합 = 웹 <PageLayout> <NavigationHeader> <SearchBar /> <Link to="/docs">Docs</Link> </NavigationHeader> <Sidebar /> <PageContent> <TableOfContents /> <DocumentationText /> </PageContent> </PageLayout>
- 컴포넌트는 개발자가 직접 만들 수도 있고, 이미 만들어진 수천가지의 컴포넌트를 이용할 수도 있다.
- 개발할 것은 개발하고, 사용할 것은 가져와 사용하면서 웹 개발 여행을 떠나보자!
이미 만들어진 수천가지의 컴포넌트 오픈소스
- Chakra UI : https://chakra-ui.com/
- Material UI : https://mui.com/core/
컴포넌트 정의(선언)
- 과거에는 클래스 컴포넌트를 많이 사용했지만 요즘엔 함수형 컴포넌트를 더 많이 사용한다.
- 따라서 함수형 컴포넌트를 정의하는 방법을 알아볼 것이다.
Step1. 컴포넌트 export (모듈화) 하기
- export prefix를 이용하여 컴포넌트를 **모듈화(외부로 노출)**해야한다. (export는 표준 자바스크립트 문법이다.)
export default function...
Step2. 함수 이름은 대문자로 정의하기
- 리액트 컴포넌트는 일반적인 자바스크립트 함수이지만, 컴포넌트명의 첫번째 글자는 반드시 대문자로 해야한다. 그렇게 하지 않으면 동작하지 않는다.
export default function Profile() { ... }
Step3. JSX 마크업 하기
- 컴포넌트가 return한 JSX가 곧 사용자가 보는 화면(UI)가 된다.
export default function Profile() { return ( <img src="<https://i.imgur.com/MK3eW3Am.jpg>" alt="Katherine Johnson" />; ) }
컴포넌트의 선언은 반드시 최상단(top-level)에!
- 컴포넌트의 선언은 반드시 최상단에서 해야한다.
- 아래와 같이 컴포넌트를 이중으로 선언하면 예측할 수 없는 버그가 생긴다.
export default function Gallery() { // 🔴 Never define a component inside another component! function Profile() { // ... } // ... }
- Gallery 내부에 Profile 컴포넌트가 중첩되어 선언되어 있다.
- 이런 경우, 순수 컴포넌트, 상태 관리 등에 문제점이 생긴다.
- 이렇게 선언한 일이 잘 생기지 않으므로, 위와 같이 중첩 컴포넌트를 선언하지 말자.
export default function Gallery() { // ... } // ✅ Declare components at the top level function Profile() { // ... }
- 컴포넌트는 위 코드처럼 꼭 최상단에 분리해서 선언하자.
Recap
리액트로 재사용 가능한 UI 엘리먼트를 만들 수 있다.
리액트 앱에서, 모든 UI 조각들은 컴포넌트로 구성되어 있다.
리액트 컴포넌트는 두가지 특징을 제외하고는 일반적인 자바스크립트 함수라고 볼 수 있다.
- 함수의 첫번째 문자는 반드시 대문자로 쓰여야 하는 특징.
- JSX를 리턴한다는 특징.
Share article