React 프로젝트 생성 및, 컴포넌트 만들기

리액트 생활코딩 강의를 듣고 나서 한번 쭉 흐름을 따라가보기 위해서 리액트 앱을 만들기부터 시작하여 반응형 리스트를 만들어보는 것까지 정리할 겸 직접 실습을 진행해 볼 예정이다.

 

리액트 프로젝트 생성하기

 

리액트 프로젝트를 생성하는 방법은 간단하다.

1. 리액트 프로젝트를 만들 디렉토리를 생성한다.

2. cmd 창을 키고, cd 명령어를 이용해 해당 디렉토리로 이동한다.(드래그 앤 드롭으로 경로 확보)

3. create-react-app . 명령어를 입력해준다.

4. 프로젝트가 생성되면 vs code와 같은 코드 에디터로 프로젝트 디렉토리를 연다.

 

위와 같이 생성되면 이러한 문구가 뜨게 된다. 아래와 같이 지정된 곳에 리액트 파일들이 생성된 것을 알 수 있다.

이제 vs code로 생성된 프로젝트를 열어본다.

리액트 앱 실행하기

 

아무것도 건드리지 않은 프로젝트에서 new terminal을 선택해주고, npm run start 명령어를 이용하여 리액트 프로젝트를 실행해본다. 아래와 같이 크롬에서 새로운 창이 열리며 프로젝트 기본 파일의 내용을 출력해준다.

 

*주의할 점, 바로 npm run start를 하기 전에 node.js나 npm이 깔려있는지 확인해보자. 이것이 깔려있지 않으면 명령어가 먹히지 않는다. 설치 방법에 대해서는 다른 문서를 참고하기를 바란다.

 

이제 정상적으로 프로젝트가 작동되는 것을 보았으니, src 폴더의 코드를 수정함으로써 리액트 앱을 새롭게 만들 수 있다. App.js가 메인 화면에서 나오는 화면이고, 이 곳에 컴포넌트를 추가하기 위해서 별도의 파일을 하나 만들어 여러 컴포넌트를 추가해볼 것이다.

 

import React, { Component } from 'react';
 
class Content extends Component {
    render() {
        return (
            <div id="Content">
                {/* 컴포넌트의 내용 */}
            </div>
        );
    }
}
 
export default Content;

react 컴포넌트 파일의 기본적인 내용이다. 리액트 파일일 경우에 맨 위의 import 문으로 react를 임포트해주고, 혹시 다른 컴포넌트나 css 파일을 사용할 일이 있다면 import 문을 이용하여 임포트를 해주어야 디자인이 적용된다.

 

컴포넌트를 정의하는 방식에 function을 사용하는 방식도 있지만 우리는 함수형 프로그래밍을 위해서 class를 사용하여 정의할 것이다. 형식은 거의 컴포넌트 구성이 위의 코드와 동일하며, 마지막에 export 구문울 써 주어야 다른 파일에서 import 하여 컴포넌트를 쓸 수 있다. 이 점에 주의해야 한다.

 

각각 App.js 화면에 표시할 간단한 컴포넌트들을 만들어 보았다. 세 개의 컴포넌트 Subject, TOC, Content를 작성하여 보았다. 이것을 이제 App.js 화면 안에 다같이 포함해서 사용해 볼 것이다.

 

이와 같이 import를 사용하여, 파일이 있는 경로와 파일명으로 원하는 컴포넌트를 임포트 시켜 사용할 수 있게끔 해준다. 여기서, 이미지를 사용할 때에도 일반 html 방식으로 사용할 수 없고, 해당 이미지의 경로와 이름을 입력해서 임포트 시켜주는 방식으로 사용이 가능하다.

 

import를 시켰다면, 해당 컴포넌트를 태그를 사용해서 불러와준다.

컴포넌트를 불러온 코드와, 작성한 코드에 따른 결과이다. 결과는 위와 같다. 화면에 해당 컴포넌트들이 잘 표시되는 것을 볼 수 있다.

 

여기까지 기본 컴포넌트 사용 방법이 대하여 알아보았다. 다음에는 state를 사용하여 프로그래밍을 해 보는 방식을 정리하겠다.