애플리케이션의 규모가 커지고 다양한 UI, UX를 구현하기 위해 DOM, jQuery로 개발하고 유지보수 하는 것이 어려워졌다.
생상성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하기 위해 Frontend Framework(=Library)가 등장했다.
사용자 인터페이스(UI)를 구축하기 위한 JS 라이브러리.
가상 돔을 통해 이전 UI 상태를 메모리에 유지하고, 빠르게 업데이트 한다.
(= Create-Reat-App) 리액트로 웹APP을 만들기 위한 환경을 제공한다.
npm create-react-app
create react app 설치npm start
로컬 서버 접속 http://localhost:3000
ctrl+c
npm 종료node_modules CRA를 구성하는 모든 패키지 소스 코드
package.json 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보가 기록되는 파일. 프로젝트마다 하나씩 존재한다.
-> "dependencies"
리액트를 사용하기 위한 모든 패키지 리스트와 버전을 확인할 수 있다.
-> 새로운 라이브러리 설치 시 npm install slider —-save
라고 명령해야 dependencies에 추가된다.
.gitignore push를 해도 githob에 올라가지 않는다.
public > index.html
<div id="root"></div>
src > index.js
ReacdtDOM.render( <App />, document.getElementById('root'))
src > App.js
현재 화면에 보여지고 있는 초기 Component.
JavaScript Syntax Extension
리액트에서 사용하는 자바스크립트 확장 문법.
-> 브라우저에서 동작하는 과정에서 일반 자바스크립트 형태의 코드로 변환된다.
<div />
= <div></div>
내부가 비었을 때<div style={{color : "red"}}>Hello React</div>
const right = (
<div>
<p>list1</p>
<p>list2</p>
</div>
);
재사용이 가능한 UI 단위.
component를 선언하는 두 가지 방식
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
<Welcome /> // Component 사용
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Class Component
1.extends React.Component
로 생성한다.
2. 반드시render()
함수를 정의하고 JSX를 반환한다.
ReactDOM.render(JSX, 요소를 렌더하고 싶은 부모요소)
ReactDOM.render(
<h1>Hello, world!</h1>, // JSX
document.getElementById('root') // 부모요소
);