[React] #2 React 개념 및 특징

React는 페이스북의 소프트웨어 엔지니어 Jordan Walke가 개발하였습니다. 많은 라이브러리 / 프레임워크가 존재함에도 불구하고 페이스북이 React를 만든 이유는 무엇 일까요? 그것은 바로 먼저 처음 화면을 보여준 후 변화에 따라 필요한 곳을 바꿔 줘야 하는데 이 작업이 상당히 복잡하다고 합니다. 복잡한 작업을 하기 싫었던 페이스북은 변화를 주지 않고 View를 없애고 새로 만들면 어떨까?라는 발상을 떠올렸습니다. 그래서 탄생한 것이 React 입니다.

List
1. Component: 특징
2. React ES6
3. JSX: 규칙
4. React Key Concept: [Data Flow, Props, State, Life Cycle]
5. Virtual Dom

이전 포스트: #1 React란?

1. Component

React는 Component라는 개념에 집중되어 있는 라이브러리입니다. Component란 쉽게 말해 캡슐 형태로 만들어진 내가 만든 HTML Tag라고 할 수 있습니다. Component가 있는 React로 개발한다는 것은 테트리스처럼 끼워 맞추는 것과 같습니다.

Component 특징

• React에서는 각기 다른 Component들을 결합해 만들어지며 각기 다른 재사용성이 높고 직관적입니다.
• UI는 쪼개진 Component들로 이루어져 있기 때문에 전체 코드를 파악하기가 상대적으로 쉽습니다.
• Component는 클래스형(stateful) 과 함수형(stateless) 로 나누어집니다.

2. React ES6

React 내에서 ES6 문법이 사용되는데 그중 아래의 항목은 숙지하면 개발 시 유용합니다.
참고 자료: PoiemaWeb-ES6

Destructuring
디스트럭처링(Destructuring)은 구조화된 배열 또는 객체를 Destructuring 하여 개별적인 변수에 할당하는 것을 말합니다. 배열 또는 객체에서 필요한 값만 추출하여 변수에 할당하거나 반환할 때 유용합니다.UI는 쪼개진 Component들로 이루어져 있기 때문에 전체 코드를 파악하기가 상대적으로 쉽습니다.

• Array Destructuring

• Object Destructuring

Spread Operator
Spread Operator는 … 를 사용하여 대상을 개별적으로 분리합니다.

Rest Parameter
잘 모르면 Spread Operator와 혼동할 수 있는 문법입니다. Rest Parameter는 매개변수 이름 앞에 … 을 붙여 정의한 것을 말합니다. Rest Parameter는 배열로 전달받습니다.

Default Parameter
함수를 호출할 때 매개변수의 수만큼 전달하는 것이 일반적이지만 함수는 매개변수와 인수의 개수를 체크하지 않으므로 내부적으로 적절한 인수가 전달되었는지 확인할 필요가 있습니다. 그래서 Default Parameters는 인수를 전달하지 않았을 경우에만 유효합니다.

Template Literal
Template Literal은 새로운 문자열 표기법입니다. ‘ || “ 같은 따옴표 대신 백틱 문자 ` 를 사용합니다.

Arrow Function
Arrow Function은 function 대신 => 을 사용하여 함수를 선언할 수 있습니다. 하지만 모든 경우에 사용할 수 있는 것은 아니며 매개변수가 있을 때 + 여러 개 일 때와 한 개일 경우 생략 가능 여부가 결정됩니다. 그리고 한 줄일 경우 암묵적으로 return 됩니다.

Arrow Function의 가장 큰 차이점은 this입니다. 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩 할 객체가 동적으로 결정됩니다. React로 예를 들자면 아래와 같습니다.

for-of loop

3. JSX

JSX는 자바스크립트 확장 문법으로 우리가 작성한 Component를 화면에 보이기 위해 사용됩니다. 아래의 예시처럼 JSX를 사용하지 않을 경우 복잡도가 높아지며 가독성은 떨어지기 때문에 코드가 복잡 해집니다.

JSX 규칙
1. 하나의 elements로 이루어져야 합니다.

2. 자바스크립트 코드를 사용할 때는 중괄호 안에서 작성해야 합니다.

3. if문이 사용 불가능하므로 삼항 연산자를 사용해야 합니다.

4. ES6 문법 중에 class가 있기 때문에 class 이름을 지정할 때는 className을 사용해야 합니다.

4. React Key Concept

자세한 사항은 공식 문서를 확인하길 바랍니다. React

Data Flow
React의 Data Flow는 단방향 데이터 흐름입니다. 상위 컴포넌트에서 하위 컴포넌트로 데이터를 내려줄 수 있으나 직접적으로 하위 컴포넌트에서 상위 컴포넌트에 넘겨 줄 수 없습니다.

Props
Props란 상위 컴포넌트가 하위 컴포넌트에게 내려주는 데이터 입니다. 하위 컴포넌트에서는 사용할 수 있지만 변경할 수는 없습니다.

State
State란 컴포넌트가 갖는 상태를 말하며 객체의 형태로 컴포넌트 내에서 보관하고 관리합니다. state를 사용하기 위해서는 아래와 같은 조건이 충족 되어야 합니다.

1. class 컴포넌트로 작성되어야 합니다.
2. 값을 변경할 땐 반드시 React의 불변함을 유지해야하므로 setState method를 사용해야 합니다. setState를 사용하면 render()함수가 실행 됩니다.

Life Cycle
Life Cycle이란 컴포넌트가 브라우저에 보여질 때, 업데이트 될 때, 사라질 때 각 단계 전후로 특정 method가 실행 되는 것을 말합니다. 원하는 타이밍에 사용이 가능하며 Life Cycle을 사용하기 위해서는 state와 마찬가지로 class 컴포넌트로 작성되어야 합니다.

1. 컴포넌트 생성
   construnctor() → render() → componenteDidMount()
   여기서 componentDidMount는 제일 처음 생성 될 때 딱 한번만 실행 되며 이후에는 실행되지 않습니다.
2. 컴포넌트 업데이트
   setState() → render() → componentDidUpdate()
   componentDidUpdate는 처음에 생성 될 때 실행되지 않으며 이후 state값이 변경 될 때 실행 됩니다.

5. Virtual Dom

Virtual DOM이란 가상의 Document Object Model을 말합니다.
앞서 말했듯이 View를 없애고 새로 만드는 것은 언뜻 들어보면 매우 간단해 보입니다. 하지만 이렇게 되면 계속 새로 View를 만들기 때문에 성능적으로 큰 문제가 생길 것입니다. 그래서 만들어진 것이 Virtual DOM이며 Virtual DOM을 사용하는 많은 라이브러리 중 가장 성공적으로 사용한 첫 번째 주자가 React입니다.

Virtual DOM을 사용하는 이유

• Virtual DOM은 DOM의 변화를 최소화해주는 역할을 하며 브라우저 내에서 일어나는 연산의 양을 줄임으로써 이는 성능적으로 매우 중요한 부분을 차지합니다.
• Virtual DOM을 사용하면 일일이 수동으로 위와 같은 작업을 할 필요 없이 자동화 및 추상화가 가능합니다.

Virtual DOM을 사용하지 않았을 때 Browser

1. 브라우저가 html 파일을 전달받으면 DOM Tree 생성
2. 각 요소들의 Style을 적용하기 위해 계산
3. 결과를 바탕으로 화면에 보여주기 위한 Render Tree 생성
4. Layout 과정을 거쳐 화면에 표시

문제점 : 만약 이때 하나의 Dom이 추가되면 2번부터 시작하여 매번 새로운 Render Tree 생성하는 작업을 수행해야 합니다.

Virtual DOM 작동 원리

1. 데이터 업데이트 시 상태 변화가 일어나면 Real DOM에 변화가 일어나는 것이 아니라 Virtual DOM에 먼저 변화가 일어납니다.
2. 기존의 Real DOM과 비교합니다.
3. 비교했을 때 정말 필요한 부분만 업데이트해줍니다.