React는 라이브러리 기반
라이브러리 vs 프레임워크
- 라이브러리는 개발 편의를 위한 도구의 모음
- 프레임워크는 기반 구조까지 잡혀있음
- 라이브러리는 공구, 프레임워크는 공장으로 생각
React는 생태계가 좋다.
-
생태계가 좋다? -> 구글링 하기 좋다
-
해당 기술에 대한 관심도 높다/ 실제 사용 빈도 많다/ 사용자 수 많다
-
관련 라이브러리(도구)가 많고,
문제를 해결할 방법을 찾기가 쉽고,
나와 같은 고민을 하는 / 했던 사람이 많다
실무에서 사용할 확률이 높다.
React 기술적 장점
- Virtual DOM
- JSX 표현법
- Flux라는 데이터 흐름 기준
- Functinal Programming을 최근에 많이 사용
DOM
- Elements는 사용자가 보는 화면이고 DOM은 컴퓨터(브라우저)가 이해하는 Elemenets의 원형이다.
- 메모리에 웹 페이지 문서 구조를 표현함으로써 스크립트 및 프로그래밍 언어와 페이지를 연결한다.
- 문서를 논리 트리로 표현
CDN
<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>위 코드의 설명은 이 화면에서 바로 React를 사용할 수 있도록 함.
DOM 다루기 / Element 생성하기 정리
- CodeSandBox -> 리액트 맛보기 동안 사용할 도구
- Vanilla js Dom -> W3Schools / createElement
- CDN -> unpkg
- React / React-dom -> element 생성 / appendChild
JSX
- ex)
const element = <h1>Hello, world!</h1>; - 문자도 HTML도 아닌 JavaScript의 확장 문법
- Babel 필요
Babel
- JavaScript Compiler
- 컴파일러: 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램
- https://babeljs.io
JSX와 Babel / JSX 다루기
- JSX -> React.createElement 표현식
- Babel -> JavaScript Compiler
- JSX 다루기 -> spread 연산자(...props)
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const text = "Hello, world!!";
const titleClassName = "title1";
const props = { className: titleClassName, children: text };
// const customH1 = <h1 {...props} />;
const customH1 = (
<h1 className={props.className} children={props.children} />
);
// const customH1 = <h1 className={titleClassName}>{text}</h1>;
const element = customH1;
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
멀티 Element 생성하기
- Fragment -> React.Fragment or <></>
- ex)
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
// const element = (
// <React.Fragment
// className="box"
// children={[
// React.createElement("h1", null, "H1"),
// React.createElement("h2", null, "H2"),
// React.createElement("h3", null, "H3")
// ]}
// />
// );
// const element = (
// <React.Fragment
// className="box"
// children={[<h1>H1</h1>, <h2>H2</h2>, <h3>H3</h3>]}
// />
// );
// const element = (
// <React.Fragment>
// <h1>H1</h1>
// <h2>H2</h2>
// <h3>H3</h3>
// </React.Fragment>
// );
const element = (
<>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
</>
);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
성장형 인간