React 소스코드 수정 및 컴포넌트 생성

PINEA·2022년 6월 7일

React 생활코딩

리액트 - 생활코딩

목록 보기

2/3

이번에는 생활코딩 3강, 4강에 해당하는 내용을 제 방식대로 풀어서
제!가! 이해하기 쉽게 정리해 보았습니다.😎

react..! 수정하는 법은 알아야지!

앞선 글에서도 언급했는데, npm start를 한다는 것은 index.js를 찾고
거기에 적혀있는데로 동작하게하는 것이다.

자, 그 다음으로 주목할 것은 저 <App / >다.

<App / >를 삭제하면 UI가 사라진다....

import App from './App';

<App / >태그는 맨위의 저 코드를 의미한다.
이 App은 어디서 왔냐면 from 앞의 ' . '을 주목하자
' . '은 현재 디렉토리를 의미한다.
즉, index.js가 위치하고 있는 현재 디렉토리의 App.js로 부터 (현재 확장자명이 숨겨져 있음)
<App / >태그가 왔다라는것임.

이것을 보고 알수 있는것은 index.js안에 전역적인 설정을 할수 있다는 것!

아이디 값이 'root'인 태그로 렌더링되라고 하는 코드

자,저 ID값이 'root'인 이 tag는 어디에 있고 어떻게 작동할까?
바로 public > index.hmtl에 있다.

리액트 배포한다고?

npm start로 실행시킨 어플리케이션은 "개발"을 위한 애플리캐이션이다.
서비스하기엔 불필요한게 많기에 어떻게 하면 서비스하는데 최적화할수 있는가?!

일단, 터미널을 키자 기존에 켜져있던 개발환경이 있다면

control+c

라는 단축키로 끌수있다.

npm run build

npm run build는 베포판에 만드는 과정!
이걸 실행하면 build라는 폴더가 생긴다

파일열어보면 공백하나 없이 적혀져 있는데 그건 배포할떄 파일의 용량을 줄이기 위해서 최대한으로
다이어트를 한것임!

이때 터미널을 보면
serve라는 앱을 쓰라고 추천하는걸 볼수있다.
serve는 웹서버인데 이 serve에다가 -s라는 옵션을 주면 사용자가 어떤경로로 들어오던간에
index.html이라는 파일을 서비스해주게 된다.

serve -s build는 저 build라는 폴더에 있는 index.js를 서비스해주겠다 이말.
serve는 노드로 만들어진 어플리케이션이기 때문에 간편하게 실행시키기 위해서는
npx를 쓰면 된다.

npx serve -s build

react component

react가 돌아가는 구조, 수정 배포하는 법까지 알았으니 이제 본격적으로
어떻게 사용자 정의 태그를 만드는지 정리해보겠다!

이걸 보면 알겠지만 이대로 쭉 이 페이지를 쓰다보면 코드가 200~500줄은 껌으로 넘겨버리기 쉽다
그럼 보기도 어려워지고 이 페이지에 대해 파악하기도 어려워진다
그래서! 우리는 정리정돈을 하기로 했다!
정리정돈의 핵심은 서로 연관된 것끼리 모아 그룹핑을 하고 거기다 이름을 붙이는것
그럼 우리는 그 이름만 알면 된다. so EZ😆