반응형
React
자바스크립트 UI 라이브러리
React는 Vue와 달리 프레임워크가 아닌 라이브러리이다. 프레임워크와 라이브러리의 차이점은 흐름 제어의 권한에 있다. 프레임워크는 제어의 권한이 프레임워크 자신에게 있는데에 반해, 라이브러리는 제어권한이 개발자에게 있다.
- 리액트의 장점
1. 빠른 업데이트와 렌더링 속도(화면에 나타나는 내용이 바뀌는 것) -> virtual dom을 사용한다.
2. 컴포넌트 기반 구조(레고 블록을 조립하듯 컴포넌트들을 모아서 개발한다. 이로 인해 재사용성이 높아지고 개발기간이 단축된다.)
3. 유지보수 용이(해당 모듈만 수정하면 된다.)
4. 활발한 지식공유 & 커뮤니티 - 리액트의 단점
1. 방대한 학습량
2. 복잡한 상태관리(props, state...)
간단한 리액트 적용 실습
1. 기존에 있던 웹사이트에 적용
<html>
<head>
<title>왕돼지티라노의 기록</title>
<link rel=“stylesheet” href=“style.css”>
</head>
<body>
<h1>환영합니다!</h1>
<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>//myButton.js
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
‘button’,
{ onClick: () => serIsClicked(true) },
isClicked ? ‘Clicked!’ : ‘Clicked here!’
)
}
const domContainer = document.querySelector(‘#root’);
ReactDOM.render(React.createElement(MyButton), domContainer);
2. 새로운 프로젝트에 리액트 적용
create-react-app → 모든 설정이 되어있는 상태로 프로젝트 생성(cra)
[실행 조건]
- Node.js v14.0.0 이상
- npm v6.14.0 이상
- VSCode
- 새로운 리액트 앱 생성
$ npx create-react-app <your-project-name>
- 리액트 앱 시작
$ npm start반응형
'React' 카테고리의 다른 글
| React - Component 와 props (0) | 2024.04.28 |
|---|---|
| 리액트의 Element (0) | 2024.04.28 |
| JSX 란? (0) | 2024.04.28 |