https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn
** 제로초님의 리액트 강의를 보고 글을 작성합니다.
1) 리액트란 무엇인가? 왜 쓰는가?
React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
A JavaScript library for building user interfaces
ko.reactjs.org
리액트 한국어 버전 페이지
리액트를 왜 쓰는가?
- SPA를 만들기 위해서 (화면깜박임 없이 자연스럽게 넘어감, 모바일 화면으로 봤을때도 마찬가지, APP과 비슷한 느낌)
- 페이스북이 리액트를 만든거자체가 단일 웹사이트중 전세계에서 가장 규모가 큼 -> 데이터랑 화면이랑 일치시키는게 어려움 -> 리액트가 자동으로 해줄 수 있음.
결과적으로
1. 사용자 경험이 좋아진다.(웹에서 앱과같은 효과를 볼 수 있다)
2. 재사용 컴포넌트 : 중복되는 요소들을 하나로 묶어줄 수 있다. -> 유지보수가 편리하다.
3. 데이터-화면 일치
2) 첫 리액트 컴포넌트
**Webpack은 쪼개진 자바스크립트 파일을 html이 실행할 수 있는 자바스크립트로 합쳐준다.
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/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 {
constructor(props) { // react에서 기본적으로 사용하는것
super(props);
}
render() {
return e('button', null, 'Like'); // <button>Like</button> 이런 버튼을 만들겠다. 만든다가아님.
}
}
</script>
<script>
ReactDOM.render(e(LikeButton), document.querySelector('#root')); //화면에다가 위에서 만든 것을 실제로 반영하겠다. 렌더링 하겠다.
</script>
</body>
</html>
3) HTML 속성과 상태(state)
상태라는것은 바뀔 수 있는 부분이다. (=바뀔 여지가 있다.)
리액트 확장 프로그램 설치
React Developer Tools
Adds React debugging tools to the Chrome Developer Tools. Created from revision a39d9c3 on 8/26/2019.
chrome.google.com
상태를 확인할 수 있음. 유용한 크롬 확장 프로그램.
상태가 바뀌면 저절로 화면이 바뀐다. => 리액트의 강점
class LikeButton extends React.Component {
constructor(props) { // react에서 기본적으로 사용하는것
super(props);
this.state = {
liked: false,
};
}
render() {
return e('button', {onClick: () => {this.setState( {liked: true})}, type: 'submit'},
this.state.liked === true ? 'Liked' : 'Like');
// <button onclick="() => {console.log('clickec') } " type='submit'>Like</button> 같은 의미
}
}이렇게 바꿀 수 있다.
하지만, 너무 불편하다 그래서 개선할 수 있다.
4) JSX와 바벨(babel)
<html>
<head>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://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">
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) { // react에서 기본적으로 사용하는것
super(props);
this.state = {
liked: false,
};
}
render() {
return <button type="submit" onClick={() => {this.setState({liked: true})}}>
{this.state.liked === true ? '좋아요 누름' : '좋아요'}
</button>;
// JSX : javascript + XML
}
}
</script>
<script type="text/babel">
ReactDOM.render(<div><LikeButton /><LikeButton /><LikeButton /></div>, document.querySelector('#root')); //화면에다가 위에서 만든 것을 실제로 반영하겠다. 렌더링 하겠다.
</script>
</body>
</html>컴포넌트를 하나 만들어놓으면, 재사용하기가 쉽다!
babel을 사용하여서 JSX를 사용가능하게끔 만든다.
JSX는 javascript + XML 이다. html코드와 자바스크립트 코드를 섞어서 쓸 수 있음.
5) Q&A
***
대문자로 시작하는 것은 리액트 컴포넌트이다.
소문자로 시작하는 것은 HTML 태그이다.
***
***
react는 ES6 지원하고, JSX문법을 지원하기 위해 babel을 사용한다.
***
***
babel은 모든 브라우저에서 돌아가게끔 바꿔 준다. (ES6문법을 ES5 문법으로 바꿔준다.)
세부 사용자 설정을 하려고하면 웹팩이나 바벨 툴을 사용해야한다.
최신 객체, 최신 메소드를 사용하려고하면 babel polyfill을 사용해야한다.
***
'패스트캠퍼스 > 자습' 카테고리의 다른 글
| 리액트 예습 6~10강 (0) | 2019.09.05 |
|---|---|
| poiemaweb 4~5강 정리 (0) | 2019.09.05 |
| poiemaweb복습 1~3강 (0) | 2019.09.03 |
| React 공부하자 (1) (0) | 2019.08.21 |
| 패스트캠퍼스 Javascirpt 퀴즈 정리 4) (0) | 2019.08.14 |
