2. 리액트란_1
: 리액트의 기본 구조
설치한 리액트 폴더 구조를 살펴볼 것이다.
우선 index.html과 index.js는 이름을 바꾸면 안된다!!
그리고 src 폴더에 JS와 CSS 파일들을 넣으면 된다. Webpack은 여기에 있는 파일만 보기 때문에 이 폴더 이외에는 webpack에 의해 처리되지 않는다.
+) webpack은 간단히 여러 자바스크립트 코드를 압축하여 최적화하는 것이라고 생각하면 된다!
또 알아야 할 파일은 Package.json
이는 해당 프로젝트에 대한 정보들이 들어있다. 라이브러리들의 이름과 버전들, 스크립트들이 명시되어있고 node_moduls 폴더가 삭제되어 있다면 npm install을 통해 설치하면 된다!!!
2. 리액트란_2
: 리액트 실행
계속했던 것처럼 리액트를 시작하려면 npm run start 를 해주면 된다.
이렇게 스크립트에 start 명령어가 있기 때문이지!!
만약 npm run build를 해주면 새로운 build 폴더가 생긴다.
build 폴더에는 웹펙을 통해 우리가 개발한 환경들이 압축되어 들어간다. 이는 나중에 만든 앱을 베포를 하게 될 때 베포된 환경에서 앱을 볼 때 필요하기 때문에.. build 폴더 안에 필요한 것들이 들어가는 것!!!!!!
그리고 npm run test는
이 App.test.js가 리액트 앱을 테스트 하는데 필요하기 때문에 이를 실행시킨다!!
2. 리액트란_3
: SPA(single page applicaion)
지금까지 App.js 파일의 코드를 변경하면 화면이 바뀌는 것을 확인할 수 있었다.
이게 어떤 순서를 통해 변화하는지 살펴보면..
우선 index.html 에서
이 div 부분을 지우면 모든 화면이 사라진다.
이 부분은 index.js에서
자바스크립트의 시작점이다.
detElementById 즉, 아이디가 root인 element 요소를 잡아준다!! 그래서 이 element 안에서 화면을 꾸밀 수 있는 것이다.
이는 SPA 방식을 사용하는 것이다.
기존에는 화면을 구성할 때 a 페이지는 a.html을 통해 보여주고 b 페이지는 b.html을 통해 보여줬다면
요즘에는 웹 사이트의 전체 페이지를 하나의 페이지(index.html)에 담아 동적으로 화면을 바꿔가며 표현한다.
이것이 SPA이다.
즉, 위의 root라는 id를 가진 div를 동적으로 화면을 바꿔가는 것이다. 그래서 템플릿이 하나만 있는 것
추가적으로 to-do 앱을 만들기에 아퍼 JSX에 대해서도 알아보자.
JSX는 자바스크립트의 확장 문법이다.
JSX는 자바스크립트와 html구조를 같이 사용하여 기본 UI에 데이터가 변하는 것들과 이벤트들이 처리되는 부분을 더욱 쉽게 구현할 수 있기 때문에 사용하는 것이다!
리액트에서 JSX의 사용이 의무는 아니지만 의무처럼 거의 대부분 사용함!
JSX에서 주의해야 할 문법 규칙은 실습을 하면서 알아보자!!!