티스토리 뷰
React
- 페이스북에서 만든 2013년에 릴리즈된 프레임워크 혹은 라이브러리 (강좌마다 부르는 이름이 다름... )
- 페이스북이 단일 웹 사이트중에서 규모가 제일 크다
- 데이터와 화면이 synchronization 하는것이 중요한데 React가 효과적이다.
- React는 기본적으로 javascript , js 파일
- React에서는 es6 문법을 지원 , 실험적인 문법을 지원하기 위해더 바벨<script type = "text/babel> 사용
- Components로 구성(module과 비슷하게) 재사용성이 뛰어남
- Virtual DOM 사용
- React에서 못쓰는 javascript 속성 ? class와 for -> 대신 className과 htmlFor
- 클래스보다는 함수형으로 말하는 Hooks를 사용
- 현재 React.createClass -> Class -> Hooks
- React-> 웹 사이트? reactDOM/ 모바일앱? reactNative
React 가이드라인
- View 레이어는 가이드 라인이 존재
- 하지만 딱 정해진 가이드 라인이 없다는게 단점
(1) 라우팅 부분 - react-router / react-enroute
(2) 상태 관리 부분 - redux / MobX
(3) HTTP 요청 - jqeury / axios / fetch / superagent
cf) 라우팅(routing)이란? url의 요청에 맞게 연결해주는 것
React를 왜쓸까?
1. 자바스크립트기(사용자 인터페이스를 만들기 위한 JavaScript 라이브러리)
- React = Single Page Application ?
화면 깜빡이는것 없이 자연스럽게 넘어감, 모바일 화면으로 보았을 때도
2. 지금까지 jQuery로 web을 잘 만들어왔는데 React를 왜 쓰게 되었을까?
- (1) 사용자 경험이 좋아짐 (2) 재사용 컴포넌트 (3) 데이터 화면 일치(synchronization )
3. 선언형 - 사용자 인터페이스를 만들떄 쉽고 간결, 디자인뷰와 연결된 데이터 변경시, 컴포넌트들을 올바르게 랜더링해 화면구성해줌
4. 가상 DOM
- diffing 알고리즘을 통해 문서의 변화를 확인, Reconmfillation진행으루 부분 조작 가능
- DOM을 조작하는것이 아니라 In-memory의 가상 DOM을 조작, 효율적
5. 컴포넌트
- 컵포넌트들을 캡슐화해 빌드한 후 컴포넌트들을 UI로 조합하여 구성이 가능
6. 단방향 DataFlow - 데이터가 UI 로 흘러가는 구조, 데이터가 변했을때 UI가 업데이트
React특징
1. 장점
(1) Component를 사용해서 효율적 재사용가능, 유지보수 용이
(2) 생태계가 넓고, 다양한 라이브러리 사용가능
(3) React 자체가 라이브러리이기 때문에 다른 프레임워크나 라이브러리와 혼용가능
(4) Virtual DOM을 활용하여 빠른 렌더링 가능
(5) 단방향 데이터 바인딩을 통해 디버깅 용이, 다른 라이브러리에 비해 안정적
(5) 리액트 네이티브를 활용하여 앱 개발 가능
2. 단점
(1) 프레임워크 MVC와 비교하였을때 View만을 관리
(2) 진입장벽이 낮지는 앟음
(3) MVC 패턴과 비교할때 View 만을 관리
Real DOM vs Virtual DOM
- DOM (Document Object Model)이란? 객체를 통해 구조화된 문서를 표현하는 방법
- DOM은 트리형태로 되어 있기 때문에 특정 node를 수정하거나 제거할 수 있는데 이때 JQuery를 사용하여 동적인 효과를 줄 수 있음
- Virtual DOM?
DOM작업은 웹 페이지를 repaint하는데 시간이 많이 소요되기 때문에 Virtual DOM이 필요
Virtual DOM은 DOM의 상태를 메모리에 저장하고 변경 전과 변경후의 상태를 비교한 뒤 최소한의 내용만 반영
Babel
- 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서 최신 자바 스크립트 문법을 구형 브라우저에서도 돌수 있게 변환시켜주는 것
Webpack
- 많은 모듈들을 합하여서 간단하게 bundle 할 수 있는 것
React 맛보기 (1) 기초 - <script>파일을 사용하여 html문서에서 React만들기
- 원래 리액트 앱을 시작하기 위해서는 다음과 같은 프로세스를 따른다
- webpack이나 babel같은것을 직접 설정 (--> 후에 create-react-app command로 바로 시작 가능)
- 현재는 따로 설정을 안해도 create-react-app command로 webpack & babel 바로 사용 가능
기본적인 html코드
- javascript는 <script> </script> 내에서 작성하게 됨
<html>
<head>
</head>
<body>
<script>
</script>
</body>
</html>
<html>
<head>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div> <!-- 실제 결과 : <div id="root"><button> Like </button></div> -->
<script>
const e = React.createElement;
class LikeButton extends React.Component{ //Component 가 처음 실행될때 기본적으로 react에서 쓰는거
constructor(props){
super(props);
}
render(){
return e('button', null, 'Like'); // <button>Like</button> // 태그를 만들겠다
}
}
</script>
<script>
ReactDOM.render(e(LikeButton), document.querySelector('#root'));
</script>
</body>
</html>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
react -> react가 동작하는 핵심적인 코드
react-dom -> react 코드를 웹에다가 붙여주는 역할을 함
react시작하자마자 설치해야하는것 react와 react-dom을 설치해줘야 함
실제 배포할 때는 react.development -> react.production으로 바꾸어주어야함
<script>
const e = React.createElement;
class LikeButton extends React.Component{ //Component 가 처음 실행될때 기본적으로 react에서 쓰는거
constructor(props){
super(props);
}
render(){
return e('button', null, 'Like'); // <button>Like</button> // 태그를 만들겠다
}
}
</script>
state? 바뀔 여지가 있는 부분
React 특성상 상태가 바뀌면 화면이 저절로 바뀐다.
<script>
ReactDOM.render(e(LikeButton), document.querySelector('#root'));
</script
실제 코드 실행시
.
<script>
const e = React.createElement;
class LikeButton extends React.Component{ //Component 가 처음 실행될때 기본적으로 react에서 쓰는거
constructor(props){
super(props);
this.state = {
liked : false,
};
}
render(){
return e('button', {onClick : () => {this.setState({liked : true})}, type : 'submit'},
this.state.liked === true ? 'Liked' : 'Like',
);
}
}
</script> constructor - 데이터
render - 화면
<html>
<head>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src = "http://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="root"></div> <!-- 실제 결과 : <div id="root"><button> Like </button></div> -->
<script type = "text/babel">
class LikeButton extends React.Component{ //Component 가 처음 실행될때 기본적으로 react에서 쓰는거
constructor(props){
super(props);
this.state = {
liked : false,
};
}
render(){
return <button type = "submit" onClick = {() => {this.setState({liked : true})}}>
{this.state.liked === true? 'Liked' : 'Like'}
</button>;
//JSX(Javascrpt + XML)
}
}
</script>
<script type= "text/babel">
ReactDOM.render(<LikeButton />, document.querySelector('#root'));
</script>
</body>
</html>
대문자로 시작하는건 React Component
div 태그는 소문자로 시작
'Programming > React' 카테고리의 다른 글
| [React] 라우팅 부분 React-Router (0) | 2021.01.15 |
|---|---|
| [React] React 문법과 변수선언 , ESLint, Prettier (0) | 2021.01.14 |
| [React] 상태관리 Redux (0) | 2021.01.14 |
| [React] React 기본(2) - React 기본구조 (0) | 2021.01.14 |
| [React] 구구단 만들기 (0) | 2021.01.12 |