(React.js) React 시작하기

by

반응 앱 만들기

: React는 Node.js 기반의 JavaScript 라이브러리로 Webpack, Babel 등 React를 다양한 방식으로 지원하기 위해서는 추가 라이브러리가 필요합니다.

*Webpack: 여러 JavaScript 파일을 모듈 번들 라이브러리로 하나의 파일로 결합한 패키지
*Babel: 자바스크립트 컴파일러, JSX와 같은 다양한 단순하고 기본적인 자바스크립트 코드 작성을 도와주는 패키지, 자바스크립트와 HTML을 혼합한 구문.

: 이러한 추가 패키지를 직접 설치하지 않더라도 반응 앱 빌드 명령으로 React 앱을 설정할 수 있습니다.

'추천 관련글,

: 리액트 앱을 생성할 폴더를 열고 터미널에서 다음 명령어로 생성합니다.

npx create-react-app 앱이름

*npx: 한 번만 설치되지 않는 패키지를 사용하고자 할 때 사용하는 npm용 편의 도구

반응 앱 실행

: 프로젝트가 생성된 디렉토리에서 다음 명령어로 프로젝트를 시작합니다.

npm start

: “성공적으로 컴파일되었습니다!” 메시지와 함께 제공된 URL로 접속하면 프로젝트가 시작되는 것을 확인할 수 있습니다.


반응 중지

: ctrl+c > “Y”를 입력하여 종료합니다.

프로젝트 구성

|_ node_modules : node.js 패키지의 구성 요소 중 하나로 외부 모듈을 저장하는 폴더.
|_ public : 정적 파일이 있는 곳
|_ favicon.ico : 웹사이트 상단 탭의 아이콘 파일
|_robots.txt : 경로를 지정하여 웹 크롤러와 같은 로봇의 접근을 제어하는 ​​규칙
|_ src: js 및 css 파일로 구성
|_ .gitignore : Git에 포함하고 싶지 않은 파일이나 폴더의 이름을 입력하기 위한 파일
|_ package.json : 기본 프로젝트 관련 내용(프로젝트명, 버전 등)을 기록하는 설정 파일
|_ README.md: 프로젝트 설명을 작성하는 곳

npm start로 실행되는 화면이 어떻게 구성되어 있는지 간단히 살펴보겠습니다.

위의 홈 화면은 App.js를 통해 구성됩니다.

아래의 코드 헤더 콘텐츠가 위의 스플래시 화면 콘텐츠와 일치하는지 확인할 수 있습니다.

//App.js
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

그런데 사이트의 개발자 도구에서 실행 중인 프로젝트를 보면 root id로 div 아래에 App.js의 내용이 첨부되어 있는 것을 확인할 수 있습니다.


App.js에서는 JSX 문법의 HTML을 반환하면서 컴포넌트를 빌드하고, 내보내기 표준으로 내보낸 함수를 다른 파일에서 가져와서 사용할 수 있도록 합니다.

index.js에서 App.js를 가져오면 루트 ID가 있는 div 아래에 앱 함수가 반환한 값이 배치됩니다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

이를 통해 구성 요소를 생성하고 삽입하여 React가 작동하는지 확인할 수 있습니다.

참조

(1) Infrastructure Bite React 강의: React 앱 구축

(2) 응답 폴더 구조: https://velog.io/@sisofiy626/React-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%9D%98-%ED%8F%B4%EB%8D%94 -%EA%B5%AC%EC%A1%B0