1. React란?
-
React란? 2014년 페이스북에서 사용자 인터페이스(User Interface)를 만들기 위해 개발된 Javascript 기반의 라이브러리 프로그램이다. (React Native : 모바일 앱 개발)
-
(1) React를 가장 많이 사용하는 궁극적인 이유?
-> React는 UI를 자동으로 업데이트해준다는 점
-> Javascript의 문법을 그대로 활용하고 있다는 점
-> 페이스북의 지속적인 관리와 함께 커뮤니티가 활성화 되어 있다는 점
-> 리액트를 활용하면서 마주할 문제(에러)들에 대한 해결방안을 쉽게 찾아볼 수 있다는 점
-> 리액트 기반의 React Native라는 기술을 통해 iOS, 안드로이드 기반의 모바일 애플리케이션도 개발할 수 있다는 점 -
React와 React Native의 차이점
-> React : Web Application
-> React Native : Mobile Application (iOS, Android)
2. React의 특징
- React의 특징은 총 4가지로 다음과 같다.
-> 선언적 프로그래밍
-> Virtual DOM
-> Component
-> JSX(Javascript Syntax eXtension)
(1) 선언적 프로그래밍 기반
- 프로그래밍은 절차적 기반과 선언적 기반으로 나눠서 개발을 하는데 절차적 기반의 프로그래밍은 문제해결의 과정을 중점적으로 맞춰져 있다면, 선언적 기반은 무엇을 해결할것인지에 대해 중점적으로 맞춰져 있다. -> (React는 선언적 프로그래밍 기반으로 맞춰져 있다.)
예) 택시 - 선언적 & 절차적 차이
- 선언적 : ㅇㅇㅇ역에서 내려주세요. (ㅇㅇㅇ역까지 가주세요)
- 절차적 : 이 방향으로 직진해서 두 번째 블록에서 우회전해주시고, 이후 첫 번째 신호등에서 좌회전해주세요. 전방에 다리를 건널 때까지 직진해주시고, 소방서가 있는 블록에서 우회전 후 300m 앞에서 내려주세요. (우회전 -> 좌회전 -> 직진 -> 우회전 -> 목적지 도착)
- 예시를 결론적으로 우리가 원하는 결과를 화면에 그려지는 View 에만 초점을 두고 우리가 원하는 모습을 선언해서 리액트에게 전달해주면, “어떻게" 하는지에 대한 중간과정은 리액트가 알아서 처리 해준다. 이처럼 선언적인 방식으로 개발하게 된다면 개발 과정에서도 최종 결과물의 모습만 고려하면 되기 때문에 훨씬 편리하고 효율적으로 개발할 수 있다는 장점이 있다.
(2) Virtual DOM
- React에서 UI를 업데이트하고자 할 때, “어떻게" 보여줄지에 대한 중간과정을 처리하기 위해 DOM 요소에 변화를 주기 전, 내부적으로 가상 DOM을 이용해서 실제 DOM에 일어나야 하는 변화를 계산해서 보여주는 기능을 수행하고 있다.
(3) 컴포넌트(Component)
- 컴포넌트는 UI적인 면에서 재활용이 가능한 UI 구성단위를 말한다. UI를 여러 조각으로 나누고, 각 조각을 개별적으로 사용할 수 있음
1. 예제) 레고블럭
-> 한개의 레고블럭을 종류가 다양한 여러개의 레고블럭들과 합쳐서 장난감을 만드는 것
2. 컴포넌트의 특징
-> 필요한곳에서 재사용 할수 있음 -> (ex. 레고블럭)
-> 독립적으로 사용할 수 있기 때문에 코드 유지보수가 쉬움
-> 다른 컴포넌트를 포함시킬수 있음
-> 해당 페이지가 어떻게 구성되어 있는지 한눈에 파악할수 있음
(3-1) 컴포넌트의 종류 - 클래스 컴포넌트 & 함수 컴포넌트
- 1) 클래스 컴포넌트
import React from 'react';
class App extends React.Component {
render() {
return <h1>This is Class Component!</h1>;
}
}
export default App;-> 클래스 컴포넌트를 사용할땐 반드시 render() 메서드가 있어야 하고, 그 안에서 화면에 보여줄 JSX(Javascript Syntax eXtension)를 반환해야 한다. state 및 lifecycle(라이프사이클) API를 통해 관련 기능을 사용할 수 있다.
- 2) 함수 컴포넌트
import React from 'react'
const App = () => {
return <h1>This is Function Component!</h1>;
};
export default App;-> 함수 컴포넌트는 render 메서드 없이 JSX를 반환하는 방식으로, 클래스 컴포넌트에 비해서 훨씬 간단하고 단순하다. React 16.8 버전에서 Hook 기능이 추가되면서 클래스 컴포넌트에서만 구현할수 있었던 Hook을, 함수 컴포넌트에서 구현할수 있게 되면서, 그 후부터 클래스 컴포넌트보다는 함수 컴포넌트가 더 많이 사용되기 시작했다. (오히려 클래스 컴포넌트보단 함수 컴포넌트가 구현할수 있는 state이외 많은 기능들을 사용할수 있어서 편리하다는 큰 장점이 있음.)
(4) JSX(Javasript Syntax eXtension)
