"생활코딩 | React 2022년 개정판" 을 공부하며.. 1탄

React 란?

1. 서로 연관된 코드들을 그룹핑하고 이름을 붙여 단순한 태그로 만들고
2. 복잡한 코드는 숨기고 사용자가 만든 태그를 사용할 수 있는 환상적인 도구

만드는 방법은 class(클래스) vs function(함수) 가 있으며 최근 동향에 맞게 함수형 채택했다.

 

실습환경 구축

먼저, 실습할 수 있는 방법으로 Stackblitz 를 소개하고 있다.
https://ko.reactjs.org/docs/getting-started.html#online-playgrounds

수업에서는 컴퓨터에 직접 개발환경을 셋팅하기로 하며, 몇 가지 툴체인 중 Create React App 사용

(참고 https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app)

npx create-react-app my-app
cd my-app
npm start

 

위와 같이 명령어를 실행하여 react 앱을 생성할 수 있으나 npx 를 실행하기 위해서는 node.js가 필요하고
https://nodejs.org/ko/ 에서 설치할 수 있다.

 

이제 실습하고자 하는 디렉토리 하위에 react-app 이라는 디렉도리를 생성한 후 VisualStudioCode 로 폴더를 연다.

다음으로 터미널을 실행해 아래의 명령어를 실행한다.

npx create-react-app .

 

저는 아래와 같은 질문이 나왔는데 y 입력 후 엔터를 치면 설치가 진행됩니다.

Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

Success! Created react-app at /Users/jongeun/Desktop/react-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd /Users/jongeun/Desktop/react-app
  npm start

Happy hacking!

 

설치가 완료되면 위처럼 보이게 되고 npm start 로 실행하게 되면 아래와 같이 3000번 포트로 웹브라우저가 실행되면서 샘플 react app이 뜨게 됩니다.

 

소스코드 수정 방법

npm start 를 이용해 create-react-app을 구동시키면 index.js 파일을 찾고 거기에 적혀 있는 대로 동작하게 되는데 해당 파일은 src 디렉토리에 존재한다.

./src/index.js 파일을 열어보면 9번째 줄에 <App /> 이라는 태그는 실행되는 UI의 전체이며, 해당 태그는 4번째 줄의 import App from './App'; 을 의미하고 .js 를 생략하고 있어 실제 내용은 App.js 파일 안에 있는 것이다.

 

./src/App.js 파일을 열어보게 되면 App() 함수안의 내용과 아래에 실행된 create-react-app의 div 태그와 동일한 것을 확인 할 수 있다.

 

div 태그 안에 "Hello React!" 를 입력하면 아래 이미지의 오른쪽과 같이 출력되게 됩니다.

 

정리하면 Index.js 에는 전역적인 설정이 들어간다고 생각하면 될 것이며, App.js 에서 내용을 편집해가면서 UI를 만들어가게 될 것입니다.

App.js 에서 import './App.css'; 보면 알 수 있듯 페이지의 디자인은 App.css 파일을 수정하면 되고 마찬가지로 index.js는 index.css 파일을 수정하면 됩니다.

 

그런데 <div id="root">...</div> 태그는 무엇인가? index.js 를 보면 1 <App /> 이라는 태그가 2 id 값이 root인 태그로 3 랜더링 되도록 선언되어 있는것을 확인 할 수 있습니다.

ReactDOM.render( <= 3 랜더링
  <React.StrictMode>
    <App /> <= 1 이 태그가
  </React.StrictMode>,
  document.getElementById('root') <= 2 id값이 root 인 태그로
);

 

id가 root인 태그는 public 이라는 폴더 안에 있고 그 안에 index.html 파일이 있는데 그 안에 id가 root인 태그가 있다.

index.css 와 app.css 내용을 지우고 app.css 에 body { backgrond-color: gray; } 를 입력한 후 index.html 의 id가 root인 태그에 아래 이미지와 같이 style을 입히면 다음과 같은 출력이 나오게 됩니다.

 

배포

npm run build

위 명령어를 보면 build 라는 것이 있는데 이는 배포판을 만드는 과정이라고 생각하면 된다. 이제 터미널을 열고 위 명령을 실행하게 되면 build 라는 폴더가 생기고 그 안에 index.html 과 기타 파일들이 존재하고 있을것이다. index.html 파일을 열어보면 공백조차 없는 것을 확인할 수 있다. 이는 배포 버전에 용량을 최소화하기 위해 생략된 부분이라 할 수 있다. 이제 결과물을 실행시켜 볼건데 그 전에 현재 터미널에서 실행되고 있는 3000번 포트 서비스를 중단할 때는 "ctrl + c"를 입력한다.

npx serve -s build

위 명령어에서 serve 는 웹 서버이며, -s 옵션은 사용자가 어떤 경로로 들어오든 index.html 파일을 서비스해주게 되고 build 라는 폴더를 지정해주게 되면 그 디렉토리 안의 index.html 파일을 서비스해 준다고 생각하면 된다.

이제 위와 같이 명령어를 실행하게 되면 아래와 같이 웹서버가 실행되고실제 서비스에 사용할 수 있는 파일이 웹에서 출력되는 것을 확인해 볼 수 있게 됩니다.

 

여기까지

1. React는 사용자 정의 태그를 만드는 도구이며,

2. class 혹은 function 형태로 개발이 가능하나 최근에는 function 으로 진행이 되고 있다.

3. 그리고 npm을 통해 소스를 빌드하고 최소한의 용량으로 배포 할 수 있다.

 

React에 도입할 준비를 해본 것 같다. 복잡한 태그들을 분리할 수 있다면 재사용성과 확장성의 도움이 많이 될 것 같다고 생각이 든다.

다음에는 컨포넌트를 만들어 보고 prop, 이벤트, state 에 대해 학습하고 정리해보도록 하자.