[React] CRA 파일구조, 컴포넌트 import시키기

지금까지 dotnet환경에서 리액트를 사용하며 사용법을 알아봤다.

[React] 컬렉션 형태의 데이터 출력

여기선 CRA를 통해 프로젝트를 생성하고 react환경에서 진행한다.

[React] 리액트 시작하기

 

CRA의 파일구조

create-react-app을 통해 생성한 프로젝트를 npm start를 통해 실행시켜보면 기본 화면이 나온다.

만들어진 프로젝트를 VSC를 통해 열어보면 public폴더에 index.html문서가 보인다.

여기서 body태그의 root아이디의 div태그가 보이는데 기존 화면은 이 div태그를 통해 표현된다.

src폴더의 index.js파일이 해당 div태그에 컴포넌트를 렌더함수를 통해 연결시키고 있다.

4번째 줄에 ./App의 같은 경로의 App파일을 import시키고 있는 것을 볼 수 있다.

render된 App컴포넌트를 찾아가면 App컴포넌트의 내용을 확인할 수 있다.

해당 컴포넌트의 내용이 초기 화면을 구성하고 있던 정체다.

App컴포넌트는 import되어서 index.js에서 root div로 렌더되어서 화면에 나타나는 것이다.

 

컴포넌트 import 시키기

다시 index.js로 돌아와서 Guide컴포넌트를 생성해준다.

기존의 컴포넌트를 모두 지우고 Guide컴포넌트를 넣어준다.

같은 src경로에 컴포넌트 이름으로 된 js파일을 생성하고 컴포넌트를 그대로 옮겨준다.

React를 먼저 import해주고

import를 위해서 마지막에 export를 적어준다.

같은 경로이므로 ./Guide를 통해 import를 해준다.

컴포넌트의 위치를 옮기고 싶다면 폴더를 새로 만들고 그 안으로 옮겨준다.

해당 폴더로 컴포넌트를 옮기면 가져오기를 업데이트 할 것이냐고 하는데 예를 클릭해준다.

옮겨진 경로로 import경로가 자동으로 갱신된다.

초기화면으로 Guide컴포넌트의 내용이 보인다.