5. 리액트 입문-Create-react-app

2023. 6. 1. 00:00

*이 게시글은 인프런-처음 만난 리액트 강좌를 보고 정리한 글입니다.

1. 직접 리액트 연동하는 법

아래와 같이 index.html 파일을 보면 <div id="root"></div>를 볼 수 있는데

DOM Container(Root DOM Node)으로

일단은 Virtual DOM의 시작점이라고 알고 넘어가자.

script태그를 이용해 리액트와 리액트 컴포넌트를 가져온다.

<html> <!-- index.html -->
    <head>
        <title>소플의 블로그</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>소플의 블로그에 오신 여러분을 환영합니다!</h1>

        <div id="root"></div>

        <!-- 리액트 가져오기 -->
        <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js " crossorign></script>

        <!-- 리액트 컴포넌트 가져오기 -->
        <script src="MyButton.js"></script>
    </body>
</html>

css는 리액트 구동과는 관련없으므로 안해줘도 상관없다.

h1{  /*styles.css*/
    color:green;
    font-style:italic;

}

My button.js 파일인데 무슨 말인지 모르겠지만 우선 그냥 타이핑하고 넘어가자.

//My button.js

function MyButton(prpos){ 
    const [isClicked, setIsClicked] = React.useState(false);

    return React.createElement(
        'button',
        {onClick: () => setIsClicked(true)},
        isClicked ? 'Clicked!': 'Click here!'
    )
}

const domContainer=document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton),domContainer);

위의 파일을 실행시키면 아래와 같은 화면이 나오며

Click here! 버튼을 클릭하면 Clicked!로 바뀌는 것을 볼 수 있다

이것은 리액트 컴포넌트의 state가 변경됐기 때문이다

지금까지 한 과정은 HTML로 아주 간단한 웹사이트를 만든 뒤 웹사이트에 <script></script>를 이용해 리액트를 추가한 뒤 실제로 리액트 Component까지 만들어서 렌더링을 해보았다.

리액트로 웹사이트를 만들 때마다 이러한 환경설정을 해야한다면 굉장히 번거롭기 때문에

곧바로 리액트 프로젝트를 만들 수 있도록 리액트를 자동으로 생성해주는 create-react-app 패키지를 이용한다

2. create-react-app

리액트로 웹 애플리케이션을 개발하는데 필요한 모든 설정이 들어있는 상태로 프로젝트를 생성해주는 도구이다.

(이전에는 웹팩, 바벨과 같은 도구가 필요했다)

이것을 사용하기 위해서는 우선 아래와 같이 Node.js, npm, VS Code가 필요하다

create-react-app은 npx명령어를 사용하면 실행할 수 있다.

명령어는 VS COde의 터미널이나 Powershell, cmd 아무데서나 해도 괜찮다.

npx create-react-app my-app을 하면 아래와 같이 뜨면서 만들어진다.

my-app자리에는 이름 아무거나 해도 상관없다.

실행이 다 됐다면

cd my-app (엔터)

npm start (엔터)

를 해주면 된다.

cd는 change directory의 약자로 경로 변경을 해준다.

cd명령어를 이용해 create-react-app으로 만든 my-app폴더안으로 경로를 이동시킨후 npm start(애플리케이션)을 실행시킨다.

아래와 같이 웹 브라우저가 뜨는 것을 알 수 있다.

그 후 VS Code IDE에 들어가면 해당경로에 아래와 같이 파일이 생성된 것을 볼 수 있다.

3. create-react-app하면 생성되는 파일 구성

1) READ.md

프로젝트의 내용을 설명하기 위해 사용하는 파일로써 프로젝트가 어떤 목적에 의해 개발되었는지, 어떻게 사용할 수 있는지 등을 적어 놓는 파일

이 파일은 깃허브 업로드 이후 확인 가능

2) package.json

프로젝트에 대한 설명, 종속성 패키지, 실행 스크립트 등의 정보를 담는 매니페이스(Manifest) 파일

3) favicon.ico

브라우저 제목과 함께 표시되는 아이콘

4. react 파일의 기본 구조

▶import 구문(불러오기)

import는 특정 파일을 불러오는 것을 의미하는데 리액트로 만든 프로젝트의 자바스크립트 파일에서는 import파일을 사용하여 다른 파일들을 불러와 사용할 수 있다.

*이렇게 모듈을 불러와서 사용하는 것은 사실 원래 브라우저에 없던 기능인데 이렇게 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 환경인 Node.js에서 지원하는 기능이다.

이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용하는데 번들은 묶는다는 뜻으로 파일을 묶듯이 연결한다는 것이다.

리액트 프로젝트에서는 번들러를 주로 웹팩으로 사용하는데 번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해준다.

index.js를 시작으로 필요한 파일을 다 불러와서 번들링하게 된다.

웹팩에서 이렇게 파일들을 불러오는 것을 웹팩의 로더 기능이라고 하는데 이 덕분에 SVG, CSS, 웹 폰트, 미디어 파일 등을 불러올 수 있게 되는 것이다.

웹팩의 로더는 원래 직접 설치하고 설정해야 하지만 create-react-app이 번거로운 작업을 모두 대신 해주기에 별도의 설정이 필요 없다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

▶export 구문(내보내기)

export default App;

참고문헌

1. [무료] 처음 만난 리액트(React) - 인프런 | 강의 (inflearn.com)

2. Do it! 클론 코딩 영화 평점 웹서비스-니꼴라스

3. 리액트를 다루는 기술-김민준

저작자표시 비영리 변경금지

'React' 카테고리의 다른 글

7. 리액트 입문-Elements가 뭘까 (0)	2023.06.03
6. 리액트 입문-JSX가 뭘까 (0)	2023.06.02
4. 리액트 입문-리액트는 무엇이며 Virtual DOM은 무엇인가 (0)	2023.05.31
3. 리액트 입문-개발환경 설정하기 (0)	2023.05.29
2. 리액트를 배우기 전 알아야 하는 자바스크립트 기초 문법 정리 (0)	2023.05.28

잡코딩 정보 블로그