728x90

React 공식문서를 읽고 정리한 글입니다.

YourFirst Component

React 애플리케이션

component 라고 불리는 고립된 조각들로 빌드된다.

component 란 ?

하나의 JavaScript 함수

버튼과 같이 작을 수 있고, 전체 페이지만큼 클 수 있다.

https://codesandbox.io/embed/affectionate-tdd-tefyif?fontsize=14&hidenavigation=1&theme=dark

Components: UI building blocks

<article>
  <h1>My First Component</h1>
  <ol>
    <li>Components: UI Building Blocks</li>
    <li>Defining a Component</li>
    <li>Using a Component</li>
  </ol>
</article>

Web에서 HTML은 <h1> 와 <li> 와 같은 태그의 세트들로 구조화된 문서를 보여준다.

React를 사용하면 markup, CSS, JavaScript를 component 로 결합할 수가 있다.

<TableOfContents /> 와 같이 결합하여, 모든 페이지에서 렌더링할 수 있는 구성 요소가 될 수 있다.
- 내부적으로는 <article>, <h1>, <ol>, <li> 모두 여전히 동일하게 적용된다.

HTML 태그와 마찬가지로 이들을 정렬 및 중첩시켜 전체 페이지를 디자인할 수 있다.

<PageLayout>
  <NavigationHeader>
    <SearchBar />
    <Link to="/docs">Docs</Link>
  </NavigationHeader>
  <Sidebar />
  <PageContent>
    <TableOfContents />
    <DocumentationText />
  </PageContent>
</PageLayout>

<TableOfContents /> 를 사용해 모든 화면에 추가할 수 있다.

Chakra UI

Material UI

Chakra UI, Material UI 에서 React 오픈 소스 커뮤니티에서 제공하는 수천 개의 구성요소들로 프로젝트를 만들 수도 있다.

Defining a component

웹 페이지를 만들 때

전통적 방식 : 웹 개발자가 마크업을 하고, 자바스크립트에 인터랙션을 추가하였다.
- 하지만, 많은 사이트들과 많은 앱들이라면 이야기가 다르다.

https://codesandbox.io/embed/loving-hill-xocbip?fontsize=14&hidenavigation=1&theme=dark

💡

How to build a component

Export the component
export default
- 자바스크립트 표준 문법
- 다른 파일에서 import할 수 있도록 함수를 mark 해둔다.

Define the function
function Profile() { }
- Profile 이라는 이름으로 자바스크립트 함수를 정의한다.
React component는 자바스크립트 함수이지만, 무조건 대문자로 시작되어야 한다. 그렇지 않으면 동작하지 않는다 !

Add markup
src 그리고 alt 속성을 가진 <img /> 태그를 반환하는 component가 있다.
- HTML 처럼 쓰였지만, 실제로는 JavaScript이다.
- 이 문법을 JSX라고 부르고, 자바스크립트 안에서 markup을 끼워넣을 수 있도록 한다.
```
return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;
```
markup이 return 키워드랑 같은 라인에 있지 않으면, 소괄호 한 쌍으로 감싸야 한다.
```
return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);
```
소괄호 없이는, return 뒤에 어떤 코드가 오더라도 무시된다 !

Using a component

Profile component 를 정의하였다면 다른 component에서 이를 중첩할 수 있다.

예를 들어, Profile component를 다중으로 사용하는 Gallery component를 export 할 수 있다.

https://codesandbox.io/embed/affectionate-tdd-tefyif?fontsize=14&hidenavigation=1&theme=dark

What the browser sees

대소문자에서의 차이점

<section> 은 소문자이다
- 때문에 React는 HTML 태그라고 인식한다.

<Profile /> 은 대문자 P로 시작한다
- 때문에 React는 Profile이라고 불리는 컴포넌트라고 인식한다.

그리고 Profile은 HTML 태그 <img /> 를 포함하고 있다.

<section>
  <h1>Amazing scientists</h1>
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
</section>

Nesting and organizing components

Component들은 자바스크립트 함수이기 때문에, 같은 파일에서 복 술로 moponent를 쓸 수 있다.

장점 : component가 상대적으로 작거나, 서로 강하게 연관되어있을 때 편리하다.

파일이 혼잡해지면, Profile 을 분리된 파일로 이동시킬 수 있다.

Gallery 안에서 Profile component 가 여러번 렌더링 되어있다면 이렇게 말할 수 잇다.

Gallery 는 parent component

Profile 은 child component

React 의 장점

⇒ component를 한 번만 정의하면, 다양한 곳에서 얼마든지 사용할 수 있다.

Uploaded by N2T