[ React ] 리액트(React)란 무엇일까?

리액트(React) 란 무엇일까?!

 

리액트는 실리콘벨리 굴지의 기업 "페이스북 (Facebook)"이 주도로 개발한 Javascript 기반 라이브러리이다.

리액트는 웹 애플리케이션의 UI를 효과적으로 구축하기 위해 개발되었으며, React.js, React를 혼용하여 여러 라이브러리를 활용할 수 있는 강력한 기능을 가지고 있다. 

 

왜 리액트를 사용할까? 

그렇다면 왜 리액트를 사용할까? 리액트의 특징을 한번 알아보도록하자.

 

• 선언적 (Declaractive) 특징 / JSX 문법
  • 리액트는 JSX문법을 활용합니다. JSX 문법의 방식을 선언형 프로그래밍 방식이라고 하며 '무엇 (what)'을 해야하는 지정하는 방식의 문법입니다. 따라서, JSX문법에서는 컴포넌트의 구조와 동작을 선언적으로 작성할 수 있도록 도와줍니다. (명령형 프로그래밍과 대조적이다.)

// 선언형 프로그래밍
function App(){
	return (
    	<div>
    		<h1> Hello, World</h1>
        	<p> Welcome </p>
    	</div>
   	);
}

// 명령형 프로그래밍
function App(){
	const div = document.createElement('div');
    const h1 = document.createElement('h1');
    h1.textContent = 'Hello';
    const p = document.createElement('p');
    p.textContent = 'Welcome';
    div.appendChild(h1);
    div.appendChild(p);
    return div;
}

 

• 강력한 호환성
  • 리액트는 다른 라이브러리와 활용하는 것이 용이하다. 가령, 리액트 라우터(React Router)를 비롯한 리덕스(Redux), 모빌(MobX)과 같은 라이브러리를 활용할 수 있다.
• 컴포넌트 기반 (Component-based) 
  • 컴포넌트를 캡슐화하여 활용할  수 있으며 이러한 특성을 활용하여 화면을 구성할 경우 재사용이 용이하다. (개발시간 단축 및 성능 향상)

 

리액트의 장점과 단점

굴지의 기업 페이스북이 구축한 라이브러리인 만큼 성능과 안정성의 장점이 있다. 또한 CSR(Client Side Rendering), SSR(Server Side Rendering)을 함께 지원하기 때문에 프론트 및 백엔드에서 활용이 가능하다. 따라서 Ajax와 같은 비동기 (asynchronous)방식 대비 SEO 최적화에 더 유리하다.

 

리액트의 장점

• 가상 DOM을 활용하여 싱글페이지 애플리케이션의 리플로우와 리페인트를 최소화한다. (성능 향상)
• 컴포넌트 아키텍쳐를 지향한다. (생산성 및 유지보수 용이)
• 단방향 데이터 바인딩 (안정성 보장)

리액트의 단점

• 방대한 학습량과 새로운 기술에 대한 러닝커브 ( javascript에 대한 기본적인 이해가 필요함 )
• 상태관리 복잡도 (컴포넌트의 사용도와 개수가 높아지면 그만큼 복잡한 형태의 컴포넌트를 처리하기 때문에 성능하락이 발생 할 수 있음, 따라서 방대한 서비스에서 성능하락을 어떻게 해결할 것인지 설계단계에서 고민해야한다.)