이번 글은
웹 게임을 만들며 배우는 React (By ZeroCho)
공부하면서 정리한 글 입니다.
1. 시작하기
리엑트를 사용하기에 앞서
필요한 준비가 있습니다.
React: 리엑트 핵심 코드 및 문법 사용하기
ReactDOM: 사용한 리엑트를 웹에 보여주기 (렌더링)
위의 두 가지를 사용하기 위해
여기 링크로 접속 또는 아래의 CDN 링크를 복사
CDN 링크 – React
A JavaScript library for building user interfaces
ko.reactjs.org
<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>
위치는 아래와 같이 HTML 의 Head tag 안에 합니다.
<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>
그럼 이제 준비는 다 되었습니다.
2. 컴포넌트 만들기
컴포넌트를 만들기 위해
먼저 특정 tag를 가리키는 <div> 에 Id를 넣습니다.
<div id="root">
</div>
이 태그에 React 문법을 사용하기 위해
<script> 태그 안에 자바스크립트 문법으로 React를 사용합니다.
<script>
// HTML Tag 사용
const e = React.createElement;
// Component
class LikeButton extends React.Component {
constructor(props) {
super(props);
}
render(){
return e('button', null , 'Like'); //<button>Like</button>
}
}
</script>
가장 첫 번째 e 변수에 React.createElement 를 넣어
HTML 태그를 사용한다는 의미이며
LikeButton는 컴포넌트가 됩니다.
그래서 랜더링을 하면
버튼이 아무 속성없이 이름은 Like 로 표현 될 것이다
라고 알려주는 것입니다.
마지막으로 화면에 실제 구현하기 위해
ReactDOM 을 이용하여 렌더링을 합니다
<script>
//화면에 실제 구현 Rendering
ReactDOM.render(e(LikeButton), document.querySelector('#root'));
</script>따라서, 클래스 이름이 LikeButton은 컴포넌트가 되어
리엑트 돔으로 렌더링을 하여 화면에 구현해 줍니다.
3. 상태관리
state 라는 것을 사용하여
상태를 아래와 같이 관리합니다.
constructor(props) {
super(props);
this.state ={
status:false,
};
}
원래 상태는 false의 값을 가지고 있습니다.
하지만, 버튼이라는 클릭을 통하여
상태를 변경하도록 아래와 같이 변경해 봅니다.
return e('button',
{onClick: ()=> {{this.setState({status:true})}}, type:'submit'},
this.state.status === true ? 'Liked' : 'Like');
JS 에서 onClick 이벤트를 만들어
함수가 실행되도록 만듭니다.
삼항 연산자를 이용하여 조건문을 만들고
버튼을 누르지 않았을 때,
false 이므로 Like가 표실 될 것이고
버튼을 눌렀을 때, true 로 변경되어 Liked가 표시될 것입니다.
4. 바벨을 이용하여 JSX 사용
자바스크립트에서 HTML Tag 문법을 사용이 되도록
도와주는 도구가 있습니다.
Babel · The compiler for next generation JavaScript
The compiler for next generation JavaScript
babeljs.io
해당 도구를 사용하기 위해 <head> tag 안에 아래의 CDN 주소를 넣어줍니다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
그럼 HTML Tag 문법을 사용할 수 있습니다.
위에서 사용했던 HTML Tag 를 사용하기 위해
script 에 babel를 아래와 같이 불러옵니다.
<script type="text/babel">
그리고 변수에 담았던 e 는 사용하지 않게 됩니다.
이전에 사용했던 코드는 아래와 깉이 변경됩니다.
// 이전 코드
return e('button',
{onClick: ()=> {{this.setState({status:true})}}, type:'submit'},
this.state.status === true ? 'Liked' : 'Like');
// 현재 코드
return <button onClick={()=>this.setState({status: true})} type="submit">
{this.state.status === true ? 'Liked' : 'Like' }
</button>
특이점이 많지만
그 중에서 중요한 Tag 밖 { } 코드 안에서
자바스크립트 문법이 사용됨을 확인 합니다.
마지막 부분인 React.DOM 에서도 변경합니다.
<script type="text/babel">
ReactDOM.render (
<LikeButton />, document.querySelector('#root')
);
</script>
이 것을 JS 와 XML 이 합쳐서 사용된다는 의미로
JXS라고 불리기도 합니다.
장점
컴포넌트의 가장 중요한 장점인 재사용입니다.
똑같은 버튼을 원하는 갯수 만큼 만들 수 있고
또한, 해당 상태 값을 한 곳에서 변경하여
모든 곳에서 상태를 한번에 변경이 가능합니다.
'React' 카테고리의 다른 글
| [React] 내가 이해한 React-Dom 정리하기 (0) | 2021.12.28 |
|---|---|
| [React] React 에서 Font Awesome 을 사용하기 (0) | 2021.12.21 |
| [React] 함수형 컴포넌트와 클래스 컴포넌트 (0) | 2019.12.28 |
| [React] NPX 를 이용한 React 설치 (0) | 2019.12.18 |
| [Router] React Router 사용하기 (0) | 2019.09.07 |
