Angular
/ Vue
/ React
사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리
가상 돔(Virtual Dom)
: 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술
Document → HTML
Object
Model
리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)
CRA 는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다.
CRA 를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있다.
CRA install - npx create-react-app webucks-react
CRA 기본 폴더 및 파일 구성
node-modules
- package.json
- .gitignore
index.html
- index.js
- <Routes />
public
폴더
index.html
images
data
src
폴더
components
pages
styles
- reset.scss
, common.scss
Routes.js
재활용 가능한 UI 구성 단위
개별로 배포가능한 최소한의 단위
import React from 'react'
class Component extends React.Component {
constructor() {
super();
this.state = {
list: []
};
}
componentDidMount() {
fetch('주소')
.then(res => res.json())
.then(data => this.setState({ list: data }));
}
componentDidUpdate(prevProps, prevState, snapshot) {
if (prevState.list !== this.state.list) {
console.log("list가 변경되었습니다.")
}
}
render() {
return (
<div>
<h1>This is Class Component!</h1>
</div>
)
}
}
export default Component
constructor
→ render
→ componentDidMount
→ ( setState
) → render
<>
<div className="loginBtn" onClick={() => console.log("click")}>Login</div>
<br />
<div style={{backgroundColor: "grey", height: "10px"}} />
</>
import React, { useEffect, useState } from 'react'
function Component(props) {
const [ list, setList ] = useState([]);
useEffect(() => {
fetch('주소')
.then(res => res.json())
.then(data => setList(data));
}, []);
useEffect(() => {
console.log("list가 변경되었습니다.")
}, [ list ]);
return (
<div>
<h1>This is Class Component!</h1>
</div>
)
}
export default Component
useEffect
, useState
, (useMemo
, useCallback
, ...)