1. INTRO
리액트를 다루기 위해선 ES6, JSX, 컴포넌트 정의하는 방법을 알아야합니다. 이번 포스팅에서는 리액트의 개념과 특징을 정리하고, JSX 에 대해 알아보려고 합니다.
2. 리액트 (React) 란 ?
The library for web and native user interfaces = 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리.
즉, SPA(Single Page Application)를 쉽고 빠르게 만들수 있도록 해 주는 도구
- 라이브러리
자주 사용되는 기능을 정해 모아 놓은 것
대표적인 자바스크립트 UI 라이브러리 : Angular, React, Vue.js
[프레임워크 vs 라이브러리]
프레임워크는 흐름의 제어 권한을 개발자가 아닌 프레임워크가 갖고 있는 반면,
라이브러리는 흐름에 대한 제어를 하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태이다.
- 장점
- 빠른 업데이트와 렌더링 속도
- 컴포넌트(구성요소. 독립적으로 동작할 수 있는 SW DOM) 기반 구조
- 재사용성
- 메타(페이스북) 지원
- 활발한 지식 공유와 커뮤니티
- 모바일 앱 개발 가능
- 단점
- 방대한 학습량
- 높은 상태(state) 관리 복잡도
3. 리액트 앱 개발
일반 웹 페이지에 react.js 파일을 추가해서 기능을 구현한다.
예시 파일을 작성하기 위해 디렉터리를 생성했다.
sample.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
**<!-- #1 HTML 파일에 DOM 컨테이너를 추가
~~~~~~~~~~~
Root DOM Node => Virtual DOM의 시작점
-->
<div id="root"></div>
<!-- #2 리액트 파일(react.js, react-dom.js)을 추가
https://ko.legacy.reactjs.org/docs/cdn-links.html
-->
<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>
<!-- #3 리액트 컴포넌트 코드를 추가 -->
<script src="MyButton.js"></script> **
</body>
</html>MyButton.js
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
// <button onClick="..."> ... </button>
// ~~~~~~ ~~~~~~~~~~~~~ ~~~
// | | +-- 세번째 매개변수
// | +-- 두번째 매개변수 ⇒ 속성을 객체 형식으로 전달
// +-- 첫번째 매개변수
return React.createElement(
"button",
{ onClick: () => setIsClicked(!isClicked) },
isClicked ? "Clicked" : "Click here"
);
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement(MyButton));4. JSX = JavaScript + XML = 자바스크립트 확장 문법
HTML ⇒ XML
~~~~~~~~~~~~~~~~~~~~~~~~~
const element = <h1> Hello, World ! </h1>;
~~~~~~~~~~~~~~~ ~
| |
+----------- JavaScript --------------+
const element = React.createElement('h1', {}, "Hello, World !");5. CRA(create-react-app), CNA(create-next-app)
리액트 기반 웹 어플리케이션 개발에 필요한 모든 설정 상태의 프로젝트를 만들어주는 도구.
기존에는 CRA로 개발해왔으나 최근엔 CNA 방식을 권장하고 있음.
CNA
패키지 설치 과정은 아래와 같다.
프로젝트 디렉터리로 이동해서 개발 서버를 실행한다.
앞에서 만든 버튼 앱을 JSX 구문으로 구현
C:\react\my-next-app\src\pages\MyButton.js
import { useState } from "react";
function MyButton(props) {
const [isClicked, setIsClicked] = useState(false);
/*
return React.createElement(
"button",
{ onClick: () => setIsClicked(!isClicked) },
isClicked ? "Clicked" : "Click here"
);
*/
return (
<button onClick={() => setIsClicked(!isClicked)}>
{isClicked ? "Clicked" : "Click here"}
</button>
);
}
export default MyButton;C:\react\my-next-app\src\pages\index.js
import MyButton from "./MyButton";
export default function Home() {
return (
<MyButton />
);
}CRA
패키지 설치 과정은 아래와 같다.
앞에서 만든 버튼 앱을 JSX 구문으로 구현
c:\react\my-cra-app\src\MyButton.js
import { useState } from "react";
function MyButton(props) {
const [isClicked, setIsClicked] = useState(false);
/*
return React.createElement(
"button",
{ onClick: () => setIsClicked(!isClicked) },
isClicked ? "Clicked" : "Click here"
);
*/
return (
<button onClick={() => setIsClicked(!isClicked)}>
{isClicked ? "Clicked" : "Click here"}
</button>
);
}
export default MyButton;c:\react\my-cra-app\src\App.js
import MyButton from "./MyButton";
function App() {
return (
<MyButton />
);
}
export default App;6. Vite
차세대 빌드 도구. JavaScript, TypeScript 기반 웹 애플리케이션을 더 빠르고 효율적으로 개발하기 위해 설계
- 프로젝트 생성
c:\react> npm create vite my-app
~~~~~~ 프로젝트 이름npx
create-vite my-app
√ Select a framework: » React ⇐ 화살표 키를 이용해서 이동 후 선택√ Select a variant: » JavaScript
Scaffolding project in c:\react\my-app...
Done. Now run:
cd my-app
npm install
npm run dev
- 의존 모듈 설치 및 개발 서버 실행
c:\react> cd my-app ⇐ 프로젝트 디렉터리로 이동
c:\react\my-app> npm install ⇐ 의존 모듈 설치
c:\react\my-app> npm run dev ⇐ 개발 서버 실행
my-app@0.0.0 dev
vite
VITE v6.0.7 ready in 246 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
- 웹 브라우저를 이용해서 실행 확인
7. XSS(Cross-Site Scripting, 크로스 사이트 스크립팅)
공격자가 전달한 스크립트 코드가 사용자 브라우저를 통해서 실행되는 공격 기법
희생자 브라우저에서 공격자가 전달한 스크립트 코드가 실행되면,
희생자 브라우저 또는 PC에 저장된 정보를 탈취 ⇒ Cookie
가짜 페이지를 만들어 사용자 입력을 유도해서 입력한 정보를 탈취
해당 PC의 제어권을 탈취해서 원격에서 제어 ⇒ BeeF와 공격 프레임워크를 활용해서 가능
방어기법
스크립트 코드가 실행되지 않도록 안전한 형태로 변경해서 저장하거나, 응답
CSP (컨텐츠 보안 정책) ⇒ https://developer.mozilla.org/ko/docs/Web/HTTP/CSP
8. JSX 사용법
create-react-app으로 생성한 my-cra-app 프로젝트의 App.js 파일(C:\react\my-cra-app\src\App.js)을 수정하면서 실습을 진행
- 1 반드시 부모 요소 하나로 감싸야한다.
>>> 방법 1. 다른 태그를 추가
문제점 : 불필요한 태그가 추가 됨.
>>> 방법 2. Fragment 컴포넌트를 이용
불필요한 태그 추가를 방지할 수 있다.
>>> 방법 3. Fragment의 축약 방식으로 사용
import도 하지 않는다. <> </> 로 표현됨. 가장 많이 쓰는 방식!
- 2 JSX 안에서는 자바스크립트 표현식을 { }로 감싸서 작성
function App() {
const name = "홍길동";
const age = 23;
return (
<>
<h1>{`안녕, ${name}`}</h1>
<h1>안녕, {name}</h1>
<h2>{age + 2}</h2>
</>
);
}
export default App;- 3 JSX 내부에서 자바스크립트의 if 문을 사용할 수 없으므로, 삼항 연산자를 사용
<h2>{name === "홍길동" ? "환영합니다." : "환영하지 않습니다."}</h2>- 4 조건을 만족할 때만 내용을 보여주는 경우 => 조건부 렌더링
>>> 방법 1. 삼항 연산자를 이용하는 방법 => 조건을 만족하지 않는 경우 null을 반환
<h2>{name === "홍길동" ? "환영" : null}</h2>>>> 방법 2. && 연산을 이용
단락연산자(short circuiting operator)를 활용한다. && 뒤의 구문은 조건을 만족했을 때 출력할 내용을 넣어주면 된다.
<h2>{name === "홍길동" && "환영이요"}</h2>- 5 인라인 스타일
태그 내에서 style 속성을 이용해서 스타일을 지정하는 방법
DOM 요소에 스타일을 지정할 때엔 객체 형태로 적용해야하며, 스타일 이름은 카멜 표현식을 사용, 숫자 타입의 경우 단위를 생략하면 기본값이 px 이다. (단위를 포함할 때엔 문자열로 표현)
<h1 style={{backgroundColor: "black", color : "yellow", fontSize:28, padding:'16px'}}>{`안녕, ${name}`}</h1>중괄호가 두번 쓰여지는데, 겉 괄호는 표현식을 의미, 안 괄호는 js 의 객체를 나타내는 것.
>>> 인라인 스타일을 별도의 변수로 선언해서 사용
function App() {
const myStyle = { backgroundColor: "black", color: "yellow", fontSize: 28, padding: '16px' };
return (
<>
<h1 style={myStyle}>{`안녕, ${name}`}</h1>
</>
);
}
export default App;
>>> 여러 스타일을 일괄적으로 선언하고 사용
변수 선언 후 key & value 값을 갖는 객체로 일괄 선언 가능
function App() {
const name = "홍길동";
const myStyle = {
h1Style: { backgroundColor: "black", color: "yellow", fontSize: 28, padding: '16px' },
h2Style: { color: "red" }
};
return (
<>
<h1 style={myStyle.h1Style}>{`안녕, ${name}`}</h1>
<h2 style={myStyle.h2Style}>{name === "홍길동" && "환영합니다."}</h2>
</>
);
}
export default App;- 6 함수가 undefined를 반환하지 않도록 기본값을 설정
function Name() {
let name;
return name || "아무개";
}
function App() {
return (
<>
안녕, <Name />!
</>
);
}
export default App;
위의 코드에서 name||"~"; 는 || 앞의 값이 null 일때 "~"로 결과를 리턴하는 삼항연산자이다.
- 7 CSS 클래스를 사용할 때 class가 아닌 className으로 설정
<div class="myclass"> ... </div> ⇒ <div className="myclass"> ... </div>>>> App.css 파일에 아래의 스타일을 추가
.react {
background-color: black;
color: yellow;
font-size: 40px;
padding: 10px;
}>>> App.js 파일에 App.css 스타일을 임포트한 후 클래스 속성을 추가
import "./App.css";
function App() {
return (
<div className="react">홍길동</div>
);
}
export default App;- 8 모든 태그는 반드시 닫는 태그를 사용
내용이 없는 태그의 경우엔 self-closing 태그를 사용
e.g.
...
- 9 주석 (comment)
컴포넌트 외부, 태그가 시작되기 전에는 자바스크립트 주석 과 같은 (//, /* */) 형태를 쓸 수 있다. 하지만 태그가 시작 되면 주석이 아닌 일반 문자열로 인식되어 출력된다.
이 경우엔 {/* */} 와 같이 중괄호 안에 자바스크립트 표현식으로 주석 처리하면 된다. //와 같은 인라인 주석을 사용할 때엔 유의해야한다. 닫는 괄호가 주석처리 되기때문에 표현식 끝에(다음 라인에) 닫는 괄호를 넣어주도록 한다. 이 주석은 많이 쓰지 않음!
import "./App.css";
// 자바스크립트 주석
/*
자바스크립트 주석
*/
function App() {
// 자바스크립트 주석
/*
자바스크립트 주석
*/
return (
// 태그가 시작되기 전에는 자바스크립트 주석 사용이 가능
/*
자바스크립트 주석
*/
<>
// 태그가 시작되면 주석이 아닌 일반 문자열로 인식
/*
일반 문자열로 해석되어 화면에서 출력
*/
{ /* 자바스크립트 표현식으로 주석을 처리 */}
{ //인라인 주석을 사용할 때는 유의해야 함(표현식 끝에 }을 사용하면 주석 처리돼 버림)
}
<input type="text" />
<input type="text"></input>
</>
);
}
// 자바스크립트 주석
/*
자바스크립트 주석
*/
export default App;OUTRO
JSX (자바스크립트 + XML) 즉 자바스크립트 확장 문법을 학습했는데, 생소하지만 구조가 있는 것 같아서 계속 보다보면 외워질 것 같습니다. 익숙해지는 그날까지...계속 화이팅!
