Keywords

• React: UI를 만들기 위한 자바스크립트 기반 라이브러리다.
• CRA: create-react-app의 축약어로 리액트를 구동할 수 있는 '개발 환경'을 마련해주는 프로그램이다.
• Component: UI 단위의 재사용이 가능한 그룹이다.
  * functional component와 class component가 있다.
• JSX: 리액트에서 사용하는 JS의 확장 문법이다.
  * jsx는 compile하는 과정이 있어야만, js에서 읽어들일 수 있다.
• State: Component의 상태다.
• Props: 부모 Component에서 자식 Component로 주는 정보로, 자식 Component에서 정보를 읽을 수 있다.
• Life cycle: Component가 생성되고, 업데이트되고, 삭제되는 일련의 생명주기를 이른다.

About React

리액트는 왜 탄생했을까?

웹과 애플리케이션이 발전하면서 UI와 UX에 대한 요구가 늘어나고 관리해야하는 데이터의 양이 방대해짐에 따라, HTML, CSS, JS, DOM, jQuery 만으로는 웹과 애플리케이션을 개발하고 코드를 유지보수하는 것이 힘들어졌다.

이를 해소하기 위해 Angular, Vue, React같은 다양한 Front-end Framework 및 Library가 등장했다. Front-end Framework 및 Library는 UI를 자동으로 업데이트 하며, 특히 React는 Virtual Dom을 통해 빠르게 UI를 업데이트한다.

Angular와 Vue는 코드를 짜는 데 필요한 전체적인 구조가 마련된 Framework이며 MVC Architecture인 반면, React는 구현에 필요한 기능이 있는 Library이며 View만 담당한다.

작업 환경을 설정해보자

웹을 개발하는 데 필요한 주 도구들(바벨, 웹팩 등)은 Node.js 기반이다.
따라서 작업 환경을 설정할 때 Node.js를 설치하며, 이를 설치할 때 자동으로 node package manager(npm)도 설치된다.

또한, CRA로 잘 알려져있는 Create-React-App도 함께 설치한다.
CRA는 리액트 프로젝트를 시작할 때 필요한 개발 환경을 세팅해주는 도구, toolchain이다.

view만 담당하는 리액트는 UI 기능만 제공하기 때문에, 개발자가 직접 구축해야 하는 것이 많다.
이런 번거로움과 어려움을 해결하는 것이 바로 CRA며, 애플리케이션 실행에 필요한 다양한 패키지가 포함되어 편리하게 개발 환경을 세팅할 수 있다.

나의 경우, HTML, CSS, JS, DOM만으로 개발에 한계를 느꼈고, 이 때 React를 배우고 SPA를 구현하기 위해 CRA를 사용하기 시작했다.

CRA 초기 세팅을 살펴보자

크게 세 가지 핵심으로 플로우를 살펴볼 수 있다.

node.modules - package.json - .gitignore

node.modules는 CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더다.

package.json은 CRA의 기본 패키지 외에 추가로 설치된 라이브러리나 패키지 정보(종류이름, 버전)이 기록되는 파일이다. package.json의 dependencies property를 보면 확인할 수 있다.
(실제 코드는 node.modules 폴더에 존재한다.)

협업을 위해 github에 내 디렉토리를 업로드할 때, node.modules 폴더는 너무 무겁기 때문에 올리지 않고 package.json만 업로드한다.
이 때, 올리고 싶지 않은 자료는 .gitignore 파일에 작성하면, git push를 해도 해당 파일이 업로드되지 않는다.

함께 협업하는 다른 사람이 그 자료를 pull 받아서 npm install을 터미널에 입력하면 package.json에 기록되어 있는 추가 자료가 자동으로 설치된다.

React 폴더 구성

• public 폴더에는 index.html, images 폴더, data - mock data 폴더가 있다.

• src 폴더에는 공통 컴포넌트를 관리하는 components 폴더, 페이지 단위의 컴포넌트 폴더로 구성되는 pages 폴더, styles 폴더가 있다.

React 파일 순서

index.html - index.js - App.js

• public 디렉토리에 있는 index.html 파일의 body에는 항상 단 하나의 element가 있다.
  id가 root인 div 태그.

• src 디렉토리에 있는 index.js 파일은 바로 React의 첫 시작이다.

ReactDOM.render( <App /> , document.getElementById('root')) 로 index.js에서
App component 파일과 index.html의 root가 id인 div 태그를 이어준다.
이 때, ReactDOM.render 함수의 인자는 두 개가 입력되는데, 첫 번째 인자는 화면에 출력하고 싶은 component이고, 두 번째 인자는 화면에 출력하고 싶은 component가 들어서는 위치를 입력한다.

• src 디렉토리에 있는 App.js 파일은 현재 화면에 보여지고 있는 초기 컴포넌트다.

React의 Component와 JSX 문법

Component

Component 정의

재활용이 가능한 UI 구성 단위를 컴포넌트라고 한다.
컴포넌트는 코드를 유지보수하기 편리하게 하고, 페이지의 구성을 한 눈에 파악할 수 있게 한다.

부모 컴포넌트와 자식 컴포넌트 관계가 만들어질 수 있는데,
이 컴포넌트를 분리하는 기준은 개발자가 생각했을 때 한 컴포넌트에서 지속적으로 반복되는 코드가 존재해서 재활용이 있을 수 있겠다고 판단이 되면 분리할 수 있다.

Component 종류

컴포넌트는 클래스형과, 함수형 2 가지가 있다.

클래스형 컴포넌트는 render 함수를 반드시 가지며, 그 안에 User에게 보이고 싶은 JSX를 반환한다.

JSX

JSX 정의

JSX는 JavaScript Syntax Extension의 축약어로 리액트에서 사용하는 자바스크립트 확장 문법이다.
JSX로 작성한 코드는 브라우저에서 동작하는 과정 중, 바벨을 통해 일반 자바스크립트 형태의 코드로 변환된다. 이를 자바스크립트 코드로 compile된다고 한다.

JSX 장점

HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙하며, HTML과 JS 모두(DOM과 Event) JSX 내에서 동작하도록 한다는 점이 장점이다.

JSX 특징

JSX는 내부 요소들을 감싸는 최상위 요소가 반드시 있어야 한다.

Fragments는 DOM에 별도의 노드를 추가하지 않고, 하나의 컴포넌트 안에 여러 자식 요소들을 간단하게 그룹화할 수 있는 기능이다. 이는 요소를 감싸는 div 태그가 불필요하게 생성되지 않도록 하기 때문에 유용하다.