React

REACT

자바스크립트의 라이브러리로 MVC, MVVM과 같은 구조가 아니며 SPA 방식으로 View만 처리한다.

 

SPA?

Single Page Application 의 줄임말로 웹 페이지가 여러 페이지로 구성되어 있는 것이 아닌 서버에서 페이지를 하나만 제공하는 것이다. ( = 번들러(Webpack)를 통해서 index.html 하나만 로드하고 실행시키는 구조)

그렇다면 사용자는 오직 하나의 페이지만 볼 수 있는가?

서버에서 제공하는 페이지는 오직 하나이지만 사용자 브라우저의 주소 상태에 따라 다양한 화면을 보여줄 수 있다.

 

🤔 번들러(Webpack)?

-> Node.js 에서 기본적으로 제공되는 패키지로 어플리케이션을 동작시키는데 필요한 자원(JS파일들, CSS, Image 등)을 하나로 묶어 경량화시키고 이를 활용해 결과물을 만들어 주는 도구. 번들러는 node.JS를 통해 직접 설정 할 수 있지만, 리액트 프로젝트를 생성 시 자동으로 포함된다.

 

리액트 Virtual DOM

HTML에서 DOM을 조작하여 처리할 때에는 DOM 핸들링 자체는 빠르지만 웹 브라우저가 DOM의 변화를 감지하여 CSS를 적용, 처리하는 과정에서 시간이 많이 소요된다.

리액트의 Virtual DOM은 이를 추상화시킨 자바스크립트 객체를 이용해서 화면에서 DOM 일부가 변경되었을 때 Virtual DOM이 이를 감지하고 변경된 부분만을 리랜더링시키는 방식이다.

 

리액트 환경설정

1) 에디터 vscode 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

2) node.js 설치

https://nodejs.org/en/

Node.js

최신버전보다는 현재 사람들이 많이 사용하는 버전인 왼쪽을 다운받도록 하자.

 

3) VScode - Terminal 에 명령어 작성

- node.js 설치확인

-react 프로젝트 생성 create-react-app 프로젝트이름

- 설치 완료 후 경로 설정하기 (open folder로 생성된 프로젝트 폴더를 열면 된다.)

4) 리액트 app 실행

- terminal에서 npm start 작성, 종료시킬 시 ctrl + c

 5) 정상적으로 실행되었다면 다음 화면이 나타나게 된다.

 

JSX

JS의 확장 문법으로 HTML에 JS코드를 녹여낸 형태이다.

Webpack Loader는 다양한 종류가 있습니다.
1. css로더 - css로드
2. file로더 - 폰트,이미지, 파일 등 로드
3. babel로더 - ES6문법을 화면에서 사용할 ES5문법으로 다운그레이드 하여 변환해 줍니다

 

Component (컴포넌트)

컴포넌트란 리액트로 만들어지는 앱을 이루는 최소한의 단위로 데이터를 입력받아 view 상태에 따라 DOM Node를 출력하는 함수이다.

-컴포넌트가 없을 시 리랜더링을 할 때마다 모든 내용을 랜더링하므로 시간이 오래 걸린다. 그렇기 때문에 컴포넌트라는 최소 단위로 쪼개서 부분적으로만 리랜더링시킴으로써 시간을 단축시키는 것이다.

-컴포넌트 이름은 항상 대문자로 시작되어야 한다.(소문자로 작성 시 DOM 태그로 취급되므로 주의)

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눌 수 있고, 각 조각을 개별적으로 나누어 코딩할 수 있다.

Component 유형

컴포넌트는 함수형과 클래스형, 두 가지 유형이 존재한다.
함수형 컴포넌트는 데이터 핸들링할 때 hook 이라는 기능을 제공하지만 클래스형 컴포넌트는 제공하지 않는다.
수업에서는 함수형 컴포넌트만 다루었다.

함수를 작성한 하위 컴포넌트에서 default export로 모듈을 내보내고 부모컴포넌트에서 모듈을 import하여 사용한다.

 

 

다른 예시

 

props

Properties의 줄임말로 상위 컴포넌트에서 하위 컴포넌트에 값을 전달할 때 사용한다. (단방향)

프로퍼티는 읽기 전용으로 값을 수정하려면 값을 제공하는 상위 컴포넌트에서 수정해야 한다.

🤔 사용방법

프로퍼티에 문자열을 전달할 때에는 큰 따옴표 " " 를, 문자열 외 다른 값을 전달할 때는 중괄호 { } 를 사용한다.

 

props 기본값, 데이터타입 검증

props 예시 사진의 상위 컴포넌트에서 mail 값을 주지 않았지만 값이 나온 것을 볼 수 있다.
props에서도 기본값을 설정할 수 있으며, 기본값을 설정하면 값이 주어지지 않을 경우 기본값으로 출력되게 된다.
(props 기본값 설정할 때에는 대소문자를 정확하게 구분해야 한다.)

또한 기본값 외에도 상위 컴포넌트에서 주어진 데이터의 타입을 검사할 수도 있다. 제시된 데이터타입이 아닌 다른 데이터타입이 들어와도 에러가 발생하지는 않지만 콘솔에 경고창이 나타나게 된다.