[React] create-react-app 활용하여 간단한 React 앱 만들기

create-react-app를 사용한다면 단 하나의 명령 만으로 자신만의 리액트 프로젝트를 시작할 수 있다. 개발자는 빌드에 신경 쓰지 않고, 곧바로 코드 작업에 집중할 수 있다. 

 

Create React App

 

리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다. 

리액트로 웹어플리케이션을 개발하는 데에는 많은 node.js 패키지들이 필요하다.

• JSX를 JS로 변환해주는 babel
• 테스트를 돕는 jest 
• css 트랜스파일러인 post css  
• 다양한 패키지를 묶어주는 모듈 번들러 webpack 등.. 

 

즉 creat react app은 툴세팅이 복잡한 개발세팅을 미리 해준다.  Create React App은 리액트 프로젝트를 만드는데 최적화된 도구로서 Babel, webpack 같은 도구들이 이미 포함되어 있고, 굳이 따로 설정을 해줄 필요는 없다.

 

 

원하는 디렉토리에 들어가서 만들고 싶은 프로젝트명을 쓰면 해당 이름으로 풀패키지 폴더가 만들어진다. 

npx create-react-app@latest 폴더이름

 

패키지 속 구성을 살짝 들여다보면... 

• react-dom : 리액트를 브라우저 돔에 실제로 렌더링할 수 있도록 도와줌
• react-scripts : SPA 구현과 복잡한 모던 프론트엔드 기술 세팅이 준비되어 있음

 

아무튼 설치 완료! 아! 설렌다!!!

 

---

 

 

리액트 랜덤 명언 앱 만들기

 

설치가 끝나면 새로운 디렉토리가 생성되고 쉽게 개발을 할 수 있도록 Node.js 패키지를 node modules에 저장하고 있는 모습을 볼 수 있다. 패키지 목록은 package-lock.json, package.json 파일에 적혀있다.

 

 

핫 리로딩 기능이 적용되어서 바로바로 변화를 확인할 수 있다. 

 

 

 

 

 

//** index.js

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


const root = ReactDOM.createRoot(document.getElementById('root'));
// Document.querySelector 과 비슷한 역할을 한다. 
// <App /> 리액트로 개발한 것을 다 HTML 돔에 접근해서 엘리멘트에 넣어주겠다는 뜻 
// 원하는 위치를 DOM으로 가져오면 된다.


root.render(
// 리액트 개발 -> App.js 
    <App />          
);

//** App.js

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

function App() {

  const proverbs = ['살면서 저지를 수 있는 가장 큰 실수는 실수할까봐 끊임없이 걱정하는 것이다.',
  '더 나은 당신이 되기 위해 노력하고 매일 당신의 기록을 깨뜨려라.',
  '위대한 성과는 힘이 아닌 인내의 산물이다.',
  '작은 변화가 일어날 때 진정한 삶을 살게 된다.',
  '세상의 유일한 기쁨은 시작하는 것이다.',
  '어디를 가든지 마음을 다해 가라.']

  const getRandomIndex = (length) => {
    return parseInt(Math.random() * length);
  }



  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {/* <code>src/App.js</code> and save to reload. */}
        </p>
        {proverbs[getRandomIndex(proverbs.length)]}
      </header>
    </div>
  );
}

export default App;

 

 

* Math.random()함수는 0 이상 1 미만의 구간에서 근사적으로 균일한(approximately uniform) 부동소숫점 의사난수를 반환한다.

 

 

 

 

결과

 

좋아하는 속담을 넣어보았다.

마음을 다해 힘껏 가는 중 :)