일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- SSAFY
- Javascript
- sqld
- 플로이드워셜
- SQL
- db
- 싸피
- js
- pwa적용하기
- Django
- unionfind
- 데코레이터
- 14658
- 리액트
- vitepwa
- 머신러닝종류
- 셀프넘버
- react
- 백준
- SSAFYcial
- QuerySetAPI
- Python
- TypeScript
- 싸피10기
- git
- queryset
- 알고리즘
- PWA
- 싸피셜
- VITE
- Today
- Total
Meme's IT
[React] 리액트란? 본문
# 리액트란?
웹과 네이티브 사용자 인터페이스를 위한 라이브러리
SPA를 쉽고 빠르게 만들 수 있게 도와주는 도구
# 리액트의 장점
1. 빠른 업데이트와 랜더링 속도
리액트도 Vue와 동일하게 Virtual DOM이라는 것을 사용
→ 최소한의 업데이트 부분을 통해 빠르게 랜더링 가능
2. 컴포넌트 기반 구조
컴포넌트란??
하나의 페이지에는 여러 구성요소가 있는데, 각각의 요소들을 컴포넌트라고 함
이런 컴포넌트 기반의 구조를 사용함으로써 재사용성을 챙길 수 있음!
3. 재사용성
각각의 컴포넌트로 나눠놨기 때문에 해당 컴포넌트를 다시 사용할 수 있음
재사용을 통해, (1) 시간을 줄일 수 있고 (2) 유지 보수가 용이해짐
4. 활발한 지식 공유 및 커뮤니티
상당히 많이 쓰이는 라이브러리로, 도움을 받기가 편함
5. 모바일 앱 개발 기능
리액트를 익힌 이후에, 리액트 네이티브라는 모바일 환경 UI 프레임워크를 통해 모바일 개발도 가능!
원래 모바일 앱은 안드로이드는 Kotlin, iOS는 swift이라는 프로그래밍 언어와 프레임워크를 배워야하지만,
리액트 네이티브를 사용해서 둘 다 출시 가능
# 리액트 단점?
단점으로는 학습량이 매우 많다는 것과
state(상태) 관리하는 것이 어렵다는 것이 있음
우선, 냅다 써보자
저번에 vue에서 했던 것처럼 html 파일 한개만 있어도 사용 가능함
우선 index.html파일을 하나 만들어주자
<!DOCTYPE html>
<html lang="en">
<head>
<title>memez의 블로그</title>
</head>
<body>
<h1>Memez의 블로그</h1>
<p>안녕하세요, 환영합니다!</p>
<!-- DOM 컨테이너 -->
<div id="root"></div>
<!-- 리액트 가져오기 -->
<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="MyButton.js"></script>
</body>
</html>
id가 root인 div를 하나 만들고,
리액트는 공식문서에서 가져오면 된다.
그리고 나서, MyButton.js 파일을 같은 위치에 만들어준다.
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{ onClick: () => setIsClicked(true) },
isClicked ? 'Clicked!' : 'Click here!'
)
}
const domContainer = document.querySelector('#root');
const root = ReactDOM.createRoot(domContainer);
root.render(React.createElement(MyButton));
이후, html 파일을 열어보면
버튼에 따라서 내용이 바뀌는 것을 확인할 수 있음
근데, 이렇게 매번 추가해주기엔 귀찮으니까 한번에 사용할 수 있는 create-react-app이 있음
은 다음 글에서 해보자
'FrontEnd > React' 카테고리의 다른 글
[React] Vite에 Tailwind CSS와 Next UI 세팅하기 (0) | 2024.03.12 |
---|---|
[React] 파일 업로드 버튼 만들기(+ typescript) (0) | 2024.03.12 |
[React] JWT 인증키 저장하기 (0) | 2024.02.04 |
[React] Vite로 React 프로젝트 만들기 (0) | 2024.01.18 |
[React] Vue와 React의 차이점 (0) | 2024.01.15 |