리액트
💡 React는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다.
리액트 등장
- 이전의 웹페이지와는 다르게 규모가 점점 커지며 DOM에 접근해 웹페이지를 개발하는 것이 힘들어지고, 데이터 관리, 유지보수 측면에서도 좋지않았다.
- 따라서 많은 프레임워크, 라이브러리들이 등장하였고 그중 Backbone, Angular JS가 구조화된 FE 환경인 SPA를 제시하기 시작한다.
- 하지만 웹페이지의 규모가 더욱 커지며 데이터의 흐름을 파악하는 것은 마찬가지로 어려워졌다.
- facebook이 데이터의 흐름을 파악할 수 있는 react라는 라이브러리를 들고나오면서 많은 인기를 얻게되어 현재까지도 그 인기를 유지 중이다.
선언적
개발에는 선언적 개발, 절차적 개발이 있는데 리액트는 선언적이다.
우선 절차적은 js로 DOM에 접근하는 것이다.
엘리먼트 요소들을 만들 때 특정 요소를 찾고 그 요소의 자식 요소로 또 다른 요소를 만드는등 굉장히 수고스럽고 화면에 어떻게 구현될지도 고민해야 한다.
하지만 선언적은 원하는 결과를 선언하면 리액트가 알아서 처리해주는 것이다.
그러니 DOM조작에 시간을 줄이고 화면에 어떻게 나올지만을 고민하면 되는 것이다.
컴포넌트 종류
컴포넌트를 선언하는 방식은 Class Component, Function Component 2가지가 있다.
Function은 Class와 달리 render메소드 없이도 JSX를 반환하며 Class보다 간단하고 Class에서만 사용가능했던 기능들을 Function에서도 사용할 수 있게 보완 되면서 Function을 더 사용하게 되었다.
따라서 본 글에선 Function Component 을 기준으로 설명하겠다.
import React from 'react';
const Main = () => {
return <h1>This main</h1>;
};
export default Main;컴포넌트 선언, 호출
리액트는 소문자를 HTML 태그로 인식하기 때문에 컴포넌트는 첫글자를 대문자로 해야한다.
import Head from './Head/Head';
const Main = () => {
return (
<>
<Article />
</>
);
};
export default Main;다른 컴포넌트를 가져다 쓰고 싶으면 import해야만 사용할 수 있다.
리액트 특징
Virtual DOM
화면이 렌더링 될 때 DOM, CSS, Rayout, Paint 등 많은 작업을 DOM조작 마다 수행한다.
만약 데이터 규모가 크다면 버튼 하나를 눌렀을 때 원하는 기능 하나가 아닌 페이지 전체가 리로드 되면서 DOM조작 로딩 시간이 길어지면 그만큼 작업도 길어지면서 성능이 저하된다.
Virtual DOM은 조작시 계산을 해보고 한번에 필요한 DOM만 조작하며 효율성을 높인다.
Component
컴포넌트는 여러 컴포넌트를 조립해 새로운 컴포넌트를 만들 수 있고 부모, 자식 컴포넌트도 만들 수 있다.
또한 독립적으로 사용할 수 있기에 재사용과 유지보수 측면에서도 좋다.
JSX
JSX(JavaScript Syntax eXtension)는 리액트에서 사용하는 JS 확장 문법이다.
JSX 문법
JS파일 안에서 HTML처럼 작성할 수 있다.
- 변수를 저장할 수 있고 {}안에 표현식을 넣어 호출할 수도 있다.
- class가 아니라 className으로 class를 선언한다.
- 속성은 카멜케이스로 작성해야 한다.
- 위 내용을 토대로 이벤트도
onChange={}처럼 카멜케이스를 사용한다.
- 위 내용을 토대로 이벤트도
style={{color:red, fontSize:10px}}처럼 인라인으로 스타일을 줄 수 있다.- css가 인라인 스타일 보다 성능이 높기 때문에 css를 사용하는 것이 좋다.
- 어떤 태그든 꼭 closing 태그를 붙여야 한다. Self closing도 가능하다.
- 컴포넌트 내부 엘리먼트 최상위를 감싸는 태그가 없다면 DOM 구조에 반영되지 않는
<React.fragment>태그로 감싸줘야 한다.- 왜냐하면 jsx 규칙상 여러 엘리먼트 요소를 return할 때 컴포넌트로 묶어서 return해야한다.
- 왜냐하면 컴포넌트는 하나의 dom트리 구조여야 virture dom이 효율적으로 비교한다.
<> </ >빈 태그를 사용해도 결과는 같다.
마치며
React의 탄생배경을 알아보면서 왜 사용해야 하는지 알아보고 React의 기초에 대해 알아보았다.
현재로서는 너무 어려운 라이브러리 같다... 하지만 더 알아보고 공부 해봐야겠다.
