2. 간단한 TO-DO 앱 만들며 리액트 익히기 / 상
01. Create React App으로 실행된 리액트의 기본 구조 살펴보기
npx create-react-app 으로 설치 시 폴더와 파일이 생성된다.
- 이름이 수정되면 안되는 파일들
① public/index.html
→ 페이지 템플릿
② src/index.js
→ 자바스크립트 시작점
- public
여기에 쓰인 파일들은 오직 public.index.html만 쓰일 수 있다.
- src
대부분의 리액트 소스 코드들을 이곳에 작성한다.
JS 파일과 CSS 파일을 이곳에 넣으면 되며, Webpack은 이곳에 있는 파일만 본다.
즉, 이 폴더 이외에 것은 Webpack에 의해 처리되지 않는다.
- Package.json
해당 프로젝트에 대한 정보들이 들어있다.
프로젝트 이름, 버전, 필요한 라이브러리와 라이브러리의 버전이 명시되어 있고 앱을 시작할 때 사용 할 스크립트, 앱을 빌드할 때, 테스트할 때 사용할 스크립트들이 명시되어 있다.
02. React App 실행해보기
" " 안에 있는 명령어로 시작, 빌드, 테스트 한다.
#명령어는 바꿀 수 있다.
- "start"
npm run start 명령어로 리액트 앱을 시작할 수 있다.
- "build"
npm run build 명령어로 build 폴더를 생성한다.
build 폴더 안에는 배포 시 사용할 파일들이 생성된다.
- "test"
App.test.js 파일 안에 작성된 test를 실행한다.
03. SPA란 ?
현재 App.js 파일의 소스 코드를 변경하면 변경한 부분이 화면에 적용된다.
이것은 어떤 순서로 실행되고 있을까?
- public/index.html
div 엘리먼트의 id를 root로 해두었다.
#이 부분을 지우면 앱 실행시 아무것도 출력되지 않는다.
- src/index.js
여기서 root id를 가진 div를 잡아 그 엘리먼트 안에서 화면을 꾸밀 수 있게 해준다.
- MPA(Multi Page Application)
전통적인 웹 사이트를 만들 때 사용하는 방식.
#a 페이지를 만들면 a.html, b 페이지를 만들면 b.html을 만드는 것.
- SPA(Single Page Application)
웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현.
#최근 사용하는 방식, 즉 하나의 페이지에서 화면 변환을 통해 다른 페이지로 넘어간 것처럼 보이게 한다.
- SPA에서의 화면 변환
HTML5의 History API를 사용해서 가능하게 만든다.
자바스크립트 영역에서 History API를 이용해서 현재 페이지 내에서 화면 이동이 일어난 것처럼 작동하게 해준다.
#너무 자세하게 알지 않아도 된다.
- History API
| History.back() | 세션 기록의 바로 뒤 페이지로 이동하는 비동기 메서드. 브라우저의 뒤로 가기를 누르는 것과 같은 효과. |
| History.forward() | 세션 기록의 바로 앞 페이지로 이동하는 비동기 메서드. 브라우저의 앞으로 가기를 누르는 것과 같은 효과. |
| History.go() | 특정한 세션 기록으로 이동하게 해주는 비동기 메서드. 1을 넣어 호출하면 바로 앞 페이지로, -1을 넣어 호출하면 바로 뒤 페이지로 이동. |
| History.pushState() | 주어진 데이터를 세션 기록 스택에 넣는다. 직렬화 가능한 모든 Javascript 객체를 저장하는 것이 가능. |
| History.replaceState() | 최근 세션 기록 스택의 내용을 주어진 데이터로 교체. |
04. To-Do 앱 소개 및 JSX 알아보기
할 일 목록 애플리케이션은 처음 언어를 배우거나 프레임워크를 익힐 때 많이 만들어보는 앱이다.
- JSX (Javascript Syntax Extansion)
자바스크립트의 확장 문법이다.
JSX를 사용하면 UI를 나타낼 때 자바스크립트(logic)와 HTML 구조(markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있다.
#사용이 의무는 아니지만, UI 작업시 편리성 때문에 대부분의 사람이 사용한다.
- 원래 리액트에서 화면을 그리는 방식
React.createElement API를 사용해서 엘리먼트를 생성한 뒤, 이 객체를 In-Memory에 저장한다. ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려준다.
→ 모든 UI를 만들때마다 createElement를 사용해서 컴포넌트를 만들수는 없다. 그렇기에 JSX를 사용한 후 그걸 바벨이 다시 createElement로 바꿔서 사용한다.
- JSX를 사용하면서 주의해야 할 문법
JSX는 컴포넌트에 여러 엘리먼트 요소가 있다면 반드시 부모 요소 하나로 감싸줘야 한다.
#자세한 건 만드면서 알아가보자.