•
리액트를 왜 쓰는가
•
강의 수강 시 주의할 점
•
첫 리액트 컴포넌트(아직은 Class)
•
가독성을 위한 JSX(XML임!)
리액트를 왜 쓰는가
한국에서 대세가 되어버린 리액트,, 한 번 치우쳐지면 계속되는게 한국의 특징,, 혁신적인 기술이 나오지 않는 한 10년 정도는 지속될듯하다.
첫 웹 애플리케이션 : G-Mail
웹이 홈페이지 역할 뿐 아니라 애플리케이션 처럼 돌릴 수 있는! ex) 웹에서 엑셀, 파워포인트를 다룰 수 있는 것 등
⇒ 이에 따라서 프론트에서 데이터를 다루는 일이 많아지자 자바스크립트로는 역부족이 되었다.
⇒ 싱글 페이지 애플리케이션인 리액트,…의 등장
강의 수강 시 주의할 점
•
리액트 필요성 느끼기 : 리액트 사이트를 리액트 없이 만들어보고 필요성을 느껴보는게 좋다.
•
리액트가 필요한 이유
1.
데이터와 화면의 일치 문제
2.
간단한 웹페이지라도 싱글 페이지 애플리케이션을 사용해서 만드는게 대세
3.
깜빡임 없이 화면이 넘어감
•
하지만 단점도 존재
1.
검색엔진에서 리액트로 만든 웹페이지 노출이 어려움
2.
자바스크립트를 소홀히 하지 말 것. (프론트의 기본기가 JS임) 그리고 리액트를 하려면 자바스크립트를 알아야 함!
첫 리액트 컴포넌트(아직은 Class)
•
웹 사이트는 html, css, javascript 밖에 읽지 못함! 리액트도 결국 새로운 존재가 아닌 js 일 뿐임!
•
결과물은 html, css, javascript가 나와야 한다.
강의에서는 원시적인 형태에서부터 시작하겠다! 후에는 createReact앱을 사용하게 된다.
<html>
<head>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!--<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>-->
<script>
'use strict';
const e = React.createElement;
// 1. 클래스 방식, 2. 화살표 함수 방식
// 요즘 클래스 방식은 거!의! 쓰이지 않음. 대부분의 경우 화살표 함수 방식 사용
// 강의에서는 클래스를 가르쳐주겠음
// 밑 코드가 리액트의 가장 원시적인 형태
// 1. 리액트는 자바스크립트다.
// 2. 리액트는 데이터 중심으로 움직인다.
class LikeButton extends React.Component { // 컴포넌트 (데이터와 화면을 하나로 묶어놓은 덩어리)
constructor(props) {
super(props);
this.state = {liked: false}; // 데이터 (화면에서 바뀌는 부분들)
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
return e('button', {onClick: () => this.setState({liked: true})}, 'Like'); // 화면
// 데이터가 바뀌면 화면도 자동으로 바뀐다.
// 자바스크립트 사용할 때는 화면에 있는 데이터를 이벤트를 붙여서 불러왔음 (화면 먼저 생각, 후에 데이터 생각)
// 따라서 리액트를 쓸 땐 반대로 생각해야함 (데이터 먼저 생각, 후에 화면 생각)
}
}
</script>
<script>
// LikeButton 컴포넌트를 "id=root"인 div에 그린다.
ReactDOM.createRoot(document.querySelector('#root')).render(e(LikeButton));
</script>
</body>
</html>
JavaScript
복사
가독성을 위한 JSX(XML임!)
<html>
<head>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 바벨 라이브러리-->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!--<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>-->
<!--<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>-->
<script type="text/babel">
'use strict';
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {liked: false};
}
render() {
if (this.state.liked) {
return 'You liked this.';
}
// js로만 처리 하면 가독성이 안좋아지는 문제 발생
// return 에는 두 개의 태그 return 불가능
// 반드시 하나로 묶어줘서 return 해야함 div 혹은 fragment 사용
return (
// 밑 코드를 바벨이라는 라이브러리가 React.createElemet 로 바꿔줌
// 닫는 태그는 필수임! input도 닫아야함
// 조건문이나 반복문을 사용하고 싶은 경우 if, for 사용이 불가능 하기 때문에
// 삼항연산자와 map을 사용한다.
<button onClick={() => this.setState({liked: true})}>
{this.state.liked ? 'Liked' : 'Like!'}
{[1, 2, 3].map((i) => {
return <div>i</div>;
})}
</button>
);
}
}
</script>
<script type="text/babel">
ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>);
</script>
</body>
</html>
HTML
복사
