리액트의 정의
리액트란 무엇일까? 리액트 공식 웹사이트에서 이렇게 정의하고 있다.
A JavaScript library for building user interfaces.
사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리다. 라이브러리(Library)는 영어로 도서관을 뜻한다. 프로그래밍 언어에서 라이브러리는 자주 사용되는 기능을 정리해 모아 놓은 것을 뜻한다. 도서관이랑 비슷한 개념이다.
UI(User Interface)는 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해 주는 것이다. 지금 보는 화면도 UI다. 웹사이트의 경우 버튼, 텍스트 입력창 등이 모두 사용자 인터페이스다. 버튼 누르면 반응하고 특정 페이지가 나타난다. 이런 기능을 모아둔 곳이 자바스크립트 라이브러리다.
자바스크립트 UI 프레임워크
NGULARJS, Vue.js, React가 대표적이다.
앵귤러JS는 구글에서 만든 오픈소스 프로젝트로 2010년에 출시되었다. 5~6년 전에는 많이 사용됐지만 지금은 공식적인 지원이 종료됐다.
Vue.js는 Evan You라는 중국인 개발자가 시작한 오픈소스 프로젝트다. 2014년 출시됐고 현재 리액트와 함께 언급되는 자바스크립트 대표 프레임워크다.
리액트는 메타(페이스북)에서 만든 오픈소스 자바스크립트 UI 라이브러리로 2013년 출시되고 사용률이 계속 증가하여 가장 많이 사용되는 라이브러리가 됐다.
기술에는 트렌드가 있어서 앞으로 판도가 어떻게 바뀔지 알 수 없다. 그러나 메타의 든든한 지원이 있기에 당분간은 리액트의 열기가 유지될 것으로 보인다.
리액트의 장점
1. 리액트를 사용하면 웹사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 속도가 매우 빠르다. 업데이트가 매우 빠르다고 할 수 있다. 이는 Virtual DOM 덕분이다. DOM은 페이지를 정의하는 하나의 객체다. 웹사이트의 정보를 모두 담고 있는 그릇이라고 생각하면 쉽다.
2. 컴포넌트 기반의 구조를 사용한다. 컴포넌트는 구성요소라는 뜻을 가지고 있다. 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있다. 하나의 부품이라 생각하면 쉽다. 컴포넌트의 조합이 웹사이트다.
3. 컴포넌트를 재사용할 수 있다. 재사용은 객체지향에서 등장하는 중요한 개념이다. 재사용성이 높으면 유지 보수가 용이하다. 모듈에 문제가 생기면 해당 모듈만 수정해서 다시 배포하면 된다. 버그의 원인을 찾기 쉽다. 리액트는 컴포넌트 기반 구조로 하나의 컴포넌트가 다른 곳에서 재사용될 수 있다.
4. 잘 나가는 메타의 지원. 메타가 프로젝트를 종료하지 않는 한 계속 사용가능하다.
5. Github의 리액트 프로젝트 페이지를 가보면 굉장히 활발하다. StackOverflow도 마찬가지다. 개발자들의 관심을 한 몸에 받고 있다. 즉, 커뮤니티가 잘 만들어져 있어서 도움받기가 쉽다.
6. React Native를 사용하면 자바스크립트 코딩을 통해 안드로이드 앱, iOS앱을 동시에 출시 할 수 있다. 모바일 앱 개발에 접근하기 쉽다.
리액트의 단점
1. 학습할 것이 너무 많다. 방대한 내용 중에서 필수적인 것부터 공부해야 지치지 않는다.
2. state는 리액트 컴포넌트의 상태를 뜻한다. 컴포넌트 개수가 많아지면 복잡도가 커진다. state 관리가 생각보다 쉽지 않을 수 있다.
실습
간단하게 웹사이트를 만들어서 React.js를 추가해보자.
1) HTML 코드
React.js 추가하기 - 기존의 HTML파일에 DOM 컨테이너를 추가한다. root라는 id를 가진 <div> 태그를 추가해 준다. 이 태그가 DOM 컨테이너로 사용된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>디오의 경제 사이트</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>디오의 경제 사이트에 오신 여러분을 환영합니다!</h1>
<div id="root"></div>
<!-- 리액트 가져오기 -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 리액트 컴포넌트 가져오기 -->
<script src="MyButton.js"></script>
</body>
</html>
2) CSS 코드
h1{
color:blue;
font-style: normal;
}
3) Javascript 코드
리액트의 함수 컴포넌트다. 컴포넌트는 이런 구조를 가지고 있다.
마지막 두 줄은 ReactDom의 render 함수를 사용하여 리액트 컴포넌트를 DOM 컨테이너에 렌더링 하는 코드다.
function Mybutton(props){
const[isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{ onClick: () => setIsClicked(true) },
isClicked ? 'Clicked!' : 'Click here!'
)
}
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(Mybutton), domContainer);
4) 결과 : Click here! 을 누르면 Clicked!로 바뀐다.
리액트 함수의 state가 변경되었기 때문이다.
신기하다.
리액트의 정의, 장점과 단점을 알아보고 간단한 실습 과제를 진행했다. html, css, javascript 코드를 직접 입력하고 리액트를 수동으로 연동했는데 create-react-app을 사용하면 자동으로 생성하고 실행할 수 있다. 다음에는 create-react-app을 실행해서 애플리케이션을 만들어볼 계획이다.
'Javascript' 카테고리의 다른 글
| 크롬에서 복사 및 드래그 방지 해제하기 (복붙방지해제) (2) | 2023.12.03 |
|---|---|
| [React] create-react-app 설치하기 (0) | 2023.07.29 |
| 모듈이란 무엇인가? (0) | 2023.04.08 |
| Javascript 코드를 크롬에 입력했을 때, undefined가 나오는 이유 (0) | 2023.04.04 |
| Javascript 무한스크롤 구현 (0) | 2023.04.03 |
