[React] 리액트 개요

React란?

- 페이스북에서 제공해주는 JS 기반의 Front-end 프레임워크이다.

- Javascript / Typescript 기반의 대표적인 Single Page Application 프레임워크이다.

- JS / TS 기반의 싱글 페이지 프레임워크인 vue.js, angular와 나란히 비교된다.

- 기존 SPA처럼 컴포넌트 기반의 개발을 강제하는 프레임워크이다.

(컴포넌트에 데이터를 전달해주면, 컴포넌트를 설계한대로 UI가 생성되어, 사용자화면에 표시됨)

 

React의 장점

- 기존 바닐라JS와 HTML과 CSS 만으로도 충분히 웹페이지를 만들 수 있으나, React 프레임워크를 통해 개발하면 사용자의 Action으로 인해 지속적으로 변경되는 동적인 데이터(변경되는 데이터)를 UI에 반영(렌더링)되도록 하는 작업을 비교적 쉽고 체계적으로 구현할 수 있다.

 

React의 핵심 개념

1. 컴포넌트

- 컴포넌트는 개념상 Template과 Style과 Logic으로 구성되어 있고, 데이터에 따른 UI를 표시(렌더링)해주는 하나의 블록이라고 생각하면 된다.

- 컴포넌트는 여러개의 하위 컴포넌트로 구성될 수 있다.

- 하위 컴포넌트부터 하나씩 설계하면서 쌓아 올리면, 하나의 UI가 만들어 진다.

- 작은 컴포넌트들은 다른 화면에서도 사용될 수 있는 재사용성을 가지고 있어, 똑같은 코드를 복사 붙여넣기할 필요가 없다.

- React의 컴포넌트는 해당 컴포넌트가 state값(상태값 또는 변수)을 담을 수 있느냐에 따라, 클래스형과 함수형으로 나뉘어진다. 

- 컴포넌트는 기본적으로 LifeCycle을 가진다.

 

1-1. 클래스형 컴포넌트 : "state값을 저장하는 것이 필요한 경우"

- 말그대로 클래스 형식의 UI 컴포넌트는 컴포넌트 내부에 데이터를 임시적으로 저장할 수 있고, 필요할 때마다 변경이 가능한 속성을 가지고 있다.

- 데이터는 리스트 아이템이 될 수도 있고, 여러개의 단순 변수값이 될 수도 있다.

- 클래스가 멤버변수를 선언하고 값을 임시로 저장할 수 있듯이 클래스형 컴포넌트는 상태값을 저장해야되는 경우에 사용된다.

- "상태값을 가질 수 있는(stateful)" UI 컴포넌트를 의미한다.

 

1-2. 함수형 컴포넌트 : "state값을 저장할 필요없는 경우"

- 말그대로 함수 형식의 UI 컴포넌트는 입력받은 데이터에 따른 정해진 결과 UI를 렌더링해준다.

- 함수가 같은 입력 X 에 대해서 항상 같은 결과 Y를 반환해야 하는 것처럼, 상태값 저장 없이 Input 데이터에 대한 결과 UI를 표시하는 것이 필요한 경우에 사용된다.

- "상태값이 없는(stateless)" UI 컴포넌트를 의미한다.

 

2. One Wat Data flow

- React는 여러개의 컴포넌트 결합으로, 하나의 어플리케이션을 만들어 낸다.

- 개별 컴포넌트의 핵심적인 기능은 데이터를 전달받아서, 개발자가 설계한대로 UI를 렌더링해주는 것이다.

- 이 때, 상위 컴포넌트에서, 하위 컴포넌트로의 데이터의 흐름이 발생하게 되는데 React는 원칙적으로  데이터 흐름이 한 방향으로만 흐르도록 강제하고 있다.

- 함수 또한 데이터가 Input -> Output으로 단방향적으로 흐르는 것과 동일한 개념이다.

- 함수가 함수를 호출한 쪽의 데이터 혹은 변수값을 변경할 수 있는 방법은 없지만, 호출한 쪽에서 광역변수를 선언해 두었을 경우, 호출된 함수 상에서 광역 변수의 값은 변경시킬 수 있게 된다.

- 컴포넌트 또한 기본적으로는 특정 데이터 [X]에 따른 결과물 UI [Y]를 렌더링해주는 함수적 속성을 띄기 때문에, React는 아래와 같은 데이터 흐름을 강제한 것으로 생각되어진다.

-> 상위 컴포넌트가 하위 컴포넌트로 데이터를 전달 (가능)

-> 하위 컴포넌트에서 상위컴포넌트로 데이터를 전달 (불가능)

- 그러나, 개발하다보면 분명 하위컴포넌트의 처리 결과를 상위 컴포넌트에 반영해주어야 경우가 꼭 생긴다. 이와 같은 경우에는 상위 컴포넌트 내부에 있는 state값을 변경시켜주는 방법으로, 데이터를 전달해주는 효과를 줄 수 있다.

 

3. Props 과 State

- Props과 State 모두 개별 컴포넌트가 가지는 구성요소이다.

- 컴포넌트 기반의 SPA 프레임워크에서는 컴포넌트 간 데이터 전달을 설명할 때, 대부분 등장하는 핵심 개념이다.

3-1. Props

- Props이란 Properties의 줄임말로 개념적으로 "부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터 <<값>>"을 의미한다.

- 컴포넌트 구현시, Props으로 정의해놓은 데이터 항목은 상위 컴포넌트에서 전달받을 데이터 값 [상위 컴포넌트의 데이터 변수 자체를 가리키는 것이 아님] 을 의미한다. 

- 함수에서 Input으로 변수가 아닌 변수 값을 전달받아서 변수 값에 해당하는 Output을 반환하듯이 하위 컴포넌트 또한 상위 컴포넌트로부터 전달받은 Props 값으로 단순히 미리 정의된 렌더링 작업을 수행한다. 

- Props에 해당하는 데이터 항목은 상수[읽기 전용]적 속성을 가진다.

- 상위 컴포넌트의 변수값을 바꾸기 위해, 하위 컴포넌트의 Props 속성 값을 변경해도, 상위 컴포넌트의 데이터에는 전혀 영향을 주지 않는다. Props의 개념을 오해하고 있는 경우이다.

- Props은 함수의 매개변수와 같다. 

 

3-2. State

- State란 개념적으로 "컴포넌트 내 광역변수처럼 동적인 데이터를 담을 수 있는 데이터 <<변수>>"를 의미한다.

- Props과는 다르게 "값"이 아닌, 값을 담을 수 있는 "변수"의 개념에 가깝다. 

- State의 경우 기본적으로 컴포넌트 안에서만 관리되고, 유효하다.

- B함수와 전혀 관련 없는 함수가, A함수 내의 광역변수에 직접 접근하는 것이 불가능한 것처럼, React 또한 다른 Scope상에 존재하는 컴포넌트의 State에 직접적인 접근이나 변경은 불가능하도록 설계되어 있다.

- 다만 예외적으로 자신보다 상위에 있는 컴포넌트의 State는 변경이 가능하다. 이 방법을 통해 하위 컴포넌트에서 처리한 결과를 상위 컴포넌트에 반영해야 하는 경우 해결이 가능하다.

- 개발을 하다가 보면, 꼭 특정 컴포넌트에서 연관 없는 컴포넌트에 있는 State 변수의 값을 변경해야 하는 경우가 생기는데, React 컴포넌트의 함수적 특성으로 인해 최상단 컴포넌트까지 데이터를 전달하고, 다시 하위 컴포넌트로 데이터를 전달해서 반영해야되는 불편함이 존재한다.

- 그리하여, 개별 컴포넌트 상에서 State를 관리하지 않고 App 전체적으로 State를 모아서, 관리하는 기법이 사용된다. [중앙 집권적] 이렇게 될 경우, 특정 컴포넌트가 처리 중, 관련 없는 컴포넌트의 State값에도 간편하게 접근하고 변경시킬 수 있는 장점이 있다.

- State는 함수 내에 선언된 변수와 같다.

 

3-3. 상위 컴포넌트의 State 변수값을 하위 컴포넌트에서 변경하는 방법

- 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 때, 하위 컴포넌트의 props으로 상위 컴포넌트의 "state를 변경해주는 함수"를 전달해주면 된다.

- 하위 컴포넌트는 해당 함수를 호출함으로써, 상위 컴포넌트의 state값에 변경을 가할 수 있다.

- props으로 넘겨줄 때의 this의 binding을 신경써주어야 한다.

 

4. Virtual DOM

- Virtual DOM은 가상의 Document Object Model을 말한다.

- 일반적으로 HTML을 짜고 웹 브라우저에서 HTML 파일을 열 경우, HTML 코드들이 DOM을 만들게 되고, HTML의 특정 한 부분이 변경되면 전체 DOM을 새롭게 만들게 되어 비효율을 초래한다.

- React 프레임워크의 경우 가상의 DOM을 만들어 진짜 DOM과 비교 후, 변경사항이 있을 경우 전체를 새롭게 만들지 않고, 변경된 부분만 진짜 DOM을 반영하는 방식으로 작업을 수행한다. 이는 앱의 효율성과 속도를 높여준다.

- 즉 변경사항이 일어날 때 마다, React는 컴포넌트의 렌더링 업데이트 여부를 파악한다. 이를 구현하기 위해 내부적으로 컴포넌트가 갖고 있는 데이터(Props 또는 State)의 이전 이후값을 완전히 비교한다.

- 이때 변수의 값을 비교하게 되면 데이터 크기에 따라 성능에 영향을 주므로, 변수의 Reference만 비교하고, 값이 동일하더라도 Reference가 달라졌을 경우 변경이 일어난 것으로 간주한다. State 변수가 불변성을 가져야 하는 이유이다.

 

4-1. State 의 값 변경 시, 값의 일부 수정이 아니라 항상 set 형식으로 덮어쓰는 이유

- Virtual DOM을 진짜 DOM과 비교하게 될 때, set 형식으로 덮어씌울 때 값의 변경을 감지할 수 있게된다.

- State 변수는 "수정이 불가능한 변수" 즉 "불변(immutability)성"을 가져야만 하는 이유이다.

 

React를 왜쓰는가?

- 기존 JS 기반의 jQuery처럼 JS를 기반으로 쉽게 개발할 수 있도록 도와준다는 공통점이 있고, 무엇보다 컴포넌트 기반 개발이라는 것이 매우 큰 장점인 듯? 지원도 많고.. 이상 피곤해서 그만