1.리액트소개

1.1.리액트란?

🔗 리액트공식커뮤니티

• JavaScript 라이브러리
• UI(사용자 인터페이스)를 만들기 위해 Facebook에서 개발.
• 페이스북과 개발자,기업,단체에 의해 유지보수됨.
• 리액트는 싱글 페이지 애플리케이션 이나 모바일 애플리케이션 개발에 사용되기도 함.

1.2.리액트의 특징

• JSX (javascript extension)라는 자바스크립트 확장문법을 사용한다.
• 웹브라우저에서는 바로 JSX를 해석할수 없으며 바벨이라는 트랜스컴파일러를 이용해서 자바스크립트로 변환후 웹 브라우저에 적용한다. • https://babeljs.io/repl 에서 변환되는 과정을 볼수있다
• SPA (Single Page Application) 이다.
• 모바일애플리케이션을 개발할 수 있다. (ReactNative)
• 컴포넌트로 구조화된 태그를 한방에 대량생산 할수 있다.
• 가상DOM(VirtualDOM) 기술을 사용하여 UI를 화면에 그려준다. 이는 실제DOM의 가벼운 사본을 활용하는 방식으로 앱 로딩 속도를 개선할수 있다.

1.3.리액트의 탄생배경

1. 웹페이지는 HTML,CSS,JS 파일로 구성되며 일반적으로 아래와 같이 만들어 진다.

2. 점점 웹이 복잡해 지면서 파일의 갯수와 코드의 수가 길어지며 유지보수가 어려워지기 시작했다. 오류발생시 수천 줄의 코드를 확인해야 할 경우도 있고 코드끼리 의존성이 깊어지고 복잡해졌다. 또한 수많은 javascript 라이브러리를 불러와서 사용하다 보니 라이브러리 객체들끼리 이름이 같아 충돌하는 경우도 있고 관리가 어려워 졌다. 아래의 그림을 보자. 우리의 프로젝트와 완전 똑같다.

3. React 는 여러 html 문서를 단일 js파일을 사용해 개발할수 있어 이런 문제가 개선되었다.

1.4.리액트의 주요개념

1.4.1.SPA vs MPA

리액트를 접하다 보면 종종 SPA와 MPA 라는 단어를 만나게 된다.

외국어 이다 보니 굉장히 어렵고 낮설게 느껴지는데 두개의 차이점을 짚어보자.

SPA 는 html 페이지 하나만 만드는거다.

MPA 는 html 페이지 여러개 만드는거다.

• 애플리케이션은 다양한 정보를 사용자에게 제공하므로 콘텐츠의 내용이나 디자인의 변경이 있을때 지금까지는 HTML 페이지를 각각 개발했다. ⇒ MPA
• 콘텐츠의 내용과 디자인이 다르거나 말거나 HTML 페이지는 하나로 개발한다.⇒ SPA

1.4.2.SPA vs MPA 비교표

어떤것이 더 좋을까?

상황에 맞게 고려하되 최악만 피하는 것이 현실적이라고 생각한다. (단 클라이언트에게는 최고라고 어필하는것이 뽀인트)

아래 비교표를 보고 서비스 프로젝트의 목적, 요구사항, 운영 및 개발환경 등을 고려하여 결정하자

1.4.3.SPA 친구들

리액트 외에도 SPA 개발툴이 상당히 많다.

그중 세계적으로 유명한 개발자 커뮤니티인 스택오버플로에서 2024년 설문조사 실시결과에 랭크된 몇가지 툴을 알아보자.

🔗 스택오버플로_웹프레임워크부분

Angular, Vue.js 등이 있다.

1.5.컴포넌트

여러번 사용되는 UI를 태그로 만들어서 사용하는 기술

자바스크립트와 유사하게 생긴 jsx 라는 문법을 사용

네이버 또한 리액트로 개발 되었으며 컴포넌트를 확인할수 있다

아래의 색칠된 블록은 네이버의 컴포넌트 단위이다.

1.6.가상DOM

javascript로 개발한 화면을 그리기 위해 기존의 애플리케이션은 DOM 이라는 기술을 사용했다. 리액트에서는 DOM 대신 VirtualDOM 을 사용한다.

DOM과 VirtualDOM 은 뭐가 다를까?

1.7.빌드

리액트는 자바스크립트로 웹을 개발하는 기술이다.

웹브라우저는 html만 이해할수 있으므로 리액트로 개발한 페이지는 최종적으로 html 형식으로 빌드하는 과정을 거쳐야 한다.

그럼 종국에 바꿀것을 애초에 html로 하지 왜 리액트로 하는지 궁금할수 있다.

위에서 언급한 SPA방식의 장점과 더불어 예전 웹개발 방식에서 매우 번거롭던 반복적인 퍼블리싱 작업을 자바스크립트의 함수와 반복문,제어문 등을 사용하여 한번에 끝낼수 있다.

그럼 이제 리액트 개발환경을 설정해 보자.

2.리액트 개발환경 설치

앞서 설명했듯 리액트 개발시 빌드라는 과정이 필요하다.

빌드는 웹팩이라는 번들러 (자바스크립트로 개발한 웹페이지를 html로 변환해주는 툴) 를 사용하게 된다. 아래는 웹팩의 공식 문서 링크이다.

🔗 웹팩공식사이트

위 공식문서를 살펴보면 아래 링크의 안내 링크가 있다.

🔗웹팩기본설치방법

잠깐 살펴 보면 javascript 모듈을 컴파일(해석)할때 사용되는 것이 웹팩이라고 한다.

그리고 앱의 환경설정 방법을 안내하고 있는데 어디에 있는 파일을 어디로 저장해야 하는지에 대한 환경 설정을 어떻게 하라고 적혀있다.

웹팩은 쉽게 말하자면 자바스크립트 문서 내에 html 뿐 아니라 웹서비스에 필요한 모든 리소스 파일을 모두 넣어 개발한후 (놀랍게도 그것이 가능합니다)

실제 웹서비스가 가능한 html 로 해석해주는 도구이다. 아래의 그림을 보면 쉽게 이해할수 있을것이다.

웹팩으로 개발해보면 리액트의 동작 방식이 더욱 잘 이해되므로 공부해보길 추천한다.

2.1. Node 설치

NodeJs 는 구글에서 개발한 자바스크립트를 웹브라우저가 아닌 다른 환경에서도 사용할수 있도록 하는 실행환경이다.

NodeJs 에는 NPM(NodejsPackageManager) 이라는 모듈이 포함되어 있는데 이 모듈에 웹팩이 포함되어 있다. 

또한 리액트 프로젝트 개발시 기본 환경을 설정을 쉽게 도와주는 코드(boilerplate)가 있어 위의 웹팩 환경설정에서 본 것처럼  복잡한 과정을 거치지 않아도 된다.

NODEJS 를 설치하여 진행한다.

🔗 NodeJs 설치하러 가기

LTS 버전(가장 안전한 버전)을 다운로드 한다.

설치프로그램의 다운로드가 완료되면 실행하여 설치를 진행한다. (계속 다음을 누르면 된다)

node.js를 설치하면 npm도 같이 설치된다.

설치완료 후 pc를 재부팅한다.

VSCode를 실행후 터미널을 열고 아래의 명령어를 입력하여 설치를 확인한다.

npm -v
node -v

[ VSCode에서 터미널 창 열기 ]

• 윈도우 : ctrl + j
• 맥 : cmd + j

아래 그림처럼 버전 확인이 되면 성공한 것이다.

2.2. 리액트 앱 설치

노드JS 시스템 설치가 완료 되었으면 이제 PC에서 자바스크립트 기반의 프로그램을 개발하고 실행할수 있는 환경이 갖춰지게 된 것이다.

(설치하기 전에는 웹브라우저에서만 실행할수 있었다)

앞서 설명했듯이, 리액트는 자바스크립트 계열의 JSX라는 문법을 사용하며, 파일 형식은 주로 .js, .jsx, .ts, .tsx로 생성된다.

우리는 이 리액트를 사용해 웹페이지를 개발할 것이다.

하지만 크롬, 사파리, 엣지 같은 웹 브라우저는 주로 .html 확장자 파일을 열어보는 뷰어 역할을 하기 때문에, 리액트 개발 시 사용하는 .js, .jsx, .ts, .tsx 같은 확장자 파일을 직접 읽고 해석할 수 없다.

따라서 웹팩이라는 번들러를 사용하여, 이러한 파일들을 .html, .js, .css 형식으로 변환(컴파일)한 후 배포해야 한다.

여기까지 이전에 살펴봤던 내용이다.

NodeJS를 설치하면 NPM(Node Package Manager) 이 함께 설치 되는데 이 NPM 에 리액트앱을 쉽게 만들수 있게하는 보일러플레이트 (Boiler Plate) 가 있다.

터미널 창에 npx create-react-app . 명령어를 한번만 입력하면 리액트 개발환경이 뚝딱 생성된다.

2.2.1. 개발환경설치

1. 빈폴더 생성
• 폴더의 경로나 폴더명에 한글,특수문자가 표함되어 있으면 안된다
• 폴더명은 Kabab-case 만 허용된다. 예) myapp ,app1, my-app, react-app …
• 반드시 빈 폴더 이어야 한다.
2. vscode 실행
3. 1번의 폴더를 vscode 로 연다. 이때 반드시 아래의 이미지를 보고 그대로 한다

1. vscode에서 터미널 실행
• 단축키 : ctrl + J / cmd + J
2. 터미널 창에 아래 명령어 입력후 엔터키를 누른다.
• npx create-react-app .

6. 터미널 창에 아래의 명령어를 입력후 엔터키를 누른다.

npm start

7. 아래와 이미지와 같은 웹브라우저 창이 실행되고 터미널에는 메시지가 출력된다.

2.3. 리액트앱 수정

리액트 앱을 수정해보자.

src/App.js 의 내용을 수정하면 화면에 바로 반영된다

우선 수정 전에 개발시 편의를 위한 환경설정을 진행한다.

2.3.1. VSCode 에서 jsx 파일 자동완성 설정하기

1. ctrl + shift + p ( ⇧ + ⌘ + P)를 눌러 아래 이미지와 같은 setting.json 을 찾아서 연다

2. ctrl  + F  (⌘+F)를 눌러 검색창을 열고 emmet.inclu 를 검색한다.
3. 검색 결과로 표시되는 키에 그림과 같은 값을 넣고 저장한다.
Copy

"emmet.includeLanguages": { "javascript": "javascriptreact" },

4. 검색결과가 없을 경우 위의 소스 코드를 json 파일 맨 첫줄에 그림처럼 추가한다.

2.3.2. src/App.js 수정하기

src/App.js 파일을 열고 아래와 같이 수정해보자

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>이게 리액트야?</h1>
        <a
          className="App-link"
          href="http://naver.com"
          target="_blank"
          rel="noopener noreferrer"
        >
          배우자리액트
        </a>
      </header>
    </div>
  );
}

export default App;

src/App.css 파일을 열고 아래와 같이 수정해보자

.App-header {
  background-color: #570a25;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}