CLI를 사용하여 ReactJS에서 구성 요소 생성

1. generate-react-cli를 사용하여 React 프로젝트용 구성 요소 생성
2. Visual Studio Code 확장 사용

React 웹 애플리케이션은 종종 복잡한 구성 요소 트리로 구성됩니다. 따라서 프로젝트 폴더에 모든 구성요소를 저장하기 위한 조직화된 구조를 갖는 것이 유리할 수 있습니다.

React 애플리케이션 구축을 위한 초기 환경을 생성하는 방법에는 여러 가지가 있습니다. 가장 쉬운 방법은 Facebook의 React 팀에서 개발한 create-react-app을 사용하는 것입니다.

React 개발자는 종종 구성 요소를 생성하기 위해 기본 상용구 코드를 복사하여 붙여넣어야 합니다. 그러나 필요한 코드를 빠르게 생성하는 데 사용할 수 있는 솔루션이 많이 있습니다.

generate-react-cli를 사용하여 React 프로젝트용 구성 요소 생성

이 패키지를 사용하면 새 구성 요소를 만들 때 상용구 코드를 복사하여 붙여넣는 데 소요되는 많은 시간을 절약할 수 있습니다.

이 패키지를 설치하고 명령줄 인터페이스에서 다음 기본 명령을 실행합니다.

npx generate-react-cli component SomeComponent

프로젝트 유형에 따라 사용자 지정 JavaScript, CSS 및 기타 파일이 있는 SomeComponent라는 새 폴더를 생성합니다.

프로젝트 구조는 다음과 같습니다.

|-- /src
    |-- /components
        |-- /SomeComponent
            |-- SomeComponent.js
            |-- SomeComponent.css
            |-- SomeComponent.test.js

generate-react-cli 명령을 사용하여 처음으로 구성 요소를 생성하면 프로젝트에 대한 특정 유형의 파일을 얻기 위해 대답할 수 있는 질문이 표시됩니다. 예를 들어 일반 JavaScript 대신 TypeScript 파일이 필요하다고 지정할 수 있습니다.

모든 질문에 답하면 GRC는 선택 사항을 저장하는 generate-react-cli.json 파일을 생성합니다. 이 명령은 이 파일을 확인하여 기본적으로 생성할 파일 유형을 결정합니다.

이 파일로 이동하여 옵션을 변경하여 generate-react-cli 명령의 기능을 조정할 수 있습니다.

또한 generate-react-cli 명령을 작성할 때 일회성 지침을 추가하여 기본 동작을 재정의할 수 있습니다.

하나의 구성 요소에 대한 스토리북 파일도 생성한다고 가정해 보겠습니다. 다음 명령을 실행하여 이를 수행할 수 있습니다.

npx generate-react-cli component Box --withStory=true

기본적으로 GRC는 스토리북 없이 구성 요소 파일을 계속 생성합니다. 그러나 한 번에 스토리북 파일도 생성합니다.

Visual Studio Code 확장 사용

더 간단한 솔루션은 Visual Studio Code에 사용할 수 있는 코드 확장을 사용하는 것입니다.

구성 요소에 대한 폴더와 파일을 수동으로 만들어야 하지만 바로 가기를 사용하여 상용구 코드를 생성할 수 있습니다.

예를 들어 이 확장 프로그램에서 rcc를 입력하고 탭을 누르면 확장 프로그램이 필요한 코드를 생성합니다.