251일차 리액트(React) - 영화 평가 웹사이트 (3) : 본격적인 시작

---

환경 설정

1. 리액트 생성

 

2. package.json 파일 수정

package.json에서 scripts 키 값을 수정한다. scripts에 있는 명령어는 start, build, test, eject인데, 이 중에서 test와 eject는 사용하지 않을 예정이니까 삭제한다.

Before

After

포트 3333으로 변경

3. npm start (로컬 개발서버 열기)

 

4. public & src 파일 훝어보기

 

- favicon.ico : 웹페이지를 열었을 때, 최 상단 탭에 표시되는 아이콘

- index.html : 예제 템플릿

- logo.svg logo192.png logo512.png : 아이콘

- robots.txt : 크롤링 허용 비허용 설정하는 파일로 보임.

- manifest.json : 웹페이지 기본값 설정으로 보임. 아이콘 및 제목 등등

 

5. 필요없는 파일 삭제(setupTests.js, serviceWorker.js, logo.svg, index.css, App.css, App.test.js, package-lock.json)

 

6. index.js 수정

 

7. App.js 수정

 

---

리액트 동작 원리 알아보기

 

- public/index.html

 

- src/index.js

 

- src/App.js

 

- 크롬 개발자모드

 

public/index.html의 #root에 값이 들어가있다. 즉, index.js는 #root를 찾고 App.js의 내용물을 넣어주는 형식으로 보인다.

 

index.js를 좀 더 가독성 좋게 바꿔보자.

render 즉, 그린다. 어떤 것을? App 함수를, 어디에? ID값을 root로 갖고있는 부모 요소 밑으로.

 

그렇다면, 앞으로 내가 리액트로 페이지를 그리고 싶다면, 필요한 작업을 생각해보자.

 

Custom 작업 (index.html이 아닌 다른 경로의 파일로 작성할 시 -> 지금은 index.html이 무조건 디폴트로 잡혀있어서 이를 바꾸는 방법은 알아봐야 할 필요가 있을 듯)

1. Base 템플릿 생성 (public 폴더에다가)

 

2. Base 템플릿 안에 넣을 내용물 JS 파일 생성 (src 폴더에다가)

 

3. 위의 2개를 연결해 줄 JS 파일 생성 (src 폴더에다가)

 

기본 작업

1. index.html에 필요한 페이지 구상에 따른 컨테이너를 나누고, 리스트나 비동기 처리가 필요한 부분을 생성

 

2. src폴더에서 index.js 파일을 통해 index.html의 특정 태그에 연결할 함수를 설정하고 그 함수에 맞는 JS파일을 생성.

 

 

---

리액트 기초 개념

 

1. 컴포넌트(Component)

컴포넌트 정의 및 구현

App 컴포넌트를 임포트하여 사용

 

 

2. JSX ( HTML & JavaScript를 조합한 문법) -> 이게 리액트 문법으로 보임.

여기서 주의해야 할 점을 발견했다. 처음에는 testJSX로 작명했지만, 읽어오질 못했고, 그 다음에는 testjsx로 작명했지만 이것도 읽어오지 못했다. 하지만 Testjsx와 TEStjsx 그리고 TestJSX로 작명한 경우에는 잘 읽어왔다. 이를 통해 알 수 있는 것은, 컴포넌트의 작명은 무조건 대문자로 시작해야 한다는 점이다.

 

 

- App.js 안에 TestJsx.js 내용물 집어넣기

 

3. Props (프랍스)

프랍스는 컴포넌트에서 컴포넌트로 전달하는 데이터를 말한다.

 

기존 방법

ES6 구조 분해 할당 방법

- 여러 개의 프랍스 사용

 

- Props & Map 응용

 

 

- Prop-types (전달받은 프랍스가 내가 원하는 값인지 체크)

 

---