목차
2. React를 사용하는 이유
3. export default
React란?
React는 UI를 만드는 Javascript 라이브러리이다. 페이스북이 자사의 서비스 UI를 효율적으로 만들기 위해 탄생한 라이브러리이다.
React를 사용하는 이유
1) 컴포넌트(Component) 기반의 UI 라이브러리 → 재사용성, 유지보수 good
* 컴포넌트: 별도의 HTML요소들을 묶어서 모듈처럼 만들고 내보내서 다른 파일에서 쓸 수 있게 만드는 것
웹사이트의 코드를 수정해야하거나 제거해야하는 상황이 발생하면, 중복 코드들이 포함돼있는 모든 페이지들을 하나하나 일일이 수정해야하는 문제가 생긴다. 즉, 유지보수 상황에서 문제가 생기는 것이다.
하지만 리액트를 사용하면, 페이지별로 공통되는 요소들을 컴포넌트 단위로 묶어서 관리할 수 있기 때문에, 수정 및 유지보수가 훨씬 쉬워진다.
예컨대 여러 다른 페이지들에서 공통적으로 사용될 것으로 예상되는 것들(헤더나 푸터 등)을 컴포넌트(별도의 파일이나 모듈)로 각각 만들어놓으면, 여러 페이지에서 재사용할 수 있고, 만일 수정할 사항이 생기면 해당 컴포넌트에 하나만 수정하면 되는 것이다. 이는 페이지를 추가적으로 만들어야할때 타이핑해야 하는 코드의 양이 확실히 줄어드는 장점 또한 있을 것이다.
2) 선언형 프로그래밍 → 직관적, 코드 양↓
명령형 프로그래밍 즉, 절차 하나하나를 다 나열해야하는 방식(ex. jQuery)과 달리 리액트는 선언형 프로그래밍 방식으로 목적을 바로 말한다. 따라서 결론부터 말하기 때문에, 보다 직관적이며 코드 양을 훨씬 줄일 수 있다는 점에서 효율적이다.
명령형 프로그래밍 예시
<!Document html>
<html>
<head>
<title>Counter</title>
<meta charset="UTF-8" />
<script>
function plus() {
const result = document.getElementById("result");
const current = parseInt(result.innerText, 10);
result.innerHTML = current + 1;
}
function minus() {
const result = document.getElementById("result");
const current = parseInt(result.innerText, 10);
result.innerHTML = current - 1;
}
</script>
</head>
<body>
<p>Simple Counter</p>
<h1 id="result">0</h2>
<div>
<button onclick="minus()">Minus</button>
<button onclick="plus()">Plus</button>
</div>
<script src="src/index.js"></script>
</body>
</html>
1. 결과를 표시할 요소를 가져온다 (id=result)
2. 현재 결과값을 10진수 기준, 숫자형으로 변환해서 가져와 current라는 상수에 저장한다
3. current 상수에 저장된 값을 결과를 표시할 요소의 값에 plus라면 +1해서 넣고, minus 라면 -1해서 넣는다.
위의 과정을 선언형 프로그래밍을 사용하면 아래와 같이 됨.
1. plus를 누르면, result값에 +1을 한다. minus를 눌렀다면 반대로 한다.
3) Virtual DOM → 빠른 속도와 성능
Virtual DOM 은 가상의 돔을 뜻한다.
이는 브라우저에 실제로 보여지는 DOM 이 아니라 그냥 메모리에 가상으로 존재하는 DOM이다.
자바스트립트가 요소를 만들어내는 과정에서 발생하는 변화를 실시간으로 실제 돔을 업데이트 하는 것이 아니라, 가상의 돔에서 미리 업데이트를 시켜본 다음에 한번에 업데이트 할 수 있는 부분을 모아서 한번에 실제돔에 업데이트 한다.
즉, 중간중간 렌더링 과정을 안거치기 때문에 과다연산을 해결할수 있다. 쉽게 말하면 여러번 업데이트 해야할 것을 한번에 통째로 업데이트한다. 그렇기 떄문에 작동 성능이 실제로 브라우저에서 DOM 을 보여주는 것 보다 속도가 훨씬 빠르다.
또한 리액트 개발팀이 만든 매우 효율적인 비교 알고리즘을 통하여 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시켜주기 때문에, "업데이트를 어떻게 할 지" 에 대한 고민을 하지 않으면서, 빠른 성능도 지켜낼 수 있게 된다.
export default
CommonJS 모듈 시스템에서는 module.exports으로 내보냈지만 리액트에는 export default를 사용한다.
즉, 새로운 리액트에서 주로 사용하는 것은 CommonJS 모듈시스템이 아니라 ES모듈시스템이다.
예컨대 APP이라는 함수를 내보내면, 이 함수를 다른 파일에서 "import 이름 from 파일의 경로" 이런식으로 사용이 가능하다. (참고로 이름은 바꿔도 되며, 한개만 내보낼 수 있다.)
export default 예시
App.js
function APP() {
return (
<div className="App">
<header className="App-header">
<h2>안녕 리액트</h2>
</header>
</div>
);
}
export default APP;
index.js
import App from "./APP"; // 여기서 import 해온다
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>
document.getElementById("root")
);
참고 자료
인프런 - 한입 크기로 잘라 먹는 리액트
https://react.vlpt.us/basic/01-concept.html
'Libraries > React' 카테고리의 다른 글
| [React] Warning: Invalid DOM property `for`. Did you mean `htmlFor`? 오류 해결 (0) | 2023.08.03 |
|---|---|
| [React] State 뜻, 카운터 함수, 예시 (0) | 2023.07.27 |
| [React] JSX 뜻, 문법 (0) | 2023.07.27 |
| [React] eslint error missing in props validation 오류 해결방법 (0) | 2023.07.26 |
| [React] 리액트 구글 폰트 적용하기 (다운로드 없이 하는법) (0) | 2023.07.26 |
