리액트 사용
가장 원시적인 형태의 리액트 사용부터 공부하기로 한다.
<!-- 개발자 모드 -->
<script crossorigin src="http://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="http://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 배포 모드 -->
<!--<script crossorigin src="http://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="http://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> -->실무에서는 개발용 모드가 아닌 배포용 모드로 사용할 것이지만, 실제로는 웹팩, 바이트, 바벨 등의 처리를 하기 때문에 script를 쓸 일은 없다.
사용 방식
리액트를 사용하는 방식은 두 가지 방식이 있다.
- 클래스 방식 - 거의 사용하지 않는다.
- function 사용 방식
실제로는 클래스 방식은 거의 사용하지 않는다. Error Boundary 정도에서만 사용한다.
<script>
'use strict';
class LikeButton extends React.Component{
} // 1% ErrorBoundary
const LikeButton = () =>{};
function LikeButton(){}
</script>- 리액트는 JS 기반으로 화면까지를 꾸민다고 생각하면 된다.
- 리액트는 데이터 중심으로 움직이다.
- 리액트는 데이터를 state에 담고 render를 통해 화면을 구성한다
// 클래스 방식의 사용
class LikeButton extends React.Component{
constructor(props){
super(props);
this.state = {liked:false};
}
render(){
if(this.state.liked){
return 'You Liked this.';
}
return React.createElement('button', {onClick: ()=>this.setState({liked:true})}, 'Like');
}
}리액트는 데이터가 바뀌면 자동으로 화면이 바뀌게 된다.
<body>
<div id="root"></div>
<script>
'use strict';
// 기본적인 기능을 하는 class
class LikeButton extends React.Component{
constructor(props){
super(props);
this.state = {liked:false};
// 데이터를 위한 부분
}
render(){
if(this.state.liked){
return 'You Liked this.';
// 화면 구성을 위한 부분
}
return React.createElement('button', {onClick: ()=>this.setState({liked:true})}, '뿡빵');
}
} // 1% ErrorBoundary
</script>
<script>
ReactDOM.render(React.createElement(LikeButton), document.querySelector("#root"));
// 화면 출력을 위한 ReactDOM의 사용
</script>
</body>위에서 reactDOM.render를 통해 LikeButton클래스를 사용해 root div 안에 화면이 뿌려진다.
LikeButton안에서 state.liked는 기본 false로 되어있다.
render() 함수를 보면 liked 가 true일 때, return으로 'You Liked this.를 나타내게 되어있다.
class 맨 밑의 return에서 클릭 시 state.liked가 true가 되는 button 요소가 생성된다.
공부와 일상