React

리액트란 Javascript의 라이브러리로,
현재 웹앱 서비스의 ui와 ux 데이터 양이 방대해짐에 따라 등장했다.

React의 사용 이유

웹앱 서비스가 단순할 때는 Javascript의 DOM 요소로 조작에 불편함이 없었다. 이러한 DOM Method 묶음이 Jquery 이며
위 설명한 바와 같이 데이터 양이 방대해지며, 계속해서 DOM 요소에 접근해서 수정되어야 하는 상황들이 생기며 등장한 것이
Framework와 Library이다. React는 이러한 Framework / Library 중 하나이며 위 등장배경이 곧 사용의 이유와 같다.

Front-end 삼대장

1.앵귤러 : 제일 먼저 등장한 대장이며 2010년 구글에서 개발했다. TypeScript 기반으로 안정적이고 탄탄한 기능이 내장되어 있으나, 무겁고 배우기 어려운 단점이 있다고 한다. MVC (Model View Controller)의 특징을 가진다.

2.뷰 : 에반유라는 중국인 개인이 개발한 프레임워크로 앵귤러와 리액트의 장점을 가진다고 한다. 코드가 깔끔하고 배우기 쉬워서, 최근에 생겼지만 성장 속도가 매우 빠르다고 한다. 뷰 또한 MVC (Model View Controller)의 특징을 가진다.

3.리액트 : 앵귤러, 뷰와는 다르게 리액트는 라이브러리이며 페이스북이 모태인 바와 같이 지속적으로 데이터가 변화하는 큰 웹어플리케이션을 구축하기 위한 라이브러리라고 할 수 있다. 리액트는 MVC가 아닌 오로지 View 영역만 담당한다고 할 수 있다.

JSX

Syntax extension dor JavaScript라는 자바스크립의 확장 버전이다.
HTML과 비슷하게 생겼으며 JavaScript 파일 내에서 작성할 수 있는 특징을 가진다.

Component / Props

Component 재사용 가능한 UI 단위를 뜻한다.
컴포넌트는 함수와 비슷하고, 함수에서의 input 역할을 하는 것이 props 이다. property의 줄임말이다.

render()

컴포넌트를 생성할 때는 render() 메서드를 무조건 정의해야하는 특징을 가진다. return 또한 해주어야 하는 특징도 있다.

Component / State

컴포넌트의 상태 값을 뜻한다.
state와 props는 둘다 object이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 한다.
하지만 props는 부모쪽에서 전달해야만 사용할 수 있고(ex.parameter)
state는 컴포넌트 내에서 정의하고 사용한다.

React Component Lifecycle

constructor(화면에 아무것도 없음)
render(화면에 그려짐)
componentDidMount
상태 업데이트 (새로운 props / setState 상태변경)
componentDidUpdate
unmounting (컴포넌트 필요 없음)
componentWillUnmount

위 순으로 컴포넌트의 생애주기가 설정되며, 컴포넌트가 생애주기에 따라 각자의 메서드가 호출된다.

Event Handling

JavaScript의 Event 요소에서의 addEventListener 사용처럼
event handler의 역할

Node.js

Browser 밖에서도 JavaScript가 동작할 수 있게 하는 환경,
JavaScript의 "탈 웹"을 뜻한다.
프로젝트 개발 환경을 구축하는 주요 도구들이 Node.js 기반이기 때문에
사용되며, '주요도구'들에는 CRA / Babel / Webpack 등이 있다.

NPM

Node Package Manager
즉 노드 패키지를 관리를 위한 것을 뜻한다.

CRA

UI 기능만을 제공하는 리액트의 특성상 구축해야할 것들이 많을 때,
개발환경 세팅을 편리하게 해주는 도구이다.