2일차 : 소스코드 수정방법, 배포, 컴포넌트 만들기

2일차 : 소스코드 수정방법, 배포, 컴포넌트 만들기

 

1일차에 우리는 개발 3대 작업인 설치를 끝냈습니다.

(개발의 3대 작업은 설치, 수정 그리고 마지막은 배포입니다.)

 

수정하는 방법 자체는 5분이면 배운다고 하네요.

물론 수정을 어떻게.. 잘 하느냐가.. 관건이긴 하지만요..ㅎ

 

 

소스코드 수정방법

 

지난번에 create react를 이용해 개발 환경을 세팅했는데요.

지난 시간에는 모르고 지나쳤지만, 우선 이 방법을 사용하면 어떤 디렉토리 구조를 갖게 되는 지 먼저 살펴보겠습니다.

 

 

지난번에 만들어 둔 리액트 폴더에 분명 아무 것도 없었는데..!

명령어 하나 넣어줬더니 트리가 아주 풍성한 가지를 갖게 되었네요.

 

우선 가장 중요한 것은 src라는 폴더에 index.js라는 파일을 찾는 것입니다. 이것이 바로 입구 파일입니다.

여러분이 npm start를 이용해서 create react app을 구동시키면 이 도구는 index.js 파일을 찾고, 그 파일에 적혀있는 대로 동작하게 되는 것입니다.

 

 

요기서 <App /> 부분을 지우면? 화면은 어떻게 바뀔까요?

 

 

네.. 오른쪽 옆에 아무것도 없어 보이지만, 아까랑 같은 주소입니다. 모든 것이 사라졌죠.

 

그럼 이 <App /> 부분의 실제 코드는 어디에 있을까요?

 

 

App 은 ./App 여기서 왔네요. 그럼 App.js 파일도 살펴봅시다.

 

 

아까 열렸던 페이를 Inspection을 통해 살펴보았을 때, App.js와 같은 코드가 확인됩니다.

그럼 App.js 파일을 수정하면? 보이는 페이지도 수정되겠죠.

 

결론적으로 src 안에 있는 index.js 가 전체적인 입구이고 여기에 전역적인 설정들이 들어갑니다.

그 안에서 각각 어떤 내용을 편집하면 되는지 살펴볼 수 있습니다.

내용 뿐 아니라 어떤 스타일을 적용하고 있는지 보려면 css 파일을 확인하면 되겠죠.

이 또한 어디서 참고하고 있는지, 살펴본 후, 그 곳으로 가서 수정하면 됩니다.

 

그런데 여기서! 처음보는 id가 등장합니다. 바로 dis class=app 위에 등장하는 div id=root 입니다.

root는 퍼블릭 폴더 안에 있습니다. public의 index.html에 가면 바로 id가 root인 태그가 있습니다.

 

 

자 이렇게 어디에 있는 무엇을 수정해야 하는지에 대해 간단하게 알아보았습니다.

그럼 마지막 단계인 배포도 알아봅시다.

 

 

배포

 

배포까지 할 줄 안다면, 우리는 이제 기본적으로 리액트를 할 수 있는 사람이 된 것입니다.

리액트는 npx를 이용하여 실행시킨 어플리케이션은 개발을 위한 어플리케이션입니다.

 

개발하기엔 좋지만, 실제로 서비스 하기에는 용량도 크고 불필요한 메시지들도 많이 나옵니다.

효율적인 배포본을 만들기 위해서는 우선 터미널을 켜야합니다.

 

기존에 열려있는 작업이 있으면 ctrl + c 를 통해서 일단 닫아주고, npm run build를 입력해줍니다.

 

 

이 작업이 끝나면 build라는 폴더가 생성됩니다.

 

 

여기서 index.html 파일을 열어보면, 띄어쓰기 조차 없는 효율 100프로의 배포용 결과물이 나옵니다.

이 결과물을 실행하려면 서브라는 앱을 사용하면 됩니다.

serve -s build 라고 위에 설명이 나와있죠. npx를 이용하면 됩니다.

 

 

그럼 이렇게 결과물이 나옵니다!

두 가지 주소가 나오는데요. 모두 클릭해서 바로 이동할 수 있습니다.

 

이렇게 리액트가 무엇인지 간단하게 알아보았고, 수정과 배포 방법도 살펴보았습니다.

 

 

컴포넌트 (사용자 정의 태그) 만들기

 

"리액트는 사용자 정의 태그를 만드는 기술이다." - 이것이 리액트의 본질입니다.

 

이제 어떻게 사용자 정의 태그를 만드는가를 배워보겠습니다.

 

일단 src의 app.js로 이동해서 간단한 코딩을 해보겠습니다.

기존의 내용은 다 지워주세요. function app()의 return 부분에 간단한 html 코드를 작성해 보겠습니다.

 

 

여기있는 코드가 엄청나게 많다고 가정해봅시다. 그러면 이 페이지의 전체적인 구조를 파악하기가 어렵습니다.

어지럽혀있는 상태를 정리정돈 해주면 좋겠죠.

비슷한 내용을 그룹핑해서 이름을 붙여줍시다. 바로 사용자 정의 태그를 만드는 것이죠.

 

사용자 정의 태그를 만들기 위해서는 함수를 이용해야 합니다.

리액트에서 사용자 정의 태그를 만들 때는 반드시 대문자로 시작해야합니다.

예를들어 대문자 Header는 사용자 정의 태그이고 소문자 header는 html의 태그가 되는 것입니다.

자바에서는 대소문자 구별이 매우 중요해요!

 

일단 맨 위의 헤더 부분을 함수로 만들어봅시다.

이렇게 적고, 아래 부분 내용은 지워버린 후, <Header></Header> 이렇게 대체해줍니다.

결과는 똑같아요!

 

 

여기서 만약 <Header></Header>를 여러번 입력한다면?

세줄짜리가 간단하게 한줄로 표현되면서, 안에 내용은 없어지니 훨씬 보기 편해졌죠.

 

 

이런식으로 사용자 정의 태그를 만드는 겁니다.

내용을 변경할 때에도 편리하겠죠.

WEB을 REACT로 변경해볼게요. 한 군데만 수정하면 바로 내용이 전체가 다 변경되죠?

 

 

이제 네비게이션 부분과 아티클 부분도 컴포넌트로 변경해볼게요.

 

 

너무 간단하고 전체적인 내용을 살펴보기도 편해졌죠?

반복시키기도 너무 좋구요. return 다음에 () 없이 바로 <nav></nav> 혹은 <article></article> 이렇게 내용을 적어도 됩니다.

 

 

각각의 코드가 이름을 갖고 있기 때문에 어떤 취지의 코드인지도 쉽게 파악할 수 있습니다.

또한 내용을 바꾸면, 같은 컴포넌트를 사용하고 있는 곳에서 동시에 수정을 할 수 있는 장점도 있습니다.

 

이렇게 컴포넌트를 만드는 기술 덕분에, 여러 태그들을 하나의 독립된 부품으로 만들 수 있게 되었습니다.

내가 만든 컴포넌트를 공유하거나, 다른 사람이 만든 컴포넌트를 사용할 수 있게 됨으로써 생산성이 훨씬 높아졌습니다.

이런 이유 때문에 많은 사람들이 리액트를 사용하게 되었고, 그만큼 거대한 리액트 생태계가 존재하고 있는 것입니다.