1.1 왜 리액트인가?

자바스크립트

JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어입니다.

페이지의 내용이 — 가만히 정적인 정보만 보여주는 것이 아니라 — 주기적으로 갱신되거나, 사용자와 상호작용이 가능하거나, 애니메이션이 적용된 2D/3D 그래픽을 볼 수 있다면 JavaScript가 관여하고 있을 거라고 생각해도 좋습니다.

MVC

(모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다.

소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다.

이러한 "관심사 분리" 는 더나은 업무의 분리와 향상된 관리를 제공합니다.

MVC 소프트웨어 디자인 패턴의 세 가지 부분은 다음과 같이 설명할 수 있습니다.

1. 모델: 데이터와 비즈니스 로직을 관리합니다.
2. 뷰: 레이아웃과 화면을 처리합니다.
3. 컨트롤러: 명령을 모델과 뷰 부분으로 라우팅합니다.

REACT

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

구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리

컴포넌트

(component)란 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위를 말한다.

컴포넌트를 이용하면 소프트웨어개발을 마치 레고(Lego) 블록을 쌓듯이 조립식으로 쉽게 할 수 있다.

모듈(module)이라고도 한다.

컴포넌트는 프로그램의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다.

컴포넌트는 소프트웨어시스템에서 독립적인 업무 또는 독립적인 기능을 수행하는 모듈로 시스템을 유지보수하는데 있어서 교체가 가능하다.

소프트웨어 컴포넌트는 하드웨어의 그래픽카드와 같은 개념으로 독립적인 기능을 수행하는 소프트웨어 모듈이라고 할 수 있다.

부품의 개념.

버튼과 텍스트 박스 등의 범용성이 높은 요소를 컴포넌트로 정의해 공장처럼 UI 부품을 설계할 수 있다.

그러나 컴포넌트는 다른 프레임워크의 *템플릿과는 다르게 좀 더 복합적인 개념을 띄우고 있다.

재사용이 가능한 API이며 보다 다양한 기능, 무엇보다 컴포넌트 내에 생김새 및 작동방식을 정의한다.

또한 컴포넌트 내에 또 다른 컴포넌트가 들어갈 수 있다.

(*템플릿 : 데이터셋을 HTML 형식을 문자열 형태로 반환한다)

render 함수

UI를 사용할 때는 필연적으로 눈에 보이는 화면을 구성해주는 렌더링이 필요하다.

리액트에서는 render 함수가 바로 그 역할을 담당하고 있다.

render 함수는컴포넌트가 어떻게 생겼는지 정의하고, 뷰의 구성과 작동 방식에 대한 정보를 지닌 객체를 반환한다.

초기 렌더링

렌더링을 담당하는 render 함수는 **컴포넌트의 정보를 이용해 화면을 구성(렌더링)**한다.

컴포넌트가 내부에 중첩되어 선언되어 있는 경우에 render 함수를 실행할 시, render 함수는 중첩된 컴포넌트도 재귀적으로 렌더링을 하게 된다.

재귀가 끝나 최상위 컴포넌트의 렌더링이 끝나면 render 함수가 반환한 객체의 정보를 이용하여 문자열 형식의 html코드를 반환해 특정 DOM에 주입한다.

좀 더 간결하게 과정을 설명하면

1. 컴포넌트 정의
2. 컴포넌트의 정보를 이용해 렌더링
3. 문자열 형식 html 코드 반환
4. DOM 요소에 주입

리렌더링 (조화 과정)

리액트에서 뷰를 업데이트(리렌더링)할 때 이를 '조화 과정을 거친다' 라고 표현한다.

이전에 언급한 것처럼, 뷰를 변형시키는 것으로 보이나 사실 render 함수로 인해 새로운 요소로 갈아끼워진다.

데이터를 업데이트 했을 때 컴포넌트는 render 함수를 재차 호출해 새로운 뷰를 생성한다.

리액트에서는 DOM에 반영하기 이전, 이전에 생성한 컴포넌트 정보와 다시 렌더링한 정보를 비교해 최소한의 연산으로 DOM 트리를 업데이트 한다.

즉 정리하자면,

1. 데이터의 업데이트
2. 업데이트 된 데이터를 이용한 render 함수의 리렌더링
3. 이전의 컴포넌트, 리렌더링된 컴포넌트의 차이 비교
4. 바뀐 요소들만 DOM에 반영

자바스크립트

JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어입니다.

페이지의 내용이 — 가만히 정적인 정보만 보여주는 것이 아니라 — 주기적으로 갱신되거나, 사용자와 상호작용이 가능하거나, 애니메이션이 적용된 2D/3D 그래픽을 볼 수 있다면 JavaScript가 관여하고 있을 거라고 생각해도 좋습니다.

MVC

(모델-뷰-컨트롤러) 는 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴입니다.

소프트웨어의 비즈니스 로직과 화면을 구분하는데 중점을 두고 있습니다.

이러한 "관심사 분리" 는 더나은 업무의 분리와 향상된 관리를 제공합니다.

MVC 소프트웨어 디자인 패턴의 세 가지 부분은 다음과 같이 설명할 수 있습니다.

1. 모델: 데이터와 비즈니스 로직을 관리합니다.
2. 뷰: 레이아웃과 화면을 처리합니다.
3. 컨트롤러: 명령을 모델과 뷰 부분으로 라우팅합니다.

REACT

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

구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리

컴포넌트

(component)란 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위를 말한다.

컴포넌트를 이용하면 소프트웨어개발을 마치 레고(Lego) 블록을 쌓듯이 조립식으로 쉽게 할 수 있다.

모듈(module)이라고도 한다.

컴포넌트는 프로그램의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다.

컴포넌트는 소프트웨어시스템에서 독립적인 업무 또는 독립적인 기능을 수행하는 모듈로 시스템을 유지보수하는데 있어서 교체가 가능하다.

소프트웨어 컴포넌트는 하드웨어의 그래픽카드와 같은 개념으로 독립적인 기능을 수행하는 소프트웨어 모듈이라고 할 수 있다.

부품의 개념.

버튼과 텍스트 박스 등의 범용성이 높은 요소를 컴포넌트로 정의해 공장처럼 UI 부품을 설계할 수 있다.

그러나 컴포넌트는 다른 프레임워크의 *템플릿과는 다르게 좀 더 복합적인 개념을 띄우고 있다.

재사용이 가능한 API이며 보다 다양한 기능, 무엇보다 컴포넌트 내에 생김새 및 작동방식을 정의한다.

또한 컴포넌트 내에 또 다른 컴포넌트가 들어갈 수 있다.

(*템플릿 : 데이터셋을 HTML 형식을 문자열 형태로 반환한다)

render 함수

UI를 사용할 때는 필연적으로 눈에 보이는 화면을 구성해주는 렌더링이 필요하다.

리액트에서는 render 함수가 바로 그 역할을 담당하고 있다.

render 함수는컴포넌트가 어떻게 생겼는지 정의하고, 뷰의 구성과 작동 방식에 대한 정보를 지닌 객체를 반환한다.

초기 렌더링

렌더링을 담당하는 render 함수는 **컴포넌트의 정보를 이용해 화면을 구성(렌더링)**한다.

컴포넌트가 내부에 중첩되어 선언되어 있는 경우에 render 함수를 실행할 시, render 함수는 중첩된 컴포넌트도 재귀적으로 렌더링을 하게 된다.

재귀가 끝나 최상위 컴포넌트의 렌더링이 끝나면 render 함수가 반환한 객체의 정보를 이용하여 문자열 형식의 html코드를 반환해 특정 DOM에 주입한다.

좀 더 간결하게 과정을 설명하면

1. 컴포넌트 정의
2. 컴포넌트의 정보를 이용해 렌더링
3. 문자열 형식 html 코드 반환
4. DOM 요소에 주입

리렌더링 (조화 과정)

리액트에서 뷰를 업데이트(리렌더링)할 때 이를 '조화 과정을 거친다' 라고 표현한다.

이전에 언급한 것처럼, 뷰를 변형시키는 것으로 보이나 사실 render 함수로 인해 새로운 요소로 갈아끼워진다.

데이터를 업데이트 했을 때 컴포넌트는 render 함수를 재차 호출해 새로운 뷰를 생성한다.

리액트에서는 DOM에 반영하기 이전, 이전에 생성한 컴포넌트 정보와 다시 렌더링한 정보를 비교해 최소한의 연산으로 DOM 트리를 업데이트 한다.

즉 정리하자면,

1. 데이터의 업데이트
2. 업데이트 된 데이터를 이용한 render 함수의 리렌더링
3. 이전의 컴포넌트, 리렌더링된 컴포넌트의 차이 비교
4. 바뀐 요소들만 DOM에 반영