Framework & Library/React
리액트 시작하기
RUCKUS
2021. 6. 3. 00:31
*본 포스팅은 https://ko.reactjs.org/ 을 참고하여 작성하였다.
*또 IDE는 VS CODE로 연습하였다.
1. 리액트가 뭘까?
사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 라고 한다.
2. 리액트가 뭐가 좋은가?
- 선언형 : 코드를 예측 가능하고 디버깅하기 쉽게 해준다.
- 컴포넌트 기반 : 캡슐화된 컴포넌트, 다양한 형식의 데이터를 앱 안에서 쉽게 전달
- 어디서나 사용하기 : Node서버에 렌더링도 가능하고 React Native로 앱도 제작가능
- 컴포넌트의 가독성이 좋아 재사용성, 유지보수성이 높음
- 라이브러리 이기 때문에 다른 프레임워크와 호환이 좋음
- JS 객체의 Virtual DOM을 사용하여 앱 성능을 향상시킴
3. 리액트 시작하는 방법
- CDN 링크
하나는 리액트를 사용하게 하는 js, 하나는 화면에 뿌려주는 보여주는 렌더링하는 js? 라고 생각하면 된다
4. ROOT
리액트는 모두 루트로 부터 시작된다고 한다. 아직까지는 완전 개념이 잘 잡히지 않는다. 하튼 여기부터 출발한다.
5. 라이크 버튼 만들어보기
리액트 시작할때 말하는 라이크 버튼을 만들어 보도록 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
</head>
<body>
<div id="root"></div>
<script>
const e = React.createElement; // e 라는 엘리먼트를 생성.
class LikeButton extends React.Component { // likeButton이라는 클래스
constructor(props) { // 생성자
super(props);
this.state = {
liked : false,
};
}
render() { // 화면에 보여주는 부분
return e('button', {onClick : () => {console.log('클릭'),
this.setState(this.state.liked ? {liked : false} : {liked : true})
}, type : 'submit'}, this.state.liked ? 'Liked' : 'Like');
// return 변수명('태그명','속성값','벨류')
// <button>Like</button>
}
}
</script>
<script>
// ReactDoM에 렌더링 시키는데 e라는 엘리먼트를 렌더링한다. / LikeButton 클래스를 id가 root인 곳에
ReactDOM.render(e(LikeButton), document.querySelector('#root'));
</script>
</body>
</html>일단 따라 쳤는데 뭔말인지는 100% 이해하기가 힘들다. 정리하자면
1개의 스크립트 태그에서는 엘리먼트를 생성하고 해당 엘리먼트에 어떤 태그, 속성, 값 등을 넣을지를 코딩하고,
아래의 스크립트에는 만들어진 엘리먼트를 어디에 그려 줄지를 작성하는 코드이다.
간단한것 같으면서도 복잡해보인다 ㅠ
근데 저 부분을 조금 더 편리하게 코딩하기 위하여 바벨이라는 것을 추가해 html처럼 코딩해보려고 한다.
6. 바벨 추가
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
// 바벨 추가 CDN
<script type="text/babel"> // 이런식으로 엘리먼트를 생성하는 스크립트에 바벨이라고 명시해줘야한다.
6. React Developer Tools
랜더링이 되는 현상을 개발자도구를 통해 직접적으로 보면서 디버깅이 가능하다.
정리하자만 위의 코드는 엘리먼트 하나를 가볍게 생성해보는 것이었고, DOM에서 렌더링 해줄때 해당 class이름만 바벨을 통해 태그로 추가를 해주면 계속 재사용이 가능하다.
리액트...좋은 것 같은데?..