[ React ] - 기본 개념 프로젝트 생성

 React

리엑트는 SPA로서, 독립적이며 재사용이 가능한 UI 컴포넌트를 통해 화면이 구성된다. 기존에 웹사이트 구현 방식이 HTML, CSS, Javascript가 별도로 구분되어 관리되던 형태인 반면, 컴포넌트 기반인 리엑트는 HTML, CSS, Javascript를 컴포넌트 단위로 묶어 함께 관리하는 것이 특징이다.

 

React 동작 방식

기존 MPA 형태의 사이트는 서버로부터 완성된 페이지를 받아 구현되는데, 리엑트는 처음의 요청에 해당 사이트에 존재하는 모든 페이지 구헌에 필요한 데이터를 서버로부터 받아 브라우저가 그 데이터들을 조합하여 사용자 UI를 구현한다. 이후에 추가 사용자 요청이 있는 경우에는 서버에 json 형식의 데이터만을 요청하고 응답받아, 기존의 UI에 데이터를 조합하는 식으로 화면을 구현한다.

리엑트는 화면을 변경할때에 Virtual Dom개념을 사용한다. 실제 브라우저 환경인 실제 DOM과, 데이터 모음으로 구성된 Virtual DOM을 서로 비교하여, 일치하지 않는 부분을 파악하고, 이를 실제 DOM에 반영시킨다.

* MPA : Multi-Page Application
용어 뜻 그대로 여러 페이지로 구성된 어플리케이션을 의미한다. 브라우저 즉 사용자의 요청에 따라 서버에서 매 페이지를 생성하여  이를 브라우저에 응답하여 준다. MPA 어플리케이션의 가장 큰 특징은 매 요청시마다 서버에서 페이지가 생성되어 사용자에게 전달된다는 점이다. 즉 서버에서 페이지가 생성되어 사용자에게 전해지게 된다.

* SPA : Single-Page Application
MPA와 반대로 한 페이지로 구성된 어플리케이션을 의미한다. SPA 형태의 어플이케이션의 경우 일반적으로 사용자가 사이트에 접속하는 최초의 요청에 사이트의 모든 페이지 구현을 위한 모든 리소스를 전달받는다. 그리고 이후에 사용자가 다른 페이지 요청시에는 해당 페이지 구현을 위해 필요한 json형태의 데이터만 서버로부터 요청 응답받아 페이지를 구현한다. 

일반적으로 매 페이지를 서버에서 생성하는 MPA를 SSR(:Server Side Rendering)이라 하며,  서버에서 받은 데이터를 기반으로 브라우저가 ui를 구현하는 SPA를 CSR(:Client Side Rendering)이라 한다.

 

기본 프로젝트 구현

> yarn create react-app [프로젝트명]    / npm init react-app [프로젝트명]

위의 명령어는 react 프로젝트를 위한 기본 개발 환경을 구성하여 준다. 

> yarn create react-app my-app --template typescript

위의 명령어는 타입스크립트 기반의 개발 환경을 구성하여 준다.

명령어를 통해 프로젝트 생성시 위와 같은 기본 구조가 된다.  

* 기본 폴더 구조
- node_modules : 해당 프로젝트에 사용되는 라이브러리 보관 폴더
- public : 프로젝트에 필요한 정적 파일을 보관하는 폴더
- src : 프로젝트를 위한 실질적인 코드 작성을 위한 폴더이다.
- .gitignore : github와 같은 버전 관리 툴을 이용할 때 올라가지 않도록 할 파일이나 폴더를 관리해주는 파일이다.
- package.json : 프로젝트 정보 (프로젝트명, 실행 빌드 명령어, 버전, 설치된 라이브러리 등) 관련 파일
- Readme.md : 해당 프로젝트에 대한 설명이나 필요한 설정에 대한 내용을 정리하는 파일이다.
- tsconfig.json
- yarn.lock

리엑트의 경우 .jsx 확장자를 가진 파일명을 사용하여, 더욱 간결한 코드 작성이 가능해진다. 일반적으로 html과 javascript 코드를 함께 작성할 필요가 있는 경우 .jsx 확장자명을 가진 파일명을 사용하고, javascript만으로 이루어진 파일인 경우 .js 확장자명을 가진 파일을 생성하여 사용한다. 

ex) jsx확장자명으로 파일 생성하여 코드 작성한 경우

ReactDOM.render(
	<h1 className='heading'>Hello World</h1>,
    	document.getElementById('content')
)

ex) js 확장자명으로 파일 생성하여 코드 작성한 경우

ReactDOM.render(
    React.createElement(
    	'h1',
        {className: 'heading'},
        'Hello World'
    )
)

즉 위의 코드는 다른 형태의 코드로 되어있지만 결과적으로는 같은 Hello World를 출력한다. 이는 기존의 js 확장자로 되어 있는 코드를 html과 js 코드를 함께 사용할 수 있는 jsx확장자 파일로 확장을 지원하는 babel이라고 하는 javascript 컴파일러를 통해 가능한 것이다.

* babel이란?

* 리엑트 기본 코드 작성법
- 컴포넌트는 css, javascript, html 코드 등 화면을 구성하는 요소들을 그룹화한 것으로, 리엑트의 핵심이다.
- javascript 코드는 { } 안에 작성한다.
- class 예약어는 className으로 대체하여 사용한다.
- 화면에 구현되는 부분은 return () 안에 작성해주어야 한다.
- return 안에 여러개의 태그가 들어가는 경우에는 <></>이와 같이 전체 태그를 빈 태그로 감싸는 식으로 작성해야 한다.
- 리엑트 컴포넌트는 맨 앞에 대문자로 작성하며, html 코드는 본래 코드를 유지한다.  ex) 컴포넌트 -> <Button/>   html 코드 -> <h1></h1>  <p></p>
- 컴포넌트는 클래스 기반과, 함수기반 두가지 형태가 존재한다.
- 인라인으로 스타일 작성 시에는 <div style={{color:"blue"}}>style</div> 이와 같이 style={{스타일명:"값" }} 작성하여  준다. 이때에 주의할 점은 스타일명 font-size나 background-color 등으로 되어있는 경우에는 카멜케이스로 변경하여 fontSize backgroundColor 이런 식으로 작성하여 주어야 한다.

컴포넌트 기본 구조

 

 

[ 출처 ]코딩애플 https://www.youtube.com/playlist?list=PLfLgtT94nNq0qTRunX9OEmUzQv4lI4pnP