Create React App 폴더와 파일 기본 구조
npx create-react-app 으로 react-app 폴더와 파일을 생성해보자!
위와 같이 생성된다.
이름이 수정 되면 안되는 파일들
- public/index.html -> 페이지 템플릿
- src/index.js -> 자바스크립트 시작점
- public
여기에 쓰인 파일들은 오직 public.index.html만 쓰일 수 있다.
- src
대부분의 리액트 소스 코드들을 이곳에 작성한다.
JS 파일과 CSS 파일을 이곳에 넣으면 되고 Webpack은 여기에 있는 파일만 본다.
그래서 이 폴더 이외의 것은 Webpack에 의해 처리되지 않는다.
대부분의 리액트 소스 코드들은 이곳에 작성하면 된다.
- Package.json
해당 프로젝트에 대한 정보들이 들어있다.
프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전이 명시되어 있으며, 앱을 시작할 때 사용 할 스크립트, 앱을 빌드할 때, 테스트할 때 사용할 스크립트들이 명시되어 있다.
React App 실행해보기 (npm run start)
- start
"npm run start"
위 명령어로 리액트 앱을 시작할 수 있다.
- build
"npm run build"
위 명령어로 build 폴더를 생성한다. build 폴더 내부에는 배포 시 사용할 파일이 생성된다.
- test
App.test.js 파일 안에 작성된 test를 실행한다.
SPA(Single Page Application) 이란?
현재 App.js 파일의 소스 코드를 변경하면 변경한 부분이 화면에 적용이 된다. 이게 어떠한 순서로 실행되고 있는지 살펴보자.
- public/index.html
HTML 템플릿 파일이다. div 엘레멘트의 id를 root로 해놓았다.
- src/index.js
자바스크립트 시작점이다. 여기서 위에 root id를 가진 div 엘리먼트를 잡아 준다. 그래서 그 엘리먼트 안에서 화면을 꾸밀 수 있게 된다.
- MPA(Multi Page Application)
전통적인 웹 사이트를 만들 때 사용하는 방법이다.
두 개 이상의 페이지를 만들 때, a 페이지를 만들면 a.html, b 페이지를 만들면 b.html을 만드는 형태로 진행된 방법이다.
- SPA(Single Page Application)
웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 방법이다.
최근에 주로 사용하는 방식이며, HTML 5의 History API를 사용해 현재 페이지 내에서 화면 이동이 일어난 것처럼 보이게 한다.
React는 mpa가 아닌 템플릿 하나를 이용해 동적으로 화면을 바꾸는 spa를 사용한다.
History API
할 일 목록 앱 소개 및 JSX 알아보기
할 일 목록 애플리케이션 살펴보기
처음 어떠한 언어를 배우거나 프레임워크등을 익힐때 많이 만들어 보는 앱이 To-Do 리스트 앱이다. 그래서 React를 사용해 To-Do 리스트 앱을 만들어 보자!
JSX 알아보기 (Javascript syntax extension)
JSX는 JavaScript의 확장 문법이다. React에서는 이 JSX를 이용해서 화면에서 UI가 보이
는 모습을 나타내준다.
JSX를 이용하면 UI를 나타낼 때 JavaScrip(logic)와 HTML구조(markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있다.
리액트에서 화면을 그리는 방식
React.createElement API를 사용해서 엘리먼트를 생성한 후(객체가 된다.) 이 엘리먼트를 In- Memory에 저장한다. 그리고 ReactDOM.render 함수를 사용해 실제 웹 브라우저에 그려준다.
JSX는 createElement를 쉽게 사용하기 위해 사용한다.
모든 UI를 만들때 마다 createElement를 사용해서 컴포넌트를 만들 수는 없다. 그러기에 JSX를
사용한 후 그걸 바벨이 다시 createElement로 바꿔서 사용한다.
JSX를 사용하면서 주의해야 할 문법들(문법 규칙)
JSX를 사용하면서 지켜줘야 할 규칙들이 많다.
처음으로는, JSX는 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 한다.
이것 이외에도 많지만 다른 것들은 실제로 만들면서 알아가보자!
