React.js 기초(2) ( 구조, 배포법 )

React의 구조

React에 대한 개발 세팅이 끝난 후, React의 구조를 살펴보면

이와 같이 어떠한 사용자 설정 없이 이러한 프레임워크 기반으로 구성되어 있는 것을 알 수 있다.

일단 여기서 가장 먼저 index.html 파일을 열어보면,

이러한 코드가 들어가 있는 것을 확인할 수 있는데, 이는 즉, id가 root인 것에 대한 정보들이 index.html 파일 안에 기술되고 보여지는 것이라고 이해할 수 있다. (물론 root를 다른 변수명으로 지정해도 무관하다)

 

그렇다면, 이 index.html 파일을 기술하는 부분은 어디에 위치하는 것일까?

 

이는 src라는 폴더 안에 명시되어 있는 것을 알 수 있다.

여기서 index.html에 대한 정보를 담고 있는 index.js 파일을 보게 되면

위와 같은 파일구조인데 document.getElementById('root')를 통해 예상했던 바와 같이 root에 어떠한 전달해주는 것을 알 수 있다.

이 때 ReactDOM에 대한 내용이 나오는 것을 알 수 있는데 이 내용은 궁금해서 구글링을 통해 찾아보았다.

먼저 가상 DOM이 어떠한 것인지 알고 있어야 하는데,

 

 가상 DOM이란?

• 실제 DOM에 접근하는 대신, 이를 자바스크립트 객체로 구성해 추상화하여 사용하는 방식입니다.
• 리액트가 모든 처리를 대신 해주기 때문에 위와 같은 DOM API 조작 작업을 직접 신경 쓸 필요가 없습니다.
• 대신 가상 DOM을 다루거나 리액트가 UI를 생성하고 브라우저와 상호작용하기 위해 사용하는 몇 가지 명령만 다루면 됩니다

[React] 순수 리액트 (가상 DOM, 리액트 엘리먼트, ReactDOM)

또한 이 내용들과 관련된 것으로 React Element와 React DOM이 있는데, 이 내용들은 아래와 같다

🧐 React Element (리액트 엘리먼트)

• 가상 DOM은 리액트 엘리먼트로 이루어져 있습니다. 또한 브라우저 DOM은 DOM 엘리먼트로 이루어져있습니다.
• 이 때, 리액트 앨리먼트는 그에 대응하는 실제 DOM 엘리먼트가 어떻게 생겨야하는지 기술해줍니다. (리액트 엘리먼트 -> DOM 엘리먼트)

🧐 React DOM

• React DOM이란 Virtual DOM에서 HTML을 생성하는 데 필요한 라이브러리이다.
• React DOM에는 리액트 엘리먼트를 브라우저에 렌더링하는 데 필요한 모든 도구가 들어 있습니다.
• render 메소드와 서버에서 사용하기 위한 renderToString과 renderToStaticMarkup 메소드가 있습니다.

 

일단 이러한 기초 지식들을 기반으로 생각해본다면, ReactDOM에 명시된 내용들은 App에 담긴 내용들이 들어갈 것이라는 것을 추측해볼 수 있다.

이 내용들은 초기값은 아니며 수정된 값들이지만 App은 Component라는 것을 기반으로 한 코드인데, 이 Component라는 개념이 React의 핵심 중 하나이다.

 

이전에 언급했던 것처럼 React의 특징 중 하나는 컴포넌트 기반으로 재사용성이 뛰어나다는 것인데 

컴포넌트의 개념은 쉽게 말해 모듈화를 진행한다는 이야기이다. HTML을 통해 직접 코딩해본 사람은 알겠지만 프론트엔트 프레임워크를 사용하지 않는 한 비슷한 내용들을 중복되게 계속해서 사용해야 하는 효율성이 굉장히 떨어지는 경험들을 해봤을 것이다. 이를 컴포넌트라는 것을 통해 모듈화 시킴으로써 독립적으로 분리하여 재사용성을 뛰어나게 만들어준다. 또한 이는 보수 작업 시에도 더욱 편리함을 느낄 수 있다.

 

또한 작성 법에는 function type과 class type이 존재하는데 내가 들은 강좌에서는 class type 기반으로 수업 내용을 진행했기 때문에 class type으로 코딩을 수행하였다.

 

모듈화는 이러한 형태로 src 폴더 안에 components라는 디렉토리를 만들어 안에 사용자가 원하는 키워드의 component들을 생성해주면 된다. 

component 정의

App.js 정의

여기서 보이는 props란 그럼 무엇일까?

 

리액트의 props는

 

1. <Header></Header>

2. <Header title="WEB" sub="WorldWideWeb"></Header>

1번 처럼만 사용가능했던 Header컴포넌트를, 2번 방법처럼 App컴포넌트에서 값을 직접 정의해 사용할 수 없을까? 하는 고민에서 등장한 해법이다.

마치 HTML 태그의 속성처럼, 한 컴포넌트의 요소에 props value를 지정하면 다른 컴포넌트에서 그 value에 값을 넣어 사용할 수 있는 것이다.

 

즉, 위에서는 App.js에서 title,sub를 정의한 것을 토대로 component에서 해당 값들을 props로 받아서 작성할 수 있는 것이다.

또한 state의 개념이 등장하게 되는데, status란 현재의 상태를 알아내는 방법으로,

 

State는 props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체지만,

props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 

state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다는 차이가 있다.

props를 사용했는데도 state를 사용하는 이유는, 

사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있다.

 

 

React 기반 배포법

배포하는 법 - build를 사용한다 그 이유는?

 

react 기반 웹사이트 개발자 도구로 네트워크 확인

생성된 localhost를 통해 build되는 것을 확인이 가능한데 이 때 개발자 도구 => 네트워크를 통해 확인해보면 웹사이트의 무게가 상당히 무거운 것을 알 수 있는데 이는 로드 시에도 상당한 시간을 소요시키며, 불필요하게 React 기반의 프레임워크 모두가 웹사이트 안에 포함되어 있어 비효율적이며 더더욱 보안 이슈가 있기 때문에 클라이언트에게 이러한 파일을 전송받게 해서는 안 된다

 

npm run build 를 통해 Build라는 디렉터리가 생성되게 된다.

 이를 통해 실제로 서비스할 때는 빌드 안에 있는 것들을 업로드하면 된다

npm install -g serve를 통해 serve를 통해 npm을 통해 설치할 수 있는 간단한 웹서버가 있으며,

혹은 npx serve -s build를 한 번만 실행시킬 웹 서버를 배포할 수 있다. 이 때

npx serve -s build를 실행시키면 위와 같은 것이 나오며 해당 주소로 들어가면 웹서버가 실행되는 것을 알 수 있다.