React

 

비교적 짧은 러닝커브

• React는 Library로 기본적인 Javascript(ES6)와 Html에 대해 이해하고 있다면 홈페이지에 나와있는 튜토리얼을 통해 시작할 수 있습니다.

재사용성, 유지보수에 용이한 구성요소 보유

• React는 Component 구조로 이루어져 재사용성과 유지보수에 있어서 뛰어납니다.

Virtual DOM을 통한 rendering

• React는 Virtual DOM을 통해 변화를 가상DOM에 먼저 적용하고 render 시켜 연산을 줄여줍니다.

---

Component

- React에서 Component는 데이터(ex: Props, State)를 입력받아 DOM Node를 출력하는 함수의 역할을 합니다.

- Component는 UI를 구성하는 개별적인 뷰 단위입니다.

- Application은 이런 Component들이 모여 마치 블록을 조립해 완성본을 만드는것과 같습니다.

- 각 Component들은 Application의 다른 부분 또는 다른 Application에서 쉽게 재사용이 가능합니다.

  (Application의 구성요소를 작은 단위로 나누어서 관리를 하게되면 유지보수, 재사용 모두 용이합니다.)

JSX

const element = <h1>Hello, world!</h1>;

JSX(Javascript XML)는 React를 위해 태어난 새로운 자바스크립트 문법의 확장입니다.

JSX는 템플릿 언어처럼 보일 수 있지만, 자바스크립트를 기반으로 하고 있습니다.

React는 작성한 코드를 컴파일하는 과정이 필요합니다.(Babel을 사용)

이런 과정을 거쳐 가면서도 우리가 JSX를 사용하는 이유는 우리에게 친숙한 구문을 사용하여 구성요소의 렌더링 구조를 지정하는 방법을 제공합니다.

즉 우리에게 한눈에 이해하기 쉬운 개발 환경을 제공합니다.

Virtual DOM

React 컴포넌트는 render 를 다시 호출하여 새로운 결과값을 return 합니다.
그렇지만 return값은 바로 DOM에 반영되지 않습니다.

바로 브라우저에 render되지 않습니다.

이 과정에서 React는 return값을 가지고 Virtual DOM을 생성하고 이전 브라우저에 보여지고 있는 DOM과 비교하여 변경된 부분을 확인하고 변경된 부분만 우리에게 보여지는 DOM에 적용합니다.

---

Component

React 컴포넌트를 작성할 때 컴포넌트 이름은 대문자로 시작해야 합니다.

Class  vs  Functional

 

• Functional

React에서 컴포넌트를 정의하는 가장 간단한 방법은 Javascript의 함수 형식으로 정의하는 것입니다.

state 나 lifecycle이 없는 일반 Javascript 함수이므로 읽기 및 테스트 하기가 수월합니다.

기본적으로는 state, lifecycle등의 기능을 사용할 수 없습니다.

(위 기능들을 Functional 에서 사용할 수 있는 Hook이 존재합니다.)

 

• Class

React.Component에 대한 상속을 작성해야합니다.

(컴포넌트에 React.Component의 기능에 대한 액세스 권한을 제공합니다.)

또한 Class의 경우 "render()" 메소드가 필수적으로 필요하며 render 후 HTML을 리턴합니다.

"Constructor"는 class에서 state나 props를 사용하기 위해 필요한 생성자입니다.

(메소드를 바인딩하거나 state를 바꾸는 작업이 없다면, 해당 React 컴포넌트에는 구현하지 않아도 됩니다.)

"super(props)"는 부모 클래스 생성자를 가리킵니다.

(리액트에서는 React.Component)

Props를 상속받아서 class에서도 사용할 수 있게 도와줍니다.

(constructor에서 super 호출 전에 this를 사용하지 못하게 되어있습니다.)

States

해당 Component에서 동적인 데이터를 관리하는 경우

state를 직접 변경하지 않을 것

-> state를 직접 변경하면 리액트가 이를 감지고 다시 렌더링 하지 않으므로 setState를 이용해야합니다.

state를 유일하게 할당할 수 있는곳은 constructor이다.

리액트가 "여러 setState() 호출" 을 만나면 각 setState() 호출에 전달 된 모든 객체를 추출하여 배치작업을 수행하고,

이를 머지(merge)하여 단일 객체를 형성한 다음 단일 객체를 사용하여 setState()를 수행합니다.

Props

Props는 상위 Component에서 하위 Component로 전달되는 데이터입니다.

또한 불변한 속성을 가지고 있습니다.(동일한 입력이 주어지면 항상 동일한 출력을 렌더링합니다.)

Life cycle

컴포넌트의 수명을 나타내며 페이지에 렌더링 되기 전 준비과정에서 시작해서 페이지에서 사라질 때 끝납니다.

이 생명주기 시점을 이용하여 우리는 다양한 이벤트를 원하는 상황에 맞게 활용할 수 있습니다.