이번 장에서는 리액트를 통해 간단한 컴포넌트를 만들어 보았다.
리액트는 컴포넌트라는 객체를 통해 비슷한 형식을 매우 간단하게 불러와서 보여줄 수 있다. 게다가 변화가 있더라도 페이지의 새로고침없이 원하는 부분만 변화시키며 사용자의 경험을 더 좋게 만들 수 있다.
<head>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
먼저 헤드부분에 리액트와 리액트 돔을 불러왔다. 바벨은 후에 있을 JSX문법때문에 불러왔다. 참고로 개발환경에서는 .development.js를 사용하지만 배포후에는 production.js로 변경한다.
<div id="root"></div>
body에는 리액트돔으로 넣어줄 태그들이 들어갈 root div를 만들어 둔다.
<script type="text/babel">
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'}
</button>
);
// JSX ( JS + XML )
}
}
</script>
먼저 컴포넌트가 들어가는 스크립트를 만들었다.
아래에 html태그와 비슷한 구문이 있는데 이것은 javascript와 xml을 합친 JSX이다. 이것을 사용하기 위해서 바벨을 사용해야한다. 바벨은 최신문법이나 실험적인 문법들을 ES5형식으로 변환시켜 사용가능하도록 해준다. 어쨌든 이것을 사용하기위해서 스크립트에 타입으로 "text/babel"을 입력한다.
class를 선언하며 컴포넌트를 만든다. 컴포넌트는 React.Component를 상속받아서 제작한다.
state는 바뀔여지가 있는 부분을 선언해준다. 초깃값으로 liked를 false로 주었다.
render() 은 화면에 넣을 예정인 것을 입력한다. return문으로 JSX문법을 넣어준다. 내부에서 자바스크립트 문법을 쓸 때에는 {}중괄호안에 쓰면 된다. 그리고 onclick에서 C를 html과 다르게 대문자로 쓴다는 것에 유의하자. 이 외에도 onChange, onSubmit등도 마찬가지이다.
결과적으로 위는 onClick으로 함수를 실행하도록 한다. setState는 state를 변화시킬 때 사용한다. 클릭 시 liked에 true를 넣도록 하였다. 그래서 버튼태그에 true에 Liked를 출력하도록 하였다.
<script type="text/babel">
ReactDOM.render(<div>
<LikeButton />
<LikeButton />
<LikeButton />
<LikeButton />
<LikeButton />
</div>, document.querySelector('#root'));
</script>
마지막으로 실제 웹에 랜더링을 시키는 스크립트를 작성한다. 이 또한 타입으로 바벨을 사용할 수 있도록 한다. 위의 스크립트가 리액트컴포넌트였다면 여기서는 리액트돔으로 실제 랜더링을 진행한다.
임의의 태그 안에 만든 컴포넌트를 <만든 컴포넌트 /> 라고 넣어주기만 하면 된다. 두 번째 인자로 기존에 만든 root div태그를 주면 별도로 실행되는 컴포넌트들이 정상적으로 표시된다. 각각은 서로의 참견없이, 새로고침도 필요없이 별도로 동작한다. 게다가 수정이 필요하면 위에서 작성한 컴포넌트를 수정하기만 하면된다. 이것이 리액트의 큰 장점인 컴포넌트이다.
참고
이 글은 ZeroCho 님의 리액트 무료 강좌를 수강하며 개인적으로 정리하며 쓰는 글입니다.
인프런
웹 게임을 만들며 배우는 React - 인프런
웹게임을 통해 리액트를 배워봅니다. Class, Hooks를 모두 익히며, Context API와 React Router, 웹팩, 바벨까지 추가로 배웁니다. 초급 웹 개발 프레임워크 및 라이브러리 React 웹 개발 게임개발 온라인 강
www.inflearn.com
유튜브
리액트 무료 강좌(웹게임)
www.youtube.com
'Client > React.js' 카테고리의 다른 글
| <리액트 기초> 코드 개선하기 (0) | 2021.02.03 |
|---|---|
| <리액트 기초> 웹팩 데브서버와 핫 리로딩 (0) | 2021.02.01 |
| <리액트 기초> 리액트와 웹팩 (0) | 2021.01.30 |
| <리액트 기초> 리액트와 Hooks (0) | 2021.01.28 |
| <리액트 기초> 메서드와 함수형 setState (2) | 2021.01.26 |
