<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>-->
▼ JSX 사용하는 곳은 타입도 바꿔줘야한다.
<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.';
}
▼ JSX 안쓰면 이런식으로 길게 코드짜야한다. (원래 리액트에서 html 요소 생성하는 방법)
// return React.createElement('button', {onClick: () => this.setState({liked: true})}, 'Like')
return (
▼ 반드시 부모태그로 감싸줘야한다. 리턴에는 태그가 하나만 와야한다.
<div>
▼ html태그들은 소문자여야한다. 원래 html은 대문자도 가능하지만 JSX는 XML이기 때문에 엄격하게 써줘야한다.
<button onClick={() => this.setState({liked: true})}>Like</button>
<br />
▼ XML이므로 엄격하게 닫는 태그도 반드시 작성해야한다.
<input type="text" />
<br />
▼ 자바스크립트 코드는 중괄호로 반드시 감싸야한다.
<button onClick={() => this.setState({liked: true})} obj={{a: 'b', c: 'd'}}>{1+1}</button>
<br />
▼ JSX 안에서는 if문 못쓴다. 삼항연산자는 가능하다.
<button onClick={() => this.setState({liked: true})}>{this.state.liked ? 'Liked' : 'disLike'} </button>
<br />
▼ JSX 안에서는 for문 못쓴다. map으로 보통 해결한다.
{[1, 2, 3].map((i) => {
return <div>{i}</div>;
})}
</div>
);
}
}
</script>
<script type="text/babel">
▼ React 17버전 코드 (React18버전은 17버전 코드도 지원을함)
(하지만 .render를 사용하면 React17버전으로 인식을해서 React18버전기능이 돌아가지않음)
ReactDOM.render(<LikeButton />, document.querySelector('#root'));
▼ React 18버전 코드
ReactDOM.createRoot(document.querySelector('#root')).render(
▼ 우리가 만든 컴포넌트도 태그라고 보면 된다. 그래서 우리가 만든 컴포넌트도 여러번 쓰일 수 있다. 여기서도 div로 묶어준다.
<div>
▼ 우리가 만든 컴포넌트는 반드시 대문자로 시작해야한다.
<LikeButton/>
<LikeButton/>
<LikeButton/>
<LikeButton/>
</div>
);
</script>
</body>
</html>바벨 (React.createElement -> JSX )
자바스크립트 파일에 <button> 과 같이 태그를 쓰는 문법이 가능할까? 당연히 안된다.
자바스크립트에는 저런 태그 쓰는 문법이 존재하지 않는다.
그런데 어떻게 리액트에서는 저런식으로 코딩을 할 수 있을까? 바로 바벨이라는 라이브러리 때문이다.
바벨이라는 라이브러리가 JSX 코드를 보면 우리 몰래 React.createElement로 바꿔준다.
즉, 바벨을 설치해야 JSX를 사용할 수 있는것이다.
React17버전, React18버전
<script type="text/babel">
▼ React 17버전 코드 (React18버전은 17버전 코드도 지원을함)
(하지만 .render를 사용하면 React17버전으로 인식을해서 React18버전기능이 돌아가지않음)
ReactDOM.render(<LikeButton />, document.querySelector('#root'));
▼ React 18버전 코드
ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton/>);
</script>아직 회사에서 리액트 17버전도 많이 쓰인다. 그래서 회사에 들어가면 위 코드를 가장 먼저 확인해야한다.
JSX 주의할 점
- 우리가 리턴부분에 작성하는 html 태그 같은 태그들은 소문자로 시작하여야한다.
- Why? 우리가 html 태그 같이 작성하는것은 엄밀히 말하자면 html이 아니라 JSX 라는 자바스크립트 확장 문법이다. 그러므로 JSX 문법에 따라야한다.
- 원래 html에서는 대문자도 가능하지만 JSX는 XML이기 때문에 엄격하게 써줘야한다.
- JSX는 XML이므로 엄격하게 닫는 태그도 반드시 작성해야한다.
- 우리가 만든 컴포넌트는 반드시 대문자로 시작해야한다.
- 자바스크립트 코드는 반드시 중괄호로 감싸야한다.
- JSX 안에서는 if문 못쓴다. 삼항연산자는 가능하다. (사용할수는 있지만 별로임)
- JSX 안에서는 for문 못쓴다. map으로 많이 해결한다. (사용할수는 있지만 별로임)
- 반드시 부모태그로 감싸줘야한다. 리턴에는 태그가 하나만 와야한다.
- 우리가 만든 컴포넌트도 여러번 쓰일 수 있다.
'Front end > React' 카테고리의 다른 글
| 함수 컴포넌트 (0) | 2023.04.12 |
|---|---|
| 클래스 컴포넌트의 형태와 리액트 데브툴즈 (0) | 2023.04.08 |
| 첫 리액트 컴포넌트(아직은 Class) (0) | 2023.04.08 |
| 리액트 array, object state 변경하는 법 (0) | 2023.04.06 |
| 리액트 useState (2) (0) | 2023.04.06 |
