React create-react-app에 대한 간단소개

 

React란?

• 웹 프레임워크, 정확히는 프론드엔드 쪽에서 쓰이는 프레임워크이다.
• 프레임워크는 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조며, 소프트웨어 개발에 있어 하나의 뼈대 역할을 한다. - 나무위키 왈
• 정의가 직관적으로 이해가 잘 안 된다. 그냥 내 편의대로 해석하자면 웹 프론트엔드 개발을 붕어빵 만들기에 비유하면 프레임워크라는 붕어빵 틀을 가져다 사용하는 것이라고 생각한다. 여러개의 유용한 붕어빵 틀을 적절하게 사용하여 보기 좋고, 맛도 좋은 붕어빵 한 봉지를 완성시키는 것이다. (즉 프레임워크 개발을 위한 도구상자라는 것)
• Facebook에서 만들었다.
• Angular.js와 Vue.js랑 함께 많은 인기를 얻고 있는 프레임워크다.

---

React 설치 & React로 구성된 프로젝트 폴더 만들기

• Node.js와 npm을 다뤄보지 않았다면 여기서 멈추고 Node 쪽을 먼저 배울 것을 권한다!

• terminal을 열고 아래 명령어를 입력한다.

  npm install create-react-app -g

• "create-react-app"이라는 모듈을 사용하면 react를 실습하기 위한 환경이 자동으로 세팅된다.

• 원래 처음부터 모듈을 하나씩 설치하려면 react, babel, webpack 등을 설치해주고, 각각 설정도 해줘야 하는데 이 과정이 매우 복잡하다. 한 번 시도했다가 망했는데, 이런 세부적인 과정들을 알아두는 것도 중요하다고 생각하기에 다음에 다시 시도해 볼 예정이다. 기회가 된다면 이 과정도 포스팅 해야겠다:)

• "-g" 옵션을 주었기 때문에 컴퓨터 어디에서든지 create-react-app을 실행할 수 있다. 터미널 안에서 실습 프로젝트를 만들고 싶은 폴더 위치로 이동한 다음, 아래와 같이 입력해준다.

  creact-react-app <새로 만들 폴더명>

• 터미널에 어마무시한 글들이 뜨고, 조금 기다리다 보면 "Happy Hacking!" 이라는 마지막 말과 함께 설정한 이름의 프로젝트 폴더가 생성되어 있을 것이다.

• 생성된 프로젝트 폴더 안으로 들어가서 아래의 명령어를 입력하면 자동으로 기본 브라우저에 React 페이지가 뜰 것이다. 그렇다면 설치가 잘 된 것이다!!!

  npm start

---

초기 폴더구조

├── node_modules
├── package.json
├── package-lock.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── serviceWorker.js
    └── setupTests.js

• 브라우저 화면에 뿌려지는 것은 기본적으로 public/index.html이다.
• React를 이용해 조작하는 것은 src 폴더 안에서 주로 일어난다.
• App.js에서 코드 조각들(react component들)을 합쳐서 export해주고, index.js에서 그걸 받아 ReactDOM으로 랜더링해준다. 이 랜더링에서 public/index.html의 어떤 부분에 코드 조각들을 넣어줄지 결정된다. (기본 세팅은 div id="root"에 랜더링 된다)