안녕하세요.
이번에는 React에 대하여 알아보겠습니다.
1. React JS
- 반응형 자바스크립트
- SPA을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트해야 하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 엄청나게 빠른 퍼포먼스를 내는 게 가능하다. 기본적으로 모듈형 개발이기 때문에 생산성 또한 상당히 높은 라이브러리인지라 순식간에 대세로 떠올랐다. 거기에 기본적으로 프레임워크가 아니라 라이브러리인지라 다른 프레임워크에 간편하게 붙여서 사용하는 것도 가능하며, React Hooks라는 강력한 메서드들을 지원하면서 사실상 웹 프런트엔드 개발의 표준으로 자리 잡았다.
2. Virtual DOM
- 서버와의 데이터 통신과는 별개로 DOM을 직접적으로 조작해야 하는 기존의 웹 화면 개발 방식과 달리, React는 DOM을 직접적으로 조작하지 않고 데이터가 변화할 때 변경사항이 적용된 Virtual DOM을 만든다. 그다음 실제 DOM과 Virtual DOM의 차이점을 비교하고, 변경된 부분을 실제 DOM에 적용한다.
3. 사용하기 - CDN 방식
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React - 01</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script defer src="./index.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.js
// React 따라하기
function HelloWorldButton () {
return React.createElement("button", { onClick: () => {} }, "Hello, REACT world!");
}
const e = React.createElement;
const domContainer = document.querySelector("#app");
const root = ReactDOM.createRoot(domContainer);
root.render(e(HelloWorldButton));- html에서 태그를 통해 만드는 button 태그를 js 파일에서 생성하는 방법입니다.
- 별로 중요하지는 않으니 대충 보시면 됩니다.
실행결과 - VS Code 라이브서버로 실행해야 합니다.
4. 연습하기 - CDN 방식
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React - 01</title>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script defer src="./index2.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
index2.js
// React 따라하기
function HelloWorldButton () {
const [ isClick, setClickState ] = React.useState("it isn't clicked");
console.log(isClick);
return React.createElement("button", { onClick: () => { setClickState("It's clicked") } }, isClick);
}
const e = React.createElement;
const domContainer = document.querySelector("#app");
const root = ReactDOM.createRoot(domContainer);
root.render(e(HelloWorldButton));
실행결과
처음 연습하기랑 똑같아 보이지만, 여기에는 이벤트 기능까지 추가를 해서 실행이 되는 것을 볼 수 있습니다.
5. JSX
- JavaScript XML
- React에서 사용한다.
- HTML 문서 구조를 JS에서도 사용이 가능하며, JS 내부에서도 HTML을 짜듯 코드 구성이 가능해진다.
- 단, Babel이라는 컴파일러가 필요하다.
6. Babel
- JS의 컴파일러
- ES6 출시 이후 브라우저에서 ES6 지원을 하지 않아서 ES6 문법과 ES5 문법의 충돌 때문에 사용하였으며, ES6 문법을 ES5 문법으로 변경해 주는 기능으로 사용하였다.
- 브라우저의 업데이트 이후에는 추가적인 언어들에 대한 컴파일러 역하을 하게 되었으며, 대표로 React가 있다.
7. React 사용 규칙 (중요)
- html 코드는 return의 ( ) 소괄호 안에 작성해 주면 됩니다.
- JS 코드를 사용하고 싶으면 { } 중괄호 안에 작성해 주면 됩니다
- 작성된 코드를 Babel이 컴파일러를 해주지만, 규칙이 몇 가지 필요합니다.
- HTML의 class ⇒ className로 작성합니다. ( JS의 class와 중복이 되기 때문이다. )
- HTML Style 설정 시 camelCase로 작성해야 합니다. ( ‘-’는 JS의 빼기와 중복이 되기 때문이다. )
- ex) 기존 : some-Name ⇒ 변경 : someName
일단 기본적인 부분에 대해서만 알아보고 다음에 이어서 진행하도록 하겠습니다.
감사합니다.
반응형
'React' 카테고리의 다른 글
| [React] ESLint Token Parase Error 해결하기 (0) | 2023.04.03 |
|---|---|
| [React] React Component에 대하여 알아보기 (0) | 2023.03.31 |
| [React] React build 사용하기 (0) | 2023.03.30 |
| [React] React에 onClick 이벤트에 대하여 알아보기 (0) | 2023.03.29 |
| [React] React에 대하여 알아보기 - 2 (0) | 2023.03.28 |