온라인 부트캠프 항해99를 시작한지 3주차때 드디어 내가 하고싶었던 리액트를 본격적으로 시작하기 시작했다!
리액트란뭐고, 왜 사용하는건가?
자바스크립트의 라이브러리중 하나로 웹서비스를 SPA(Single Page Application)으로 개발할 수 있도록 도와주는 아주 고마운 도구이다.
웹서비스를 웹앱형태로 마치 어플리케이션처럼 페이지 이동이 되어 새롭게 모든 html을 재렌더링이 되는것이 아닌 딱 필요한 부분만 재렌더링을 시켜주어서 훨씬 더 빠른 웹서비스를 경험 할 수 있게 해준다.
실제로 리액트로 웹서비스를 재개발한 사이트의 유저 이탈률이 많이 줄었다는 사례들도 있다고 한다.
리액트에서 매우 중요한 개념인 가상돔이란 것이 있는데 과연 이것은 일반적인 돔과 무슨 차이점을 보이는것일까?
돔이란?
- html 단위 하나하나를 객체로 생각하는 모델이다. 예를들어, 어떠한 요소를 사용하게되면 그 요소에는 텍스트 노드, 자식노드들이 있고 또 이러한 노드들에도 계속해서 이어지는 하위노드들이 있다. 이러한 형태들을 돔이라 불리며, 각 노드들이 이어져있는 형태를 돔트리라고 불린다.
가상돔이란?
- 돔을 흉내낸 자바스크립트 객체라고 생각하면 된다.
웹서비스를 운영하다보면 여러가지를 수정해야하는 상황들이 생기게되는데, 그럴때마다 자바스크립트를 통해 돔에 직접적으로 관여를 해서 수정을 해야한다. 그렇게되면 트리로 되어있는 돔에는 수정 상황이 많이 생겨나면 많이 생겨 날 수록 여러 노드들도 많은 영향을 주게되며 웹서비스 성능에 부담을 주게 된다.
하지만 가상돔은 수정이 필요한 돔을 똑같이 흉내내서 딱 필요한것만 효율적으로 변화를 줄 수 있는 방법을 찾아 돔을 교체하는 방식이다.
기존 리액트는 돔을 렌더링할때 굉장히 복잡하고 까다로운 방식을 사용한다.
예를들어 하나의 div 요소를 렌더링 한다고 가정하면
const element = <div> 나는 div 박스 </div>;
ReactDOM.render(element,document.getElementById('root'));이런식으로 복잡하게 렌더링을 해야했다. 요소가 많아지면 많아질 수록 복잡함은 배가 될 것이다.
하지만 JSX라는 것이 이것을 매우 간편하게 도와준다.
JSX란?
- HTML문법을 자바스크립트안에서 그대로 사용할 수 있게 해주는 것이다.
Java Script eXtension의 줄임말이라고 한다.
하지만 이 문법을 리액트 자체에서는 이해를 못하기때문에 바벨이라는 것을 사용하여 리액트가 이해 할 수있게 도와주게 된다.
JSX 사용예시
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;이런식으로 자바스크립트 코드 안에서 html을 사용하게 되며 매우 편리하게 마크업을 하여 웹서비스에 출력할 수 있게 도와주는 매우 고마운 존재라고 보면 된다.
저런식으로 개발된 단위를 컴포넌트라고 불리는데,
컴포넌트는 하나의 부품같은 것이라고 생각하면 된다. 저러한 부품들을 여러개 만들고 그것을 조립하면 하나의 완성체(웹서비스)가 되는것이다.
컴포넌트 단위로 개발하게되면 장점이 무엇이 있을까?
컴포넌트란?
컴포넌트는 생산성과 유지 보수를 편리하게 만들어준다. 어떠한 변화가 필요한 경우 그 필요한 부분에 변화를 주게되면 다른 부분에 악영향을 끼칠 수가 있는데, 컴포넌트 개념을 사용하게되면, 그 부분만 딱 수정을 하면 되기때문에 다른 부분에 영향을 최소화 할 수 있으며, 재사용 기능성도 아주 훌륭한 좋은 부품이다.
컴포넌트에는 클래스형 컴포넌트, 함수형 컴포넌트가 존재한다.
클래스형 컴포넌트
import React, { Component } from 'react';
class NotFound extends Component {
render() {
return (
<div>
</div>
);
}
}
export default NotFound;함수형 컴포넌트
import React from 'react';
const NotFound = () => {
return (
<div>
</div>
);
};
export default NotFound;과거에는 클래스형 컴포넌트 위주로 개발을 할 수밖에 없었다. 상태관리, 라이프사이클등 많은 부분에서 함수형 컴포넌트는 기능 제약이 있었기 때문이다.
* 상태(state) : 컴포넌트가 가지고 있는 데이터를 의미
* 라이프 사이클 : 컴포넌트의 생명주기로, 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질때까지의 과정
하지만 리액트훅이라는 개념이 등장하게되면서, 생긴것만 다르고 기능은 동일하게 구현할 수 있게되었다.
리액트에는 정말 알아야할 중요개념들이 많은것 같다고 생각했다. 이외에도 정말 많은 개념들이 존재하고, 개념들만 다 자세하게 다뤄도 책한권은 나올수도 있겠다 싶었다.
참 알면알수록 리액트의 매력에 빠져들게되고 흥미를 느끼게한다.
유지보수도 간편할 뿐더러 퍼포먼스 측면에서도 매우 훌륭하니 역시 프론트엔드 라이브러리 1위답다.
프론트엔드 개발자로서 성장하려면 SPA 라이브러리는 정말 이젠 선택이아닌 필수가 되어간다고 생각하게되었고, 경쟁에서 뒤쳐지지 않으려면 꾸준히 실력을 연마해야겠다!
감사합니다 :)
