리액트 주요 개념들을 정리하고자
리액트 공식문서를 참고하여 포스팅을 시작합니다.
처음으로 돌아가 다시 리액트 뿌수기!
공식문서에도 링크가 걸려 있지만 리액트 시작 튜토리얼은
https://www.taniarascia.com/getting-started-with-react/
Tania Rascia 이 분이 작성해놓은 글이 좋은 것 같다.
what is React ?
React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리다. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점이다. 리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.
Static HTML File
리액트를 시작하는 첫 번째 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react@^16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.13.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// 이곳에 리액트 코드들이 입력된다. (1)
</script>
</body>
</html>script 를 통해
(1) 에 클래스 추가하기
class App extends React.Component {
render() {
return <h1>Hello world!</h1>
}
}
ReactDOM.render(<App />, document.getElementById('root'))React DOM render()메서드 를 사용하여 App클래스를 rootHTML 의 div에 렌더링합니다.
Create React App
사실 위의 첫번째 방법은 효율적이지 않습니다.
npx create-react-app 파일명원하는 위치에 CRA 설치!... 끝!
Hi