React란?

0. 개요

기초 웹 프로그래밍은 HTML/CSS, JavaScript, DOM, Event로 시작한다. 그러다가 각각의 역할이 너무 분리된 나머지 하나의 기능을 구현하기까지 너무 많은 코드가 필요함을 깨닫게 된다.

요구되는 기능은 많고, 웹은 점점 복잡해짐에 따라 자연스럽게 기술이 발전한다. 그 속에서 DOM과 Event를 더 쉽게 조작할 수 있도록 해주는 method들의 모음으로 jQuery가 나왔지만 문제는 여전히 해갈되지 않았다.

이러한 배경 속에서 3세대 웹이 등장한다.

1. 3세대 웹

3세대에서 가장 눈에 띄는 프레임워크(및 라이브러리) 세 가지는 Angular, Vue, React다.

이들은 프레임워크가 내부에서 동작을 지원해주기 때문에 사용자가 더 이상 DOM을 직접 조작하지 않아도 된다는 이점이 있다.

1) Angular

• 셋 중 가장 먼저 나온 프레임워크.
• 구글에서 만들었으며 TypeScript 기반.
• 다양한 기능을 사용하여 탄탄하며 안정적인 프론트 앱 개발이 가능하나 그만큼 무겁고 처음에 배우기 힘들다는 단점도 있다.

2) Vue

• 셋 중 가장 나중에 나온 프레임워크.
• 코드가 깔끔하고 배우기 쉽기 때문에 성장 속도가 빠르다.
• 백엔드 기반의 풀스택을 추구하는 회사에서 많이 사용한다.

3) React

• "지속적으로 데이터가 변화하는 대규모 어플리케이션 구축"이 목표.
• 페이스북에서 만들었다.
• MVC 구조를 따라가는 Angular, Vue와 다르게 오로지 View에만 신경을 쓴다. 그만큼 내장된 기능이 부족하여 third-party 라이브러리(ex. React-router, redux)를 함께 사용한다.

※ 프레임워크 vs 라이브러리

프레임워크와 라이브러리는 둘 다 이미 다른 사람들이 만들어놓았다는 점에서 동일하나 엄밀히 말하면 다른 존재이다.

• 프레임워크는 남들이 만들어 놓은 환경에 사용자가 직접 들어가서 사용하기 때문에 각자 그 프레임워크만의 문법이 존재하다. 여기에 해당하는 것이 Angular와 Vue.
• 라이브러리는 남들이 만들어 놓은 것을 끌어다가 사용자 환경에서 사용하기 때문에 상대적으로 간편하다. 바로 React가 여기에 해당한다.

2. 왜 React를 사용하는가

가장 직접적으로 표현하자면 '사람들이 많이 사용하기 때문'이다. 얼핏보면 단순하지만 중요한 이유이다.

사람들이 많이 사용한다는 것은 생태계가 활성화되어 있다는 뜻으로, 이는 자료가 다양하며 기술자 수요도 많다는 것을 의미한다.

React는 페이스북에서 관리하고 있어 업데이트도 꾸준하며, 컴퓨터 뿐만이 아니라 React Native를 이용한 모바일 개발에도 용이하다.

3. 그래서 React는

1) 한 줄 정의

: 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리

2) 선언적 프로그래밍

'선언적'을 알기위해선 '절차적'을 이해해야 한다.

절차적이란 모든 순서와 명령을 하나씩 나열해서 수행하는 것을 말한다. 어떻게 일이 처리되는가에 치중된 절차적 프로그래밍은 문제가 생겼을 때 그 과정을 하나하나 확인해봐야 하는 어려움이 있다. 복잡하게 짜여진 for문을 떠올리면 어느정도 이해하기 쉽다.

반면에 선언적 프로그래밍은 무엇을 할지에 더 치중되어 있다. 파트별로 잘게 쪼개 각각 함수가 선언되어 있기 때문에 문제 발생시 해당 함수만 확인하면 된다.

3) 가상돔(Virtual DOM) 사용

가상돔이란 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술을 말한다.

기존 HTML에서 사용되었던 DOM 구조를 생각해보자. 문제가 생기면 해당 node부터 시작해서 영향을 받는 부모까지 거슬러 올라가, 이들 모두에서 수정이 발생한다. 이러면 건드려야할 돔이 너무 많아진다.

그러나 가상돔이 존재하면 실제돔에서는 전혀 변경이 없는 채로 실제돔과 가상돔을 비교 후, 바뀔 부분만 딱 체크해서 한번에 변경이 가능하다.

4. 컴포넌트(Component)

1) 정의

: (프론트 기준) 재활용 가능한 UI 구성 단위
: (프로그래밍 전체 기준) 재사용 가능한 각각의 독립된 모듈

2) 특징

① 코드 재활용 증가
② 코드 유지보수 용이
③ 해당 페이지가 어떻게 구성되어 있는지 파악 용이(컴포넌트는 또 다른 컴포넌트를 포함한다. 부모-자식 관계)

3) 클래스형 vs 함수형

• 클래스형: 무조건 render 함수가 존재해야 한다.

class App extends React.Component {
    render() {
    	return(
        	...
        );
    }
}

• 함수형: 작성하기 훨씬 간편하다. 이후 hook 개념을 이용해 재사용성 증가.

const App = () => {
    return(
    	...
    );
};

※ 주요 개념들을 익히기에는 클래스형이 훨씬 직관적이다.

5. JSX

1) 정의

: React에서 사용하는 자바스크립트 확장 문법(JavaScript Syntax Extention)
-> HTML과 JavaScript를 혼합해 함께 사용하는 문법

2) 기본 특성

브라우저에서 실행되기 전, 웹팩에 의해 번들링 되는 과정에서 바벨을 통해 일반 자바스크립트 형태로 변환된다.
ex) <Link> 태그의 경우 F12에서 보면 <a> 태그로 바뀌어 나온다.

3) 장점

① HTML 태그를 그대로 사용 가능하다.
② HTML 태그를 사용하면서 동시에 JavaScript도 JSX 안에서 동작하게 할 수 있다.
③ DOM 접근 + Event 기능 부여가 한번에 가능하다.

4) 특징

① JavaScipt를 사용하고 싶다면 {...JavaScript...}
② class 대신 className을 사용해야 한다.
③ <div />와 같이 Self closing이 가능하다.
④ 무조건 하나의 부모태그로 감싸고 있어야 한다. 이때 유용하게 사용할 수 있는 태그가 React Fragments <> ... </>

(+) ④의 이유: Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문.