유튜브 강의
제로초 리액트 강의 1.1
2021bong
2021. 10. 30. 15:42
<html>
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <!--리액트를 사용할 수 있는 태그-->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div> <!--아이디 root 추가-->
<script>
const e = React.createElement; // e 엘리먼트 생성
class LikeButton extends React.Component {
constructor(props) { // 객체지향에서는 중요하나 리액트에서는 걍 쓰는거라고 생각하면 됨
super(props);
}
render () {
return e('button', null, 'Like'); // <button>Like</button> 이 태그를 만들겠.다.
}
}
</script>
<script>
ReactDOM.render(e(LikeButton), document.querySelector('#root'));
// ReactDOM(대소문자 주의)이 우리가 작성한 코드를 렌더링해서 브라우저에 반영해줌. 이 태그를 만든.다.
// 그래서 <div id="root"><button>Like</button></div>가 출력됨
</script>
</body>
</html><html>
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script>
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
}
render () {
return e('button', {onClick: () => {console.log('clicked')}, type: 'submit'}, 'Like');
// 두번째 인자로 html 속성 값을 넣어주면 됨 onClick 대문자주의
// <button onclick="() => {console.log('clicked')}" type="submit">Like</button>
}
}
</script>
<script>
ReactDOM.render(e(LikeButton), document.querySelector('#root'));
</script>
</body>
</html>
크롬 확장프로그램 설치 ! 리액트 개발자 도구
<html>
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script>
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { // 변할 수 있는 상태 = state
liked: false
}
}
render () {
return e(
'button',
{onClick: () => {this.setState({liked: true})}, type: 'submit'}, // state를 넣어줌
this.state.liked === true ? 'Liked':'Like' // state값에 따라 버튼의 컨텐트를 변경
// $('button').text('Liked') 코드 추가해주는 것과 같음
// 작은 프로젝트는 이게 더 나아보이지만 프로젝트가 커지면 이 방법이 훨씬 낫다고 알게 됨
);
}
</script>
<script>
ReactDOM.render(e(LikeButton), document.querySelector('#root'));
</script>
</body>
</html>
그렇지만 이렇게 쓰면 엘리먼트 생성해주고... 또 렌더함수에 구구절절 써주고... 너무 불편하기 때문에 태그 형식을 취하게 됨
<html>
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<div id="root"></div>
<script>
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {
liked: false
}
}
render() {
return <button type="submit" onClick={()=>{this.setState({liked:true})}}></button>
// e('button', { onClick: () => { this.setState({ liked: true })}, type: 'submit' }, this.state.liked === true ? 'Liked' : 'Like');
// 이렇게 쓰면 너무 불편해서 html과 비슷하게 쓰게 됨
}
}
</script>
<script>
ReactDOM.render(<LikeButton />, document.querySelector('#root'));
// 여기도 html 태그처럼
</script>
</body>
</html>
하지만 자바스크립트에서 html처럼 쓴다? 불가능 하기 때문에 이걸 가능하게 문법을 바꿔주는 babel을 사용
메소드나 객체는 다른걸 추가로 더 설치해야함
이걸 JSX라고 부름 Javascript + XML 그래서 닫는 태그를 꼭 해줘야함 <LikeButton />
<html>
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <!--script 추가-->
</head>
<body>
<div id="root"></div>
<script type="text/babel"> // type 추가
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {
liked: false
}
}
render() {
return <button type="submit" onClick={()=>{this.setState({liked:true})}}>
{this.state.liked === true ? 'Liked':'Like'} // 컨텐츠 부분 반영
// {this.state.liked ? 'Liked':'Like'} 자바스크립트 문법상 이렇게도 됨
</button>
}
}
</script>
<script type="text/babel"> // type 추가
ReactDOM.render(<LikeButton />, document.querySelector('#root'));
</script>
</body>
</html>728x90