1강. 리액트 소개
1. 리액트는 무엇인가?
자바스크립트 UI 라이브러리 - 화면을 만들기 위한 기능들을 모아놓은 것
- 라이브러리 : 자주 사용되는 기능들을 정리해 모아놓은 곳
- 사용자 인터페이스 (UI)
2. 리액트의 장단점
장점
- 빠른 업데이트, 렌더링 속도
- Virtual DOM 사용 -> 빠른 업데이트
- Componant-Based : 재사용성 증가 -> 개발 기간이 단축, 유지보수가 용이
- 리액트와 재사용성
- 활발한 지식공유
단점
- 방대한 학습량
- 높은 상태관리 복잡도(state)
2강. 리액트 시작하기
1. 직접 리액트 연동하기
1-1. HTML 만으로 간간한 웹사이트 만들기
<html>
<head>
<title>리액트 공부</title>
</head>
<body>
</body>
</html>
<html>
<head>
<title>리액트 공부</title>
</head>
<body>
<h1>Hello React!</h1>
</body>
</html>
1-2. CSS를 사용하여 웹사이트 스타일링하기
<index.html>
<html>
<head>
<title>리액트 공부</title>
<!-- index.html 과 style.css 파일이 동일한 디렉터리에 위치해야함 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello React!</h1>
</body>
</html><style.css>
h1 {
color : green;
font-style: italic;
}
1-3. 웹사이트에 React.js 추가하기
<index.html>
<html>
<head>
<title>리액트 공부</title>
<!-- index.html 과 style.css 파일이 동일한 디렉터리에 위치해야함 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello React!</h1>
<!-- DOM Container (Root DOM Node) -->
<div id="root"></div>
<!-- 리액트 가져오기 -->
<script src = "https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src = "https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 리액트 컴포넌트 가져오기 -->
<script src="MyButton.js"></script>
</body>
</html><MuButton.js>
function MyButton(props) {
const [isClicked, setIsClicked] =React.useState(false);
return React.createElement(
'button',
{ onClick: () => setIsClicked(true) },
isClicked ? 'Clicked' : 'Clicked here!'
)
}
// 리액트돔의 렌더함수를 사용하여 리액트컴포넌트를 돔컨테이너에 렌더링
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);- ReactDOM.render : 스크립트 태그를 사용하여 컴포넌트를 가져왔다하여도 컴포넌트가 화면에 보이는 것이 아니기 때문에 사용
클릭 후
2. create-react-app
create-react-app : 리액트로 웹APP 개발을 하는 데 필요한 모든 설정이 되어있는 상태, 프로젝트를 생성하는 도구
- Node.js v14.0.0 이상
- npm v6.14.0이상
VScode-terminal
npm create-react-app <project-name>
cd <directory\> : 경로변경
npm start : 애플리케이션 실행
개발감자
리액트까지.... ㅇㅅㅇㄷ