[React] 리액트란?

서론

오늘은 리액트에 대해서 무엇인지 간단하게 살펴보려고해요!

---

 

 

리액트란?

리액트 공식홈페이지

'사용자 인터페이스를만들기 위한 JavaScript 라이브러리'라고 공식홈페이지 대문에 나와있는데요.

좀 더 쉽게 말하자면 화면에 그리는 UI를 좀 더 쉽게 그릴 수 있게 도와주는 JavaScript 라이브러리입니다.

 

 

Q. 어? 리액트는 프레임워크가 아닌가요?

네. 리액트는 프레임워크가 아닌 라이브러리입니다.

프레임워크와 라이브러리의 차이점을 간단히 설명드릴게요!

프레임워크는 필요한 기능들이 대부분 완성되어있어 가져다 쓰기만하면 되는 완전체 형태입니다. 그래서 그 틀안에서 벗어나기 힘들죠.

라이브러리는 필요한 곳에 자유롭게 가져다 쓰는 도구입니다. 다른 라이브러리들과 결합해서 어떻게 사용할지는 개발자 나름입니다.

 

 

 

리액트의 특징

JSX

JSX(JavaScriptXML)는 자바스크립트 코드를 HTML처럼 표현할 수 있는 React 엘리먼트를 생성하는 언어입니다.

JSX 문법은 반드시 부모요소 하나가 감싸는 형태여야 합니다.

기본예시

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

표현식 포함하기

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

 

 

가상돔 Virtual DOM

가상돔은 실제 DOM변화를 최소화시켜주어 시간복잡도가 낮아지는 역할을 합니다. 속도적인 부분과 많은 일을 수행하다 버그가 발생하거나 브라우저가 죽는 일 등등의 일을 개선하고자 가상돔이 나왔습니다. HTML에 20개의 변화가 생기면, 과정 역시 20회가 이루어집니다. 가상돔을 쓰면 변화된 부분만 가려내어 돔에 실제 전달하기로는 1회로 인식하여 단 한번의 렌더링 과정만 거치게됩니다.

 

 

 

컴포넌트

컴포넌트란 레고 블록과 같이 작은 단위로 만들어서 그것을 조립하는 것처럼 개발하는 방법입니다.

컴포넌트를 사용하면 캡슐화, 확장성, 결합성, 재사용성과 같은 이점이 있습니다.

//해당예시는 React 공식홈페이지에 있는 예시 그대로 가져온 데이터

const UserInfo = (props) => {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

const Comment = (props) => {
  return (
    <div className="Comment">
      <UserInfo user={props.author} /> // UserInfo 컴포넌트 분리
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

 

 

선언형 프로그래밍

프로그래밍은 명령형 프로그래밍과 선언형 프로그래밍으로 나눌수 있습니다.

명령형 프로그래밍은 말그래도 컴퓨터에 수행할 명령들을 순서대로 써놓은것이라고 보면된다. 명령형 프로그래밍은 How 즉 어떻게에 중점을 둡니다.

반대로 선언형 프로그래밍은 무엇을 해야할지 나타내는 경우를 선언형이라고합니다. 즉, 웹 페이지를 만들때 어떤 순서로 보이게할 것인지 보다, 무엇을 보이게할 것인지에 중점을 둡니다.

선언형 프로그래밍에 속하는 대표적인 방식이 함수형 프로그래밍입니다.

 

 

 

장점

- 커뮤니티와 자료가 방대하여 그만큼 배우기 쉬운편입니다.

- 페이스북팀이 만들어서 지속적으로 업데이트 중입니다.

- 서버사이드 렌더링과 클라이언트 사이드 렌더링을 둘다 지원합니다.

- 매우 간편하게 UI 수정 및 재사용을 할 수있습니다.

- 성능이 뛰어난 Garbage Collection, 메모리관리등의 기능을 제공합니다.

- 다른 프레임워크나 라이브러리와 혼용이 가능합니다.

 

 

단점

- 프레임워크가 아니기 때문에 Only View만 지원함니다.

- 데이터 모델링, 라우팅, 에이젝스 등의 기능이 없습니다.(직접 구현해야함) 

- 다른 라이브러리들을 추가로 사용하여 구현해야합니다. (위의 장점에도 있는부분이지만 단점도 됨)

- 자바스크립트 배경지식이 부족하면 배우기 힘들 수 있습니다.

 

 

 

---

지금까지 간단하게 리액트에 대해서 알아봤습니다.

혹시나 잘못 언급하거나, 수정해야할 부분이 있다면 언제든지 댓글 부탁드리겠습니다 :) 

끊임없이 배우는 개발자 HJi 였습니다.

감사합니다.