React의 특징과 장점, 적용 예제 까지!

안녕하세요 웹 프론트엔드 개발자 설탕시럽입니다.
10주 동안 100여 명 정도 되는 사람들과 React와 TypeScript에 대해 함께 학습하게 되었는데 (NomadCoder) 진행하는 김에 학습하는 내용을 꾸준히 정리해 보려고 합니다!

이번 주제는 React를 학습하는 이유와 JSX를 활용하지 않는 React 문법 작성법에 대해 알아보겠습니다.

 

왜 React를 학습해야 하는가?

제가 처음 React를 학습하게 된 이유는 많은 회사에서 사용된 검증된 라이브러리라는 점이 가장 큰 메리트로 느껴졌습니다. 강의에서도 비슷한 내용과 그 외 추가적인 이유와 함께 리액트를 왜 학습하고 그 장점에 대한 소개가 있었습니다.

• 개발자에게 중요한 자원중 하나는 시간! 학습한 내용이 몇년뒤에 잊히는 게 아닌 꾸준히 사용할 수 있는 기술을 학습한다면,  그만큼 시간을 절약할 수 있는데 React는 그러한 측면으로 장점이 있다. 대규모의 회사부터 수많은 회사와 많은 웹페이지에서 사용되고 있고, 실험적이고 리스크 있는 선택을 쉽게 할 수 없는 회사의 특성상 React는 계속해서 사용될 것이다.
• Facebook에서 개발 및 시작된 React JS는 여전히 Facebook의 관심을 받고있으며 꾸준히 개선되기 위한 투자가 진행되고 있다.
• React를 기반으로 한 framework들이 만들어 지면서 Web Frontend를 벗어나 다양한 분야에서 활용될 수 있다.

 

리액트란?

리액트는 싱글 페이지 애플리케이션(SPA)의 UI를 생성하는데 집중한 라이브러리입니다. 자바스크립트의 특정 값이 바뀌었을 때, DOM을 다 날리고 새로 만들어서 보여준다는 발상으로 시작하여, Interactive 한 UI를 쉽고 효과적이게 만들어 주기 위해 최선을 다한 라이브러리입니다.

이러한 특징을 위해 Virtual DOM과 같은 개념이나, UI를 Component 단위로 분리하는 기능을 가지게 됩니다.

 

작업환경 준비

우선 Node 또는 CRA가 아닌 기존의 HTML, CSS 파일에서 React와 ReactDom을 import 해서 사용하는 방식에 대해 살펴보겠습니다.

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

 위와 같은 코드로 React와 ReactDom을 import 합니다. 제대로 동작하는지 확인하고 싶다면, console창을 통해 React라는 명령을 쳤을 때 잘 동작하고 자동완성이 되는지 확인하면 됩니다.

 

리액트로 HTML 요소 만들기

const root = document.getElementById("root");
const span = React.createElement("span", 
	{id: "text"},
	"Hello World"
);

ReactDOM.render(span, root);

위 코드를 통해 React가 어떻게 HTML요소를 만들고 페이지에 렌더링 하게 되는지 살펴봅니다.

우선 React.createElement를 통해 HTML 요소를 Javascript에서 만들 수 있습니다. 기존의 document.createElement()와의 차이점은 기존에 HTML property를 넣는다거나, CSS를 설정할 때에면 그에 맞는 코드를 여러 줄 작성해야 하지만 React는 하나의 문에 그 모든 것을 담을 수 있습니다.

React.createElement(
  type, // 태그 이름 문자열 
  [props], // HTML Property | event 등등
  [ ... children] // 자식으로 넣어주는 요소들
);

이렇게 만들어진 요소를 웹 페이지에 렌더링 하기 위해서 처음이자 마지막으로 html에 root라는 id를 가진 div를 하나 생성해 놓고 document로 받아옵니다. 그리고 ReactDOM.render 함수를 이용해서 React요소를 렌더링 해서 웹페이지에 나타냅니다.

ReactDOM.render(추가할 요소, 부모 요소)

이러한 방식은 기존의 웹페이지를 구성하고 코딩하는 방식과 반대의 방향을 보여줍니다. 기존에는 HTML을 작성하고 CSS와 Javascript로 웹 요소에 접근하여 작성하는 방식이라면, 지금은 Javascript 코드를 작성하고 HTML을 업데이트시키는 방식으로 웹페이지를 컨트롤하게 됩니다.

 

Event 적용하기

앞서 설명한 바와 같이 React는 Interactive 한 UI를 편리하게 만드는데 중점을 두고 있고, 이는 상당수가 event와 연관되어 있습니다. 그래서 React는 event를 편리하게 선언하기 위해 createElement 두 번째 인수 property자리에 event관련 함수를 아래 예제와 같은 방식을 통해 삽입 가능하게 도와줍니다.

const btn = React.createElement(”button”, 
	{
		onClick: () => console.log('im clicked!'),
		onMouseEnter: () => console.log('mouse enter!'),
		style : {
			backgrounColor : "red",
		}
	}
, “click me”);

하나의 문으로만 HTML요소 생성, css 및 event 설정 등을 가능하게 하는 것이 React의 특징이자 강점입니다.

 

다음 주제로는 JSX에 대해서 다루어 보겠습니다! 감사합니다

 

Reference

NomadCoders React 2장 : https://nomadcoders.co/react-for-beginners/lobby

React 공식문서 JSX 없이 사용하는 React : https://ko.legacy.reactjs.org/docs/react-without-jsx.html