React 소개하기
React 소개
React는 Facebook에서 UI를 더 잘 만들기 위해서 개발한 JavaScript UI Library.
Library란? -> 개발에 필요한 것들을 사전에 미리 구현해놓은 도구. 재사용이 가능한 기능을 미리 구현해놓고 필요한 곳에서 호출하여 사용 가능하도록 만들어진 기능들의 집합. 따라서 Library는 Framework에 비해 배우기 쉽고, 사용하기 편하다!
Framework란? -> 어플리케이션 개발 시 필수적인 코드 기능들을 사용할 수 있도록 구조를 제공하는 도구!
그래서 왜 React를 사용?
Facebook에서 리액트를 개발하기 이전엔 PHP Framework, XHP를 사용했는데, 이는 클라이언트 측에서 요청이 되면 서버 측에서 전체 페이지를 렌더링 하는 구조이다.
반면에 리액트는 클라이언트 축에서 구현되도록 만든 라이브러리!
계속 복잡해지는 웹
HTML은 정보가 증가하면 증가할 수록 기하급수적으로 복잡해진다! 이를 제어하기 위해 JavaScript에도 DOM을 제어하기 위해 많은 API가 존재한다. 하지만 JavaScript에서 DOM을 제어하는 것만으론 복잡해진 웹을 구현하기엔 한계가 있다.
리액트에는 가상 DOM을 사용해서 DOM을 읽지 않고(!) 갱신할 수 있는 렌더링 시스템을 가지고 있다!!
고로 리액트에서 render() 함수는 정말 정말 중요하고 핵심이라고 할 수 있다.
- 리플로우 (reflow) - HTML이 새롭게 렌더링 되는 과정
- 리페인트 (repaint) - CSS를 통해 스타일 바뀌는 과정
JavaScript를 사용해서 리플로우가 실행이 되면 비효율적이고, 화면을 구성함에 있어서 성능도 떨어지게 된다.
반면 가상 DOM을 사용하면 동적으로 인터랙션을 구성할 때 효율적으로 리플로우가 실행이 된다!
그래서 리액트에서는 가상 DOM을 사용하기 때문에 실제 DOM과 비교해서 바뀐 부분만 적용하는 방식으로 작동하기 때문에 기존 JavaScript처럼 전체 HTML을 다시 변경하는 비효율적인 리플로우 실행이 되지 않는다!
컴포넌트
리액트에는 복잡한 태그들을 간단하게 정의하는 사용자 정의 태그를 만들 수 있다.
이렇게 사용자가 정의한 태그를 컴포넌트(Component)라고 부른다.
컴포넌트를 사용하면 HTML의 가동성을 높일 수 있고, 한 번 정의가 된 컴포넌트는 여러 곳에서 재사용히 가능하다!
컴포넌트를 수정하면 해당 컴포넌트를 사용한 모든 페이지에서 실시간으로 변경한 내용이 반영되기 때문에 유지보수를 편하고 효율적으로 수행할 수 있다
React JSX 시작하기
CDN 방식
리액트를 사용하기 위해선 원래 리액트를 설치해야 하지만, 간단히 테스트하기 위해 라이브러리를 불러오는 CDN 방식을 사용할 수 있다.
1
2
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
JavaScript 컴파일러 - JSX 구문을 HTML로 인식하도록 해주는 babel 패키지의 역할
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
이러한 CDN 방식을 사용하면 기초 학습에는 효율적이지만, 큰 프로젝트나 실제로 앱을 배포하기 위해서는 CDN 방식을 사용할 수 없다.
CDN 방식을 사용한 JSX
- 새로운 HTML 파일 생성 - VS Code에서 ! + Tab 단축기 사용하면 편함
1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="ko">
<head>
<title>title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body></body>
</html>
- CDN 추가
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="ko">
<head>
<title>title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<script></script>
</body>
</html>
- ReactDOM.createRoot() - React에서 랜더링 영역을 정의하는 함수
1
2
ReactDOM.createRoot(container[, options]);
// container : 렌더링하고자 하는 HTML 위치
- 사용 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="ko">
<head>
<title>title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://unpkg.com/react@18/umd/react.development.js"
crossorigin
></script>
<script
src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
crossorigin
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
// document.body.innerHTML="<h1>Hello React</h1>";
const root = ReactDOM.createRoot(document.body);
root.render(<h1>Hello React</h1>);
</script>
</body>
</html>
- React.createElement() - 태그 구성 요소를 생성하는 메서드
1
2
3
4
React.createElement(type, [props], [...children]);
// type: 태그 이름 문자열, React 컴포넌트
// [props]: React 컴포넌트에 넣어주는 데이터 객체
// [...children]: 자식으로 넣어주는 요소들
- 사용 예시
1
<div id="root"></div>
1
2
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(React.createElement("h1", null, "Hello React"));
- h1이 생성되어 아래와 같이 렌더링 된다
1
2
3
<div id="root">
<h1>Hello React</h1>
</div>