프런트 엔드 프레임워크 사용의 가장 큰 이점 중 하나는 페이지를 구성 요소라는 더 작은 부분으로 나누어 애플리케이션을 더 쉽게 관리할 수 있다는 것입니다.

물건을 정리하기 위해 다른 작은 상자를 포함하여 무엇이든 넣을 수 있는 상자로 구성 요소를 생각하십시오. 이 문서에서는 React 구성 요소를 만들고 가져오는 방법을 설명합니다.

전제 조건

JavaScript : 가져오기 및 내보내기 문에 대한 기본 사항을 알고 있습니다. Node.js 및 require()를 언급하는 부분은 무시하십시오.

의도한 결과

이것은 기사가 끝날 때까지 우리가 갖게 될 것입니다.

그림 1: 화면에 3개의 요소(구성 요소)가 있는 간단한 페이지.


그림 2: 앱 계층 구조 차트입니다. 활동 다이어그램의 단순화된 버전으로 사용하여 프로젝트가 어떻게 보이는지 확인할 것입니다.

시작하기

구성 요소를 만들려면 다음 단계를 따르세요.

components 폴더

안에 src라는 폴더를 만듭니다.

.jsx 폴더 안에 확장자가 components인 새 파일을 만듭니다.

다음 패턴을 사용하여 파일과 이름이 같은 함수를 만듭니다.

//MyComponent.jsx (the name of the file)

export default function MyComponent() {
  return (
    <div className="my-component">
      <p>Hello world</p>
    </div>
  );
}

여기에서 우리는 각 코드 라인이 무엇을 하는지 배울 것입니다:

export default : 이름에서 알 수 있듯이 React에게 이것이 이 파일 내부의 주요 구성 요소임을 알려줍니다. 파일당 하나 이상의 구성 요소를 내보낼 수 있지만 눈살을 찌푸리게 합니다.

MyComponent() : 구성 요소의 이름입니다. 어떤 것으로든 변경할 수 있지만 .jsx 파일과 동일한 이름이어야 한다는 점을 잊지 마십시오. 다음 장에서는 괄호 안에 어떤 인수를 넣을 수 있는지 알아봅니다.

return() : 웹 페이지에 표시되는 콘텐츠입니다. 필요한 만큼 많은 태그를 중첩할 수 있지만 루트에는 1개만 있을 수 있습니다.

className : React에서 CSS 클래스를 추가하는 방법입니다.

컴포넌트 사용

구성 요소를 사용하려면 2가지 작업을 수행해야 합니다. 구성 요소를 가져와 상위 구성 요소 내에서 사용합니다.

가져오기:

새로 만든 구성 요소(예: App.jsx)를 삽입하려는 구성 요소 파일을 열고 다음 단계를 따릅니다.

파일 맨 위에 import를 사용한 다음

를 사용합니다.

구성 요소의 이름입니다. 이 예MyComponent에서 .

from가 경로를 결정합니다.

"./components/MyComponent" 구성 요소의 relative 경로가 포함된 문자열입니다.

다른 구성 요소 내에서 구성 요소 사용:

return() 내부:

<MyComponent/> HTML 태그와 같은 구성 요소를 사용합니다.

보시다시피 동일한 구성 요소의 복사본(인스턴스)을 원하는 만큼 넣을 수 있습니다. 다른 기사에서 우리는 여러 복사본을 만드는 더 좋은 방법을 배울 것입니다.

// App.jsx

import MyComponent from "./components/MyComponent";

export default function App() {
  return (
    <div className="App">
      <MyComponent />
      <MyComponent />
      <MyComponent />
    </div>
  );
}

결론

이제 구성 요소를 만들고 가져오는 방법을 배웠으므로 다음 장으로 이동할 수 있습니다.

완성된 코드를 보려면 이 파일link을 열고 create-component 브랜치를 엽니다.

마지막으로 이 문서의 TLDR(To Long Did not Read) 버전입니다.

학점

표지 이미지: Photo by Mildlee on Unsplash