[React] React란?

🌸 React란?

페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리다.

 

🌸 React의 장점

• Javascript 객체 형태의 Virtual DOM을 사용하여 애플리케이션의 성능을 향상시킨다.
• Server & Client 사이드 rendering 지원을 통해 브라우저 측의 초기 렌더링 딜레이를 줄이고 SEO 호환도 가능해진다.
• 🔥 렌더링(Readering)이란?
  html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것.
• 컴포넌트의 가독성이 매우 높고 간단하여 쉬운 유지보수, 간편한 UI 수정 및 재사용이 용이하다.🔥 컴포넌트(Component)란?
  재사용이 가능한 UI 단위.
  props를 input으로 하고 UI가 어떻게 보여야 하는지 정의하는 React Element를 output으로 하는 함수.
  컴포넌트는 독립적으로, 재사용 가능한 코드로 관리할 수 있다.
  컴포넌트는 함수랑 비슷하다.
  컴포넌트도 input을 받아서 return 할 수 있다.
  (리액트 컴포넌트에서는 input을 props라고 말한다.)
• 리액트는 프레임워크가 아닌 라이브러리이기 때문에 다른 프레임워크와 혼용이 가능하다.
• 배우기가 간단하고 애플리케이션을 만들 때 덜 복잡하다.
• Controller, directive, template, model 처럼 분리를 하지 않고 컴포넌트 단 하나로 관리한다.
• 뛰어난 Garbage Collection, 메모리 관리, 성능을 가지고 있다.

 

 

 

🌸 React의 특징

🌷 속성과의 단방성 데이터 바인딩

보통 props라 불리는 속성들은 부모 컴포넌트로부터 컴포넌트에 전달된다.
컴포넌트들은 props를 하나의 불변의 값(Javascipt 객체)들로 받는다.

🌷 Stateful Component

상태를 Component를 통해 값을 보관하며 props를 통해 Child Component로 전달할 수 있다.

🌷 Virtual DOM

리액트는 인 메모리 데이터 구조 캐시를 만들고 결과 차이를 계산한 다음 브라우저에 표시되는 DOM을 효과적으로 업데이트한다. 이로써 개발자는 마치 모든 페이지가 변경될 때마다 렌더링되는 것처럼 코드를 작성할 수 있는데, 실제로 리액트 라이브러리는 단지 실제로 변경되는 하위 컴포넌트만을 렌더링할 뿐이다.

🌷 Lifecycle Method

라이프사이클 메서드들은 컴포넌트가 생존하는 동안 셋 포인트(set point)에 코드를 실행할 수 있게 하는 훅(hook)이다.

• shouldComponentUpdate는 렌더가 불필요한 경우 false를 반환함으로써 개발자가 컴포넌트의 불필요한 재렌더링을 막을 수 있게 한다.
• componentDidMount는 컴포넌트가 '마운트'(mount)되면 호출된다. (대개 컴포넌트 DOM 노드와 연결함으로써 사용자 인터페이스에서 만들어진다) API를 통해 원격 소스로부터 로드되는 데이터를 트리거(trigger)하기 위해 보통 사용된다.
• render는 가장 중요한 라이프사이클 메서드이며 어떠한 컴포넌트에서도 최소한의 필요 조건이다. 컴포넌트의 상태가 업데이트될 때마다 호출되는 것이 보통이며 사용자 인터페이스의 변경사항을 반영한다.

🌷 JSX

JSX(JavaScript XML)는 XML같은 문법을 사용하는 ECMAScript의 확장이다. HTML과 모습이 비슷해 보이는 JSX는 수많은 개발자들에게 친숙한 문법을 사용하여 컴포넌트 렌더링을 구조화하는 방법을 제공한다.
리액트 컴포넌트들은 일반적으로 JSX를 사용하여 작성되지만 꼭 그렇게 할 필요는 없다. (컴포넌트들은 순수 자바스크립트로 작성할 수도 있다)
JSX는 PHP를 위해 페이스북이 개발한 다른 확장 문법인 XHP와 유사하다.

🌷 내제된(nested) 요소

같은 레벨의 여러 요소들은 위와 같이 <div> 요소와 같이 하나의 컨테이너 요소로 감싸거나 배열로 반환해야 한다.

🌷 속성(attributes)

JSX는 HTML이 제공하는 것을 미러링하도록 설계된 일련의 요소 속성들을 제공한다. 사용자 지정 속성들은 컴포넌트로 전달할 수도 있다. 모든 속성은 컴포넌트를 props로 받는다.

🌷 단순 HTML 렌더링 그 이상의 아키텍처

리액트의 기본 구조는 웹 브라우저에서 렌더링되는 HTML을 넘어서 적용된다. 이를테면 페이스북은 <canvas> 태그에 렌더링하는 동적인 차트를 가지고 있으며, 넷플릭스와 페이팔은 서버와 클라이언트 쪽에 유사 HTML을 렌더링하기 위한 동일 구조의 적재(isomorphic loading)를 사용한다.

🌷 리액트 네이티브

리액트 네이티브는 2015년에 페이스북에 의해 발표되었으며 네이티브 안드로이드, iOS, UWP 애플리케이션에 리액트 아키텍처를 적용한다.