자바스크립트 기반 라이브러리 리액트에 대해 알아봅시다.

이번 글에선 제가 프로젝트를 할 때 자주 사용하는 리액트에 대해 알아보겠습니다.

리액트는 자바스크립트 기반 라이브러리로서 컴포넌트로 나눠 개발할 수 있는 장점이 있습니다.

 

 

리액트(React, React.js 또는 ReactJS)는 자바스크립트 라이브러리의 하나로서[2] 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.[3][4][5]

리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다. 대규모 또는 복잡한 리액트 애플리케이션 개발에는 보통 라우팅, API통신 등의 기능이 요구되는데 리액트에는 기본적으로 제공되지 않기 때문에 추가 라이브러리를 사용해야 한다.[6][7]

리액트 (자바스크립트 라이브러리) - 위키백과, 우리 모두의 백과사전

 - 위키피디아 -

 

컴포넌트를 기준으로 개발하기 때문에 가독성이 뛰어납니다.

import React from 'react';

const Main = () => {
	return (
    	<>{`hello`}</>
    );
}

export default Main

Main이라는 이름을 갖는 컴포넌트를 만들었습니다.

이렇게 생성한 컴포넌트를 다른 컴포넌트에 붙여 사용할 수 있습니다.

 

import Main from './Main'

const MainParent = () => {
	return (
    	<>
        	<Main />
        </>
    );
}

export default MainParent;

 

MainParent라는 컴포넌트에 MainParent를 불러와 사용했습니다.

자세한 개발은 다음글에서 천천히 풀어가도록 하겠습니다. 전체적인 생김새는 컴포넌트들의 집합으로 이루어져있습니다.

이런 컴포넌트의 연결로 프로젝트를 개발하게 되는데요.

 

이렇게 개발하면 고치고싶은 컴포넌트를 찾아 수정하면 되기 때문에 많은 이점을 가져옵니다. (유지보수, 생산성, 협업 등)

 

 

Q)자바스크립트 프레임워크는 3가지가 있는데 리액트를 사용하는 이유가 뭔가요?

1. Virtual Dom을 이용해 리렌더링 시간을 줄일 수 있다.

2. 프론트엔드 프레임워크 사용량 1등이기 때문에 커뮤니티가 활성화되어있다.

3. 단방향 바인딩을 사용하므로 흐름이 단순하다.

4. 앱 개발도 할 수 있다. (React Native)

5. SSR을 지원해주는 프레임워크가 있다. (Next js)

 

제가 리액트를 사용하는 이유는 위 5가지 입니다. 다음 글 부터 천천히 리액트를 사용해보면서 리액트 사용 이점을 설명드리도록 하겠습니다.