[React] element 만들기, JSX
리액트는 요새 많이들 쓰는 프레임워크 중 하나이다.
페이스북이 사용자 UI 구축을 위해 만든 라이브러리이며, interactive한 웹사이트를 만들게 도와준다.
- 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줌
- 어플리케이션의 각 상태에 대한 간단한 뷰만 설계
- 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링함
- 선언형 뷰 : 코드를 예측 가능하고 디버그하기 쉽게 만들어줌
기술 스택의 나머지 부분에는 관여하지 않기 때문에, 기존 코드를 다시 작성하지 않고도 리액트의 기능을 이용해 개발 할 수 있다는 것 또한 장점인 것 같다.
리액트 시작하기
html 파일에 리액트를 설치하기 위한 코드를 넣어줘야 한다.
첫번째 줄은 리액트로, 어플리케이션이 interactive하도록 만들어주는 라이브러리이다.
두번째 줄은 react-dom으로, 모든 react element들을 html 페이지에 넣을 수 있게 해준다.
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>리액트 Element 만들기
React js의 규칙 중 하나는, HTML을 html 페이지에 직접 작성하지 않고 js 코드를 이용해 작성한다는 것이다.
리액트를 배우기 전에는 HTML을 먼저 작성하고 JS와 연결해서 개발을 하고는 했는데, 리액트를 사용할 때는 자바스크립트를 통해 HTML을 만든다. 즉, 리액트를 통해 HTML을 업데이트 할 수 있다. 이를 통해, 유저에게 보여질 내용을 컨트롤 할 수 있게 된다.
리액트를 사용하지 않고 버튼을 만들면 다음과 같다.
<body>
<span>Total clicks : 0</span>
<button id="btn">Click me</button>
</body>
<script>
let counter = 0;
const button = document.getElementById('btn');
const span = document.querySelector('span');
function handleClick(){
counter = counter + 1;
span.innerText = `Total clicks : ${counter}`;
}
button.addEventListener('click', handleClick);
</script>리액트를 사용해서 위 코드와 동일한 기능을 가진 버튼은 다음과 같이 만들 수 있다.
<body>
<div id='root'></div>
</body>
<script>
const root = document.getElementById("root");
const btn = React.createElement(
'button',
{onClick: ()=>console.log('i am clicked')},
'click me'
);
ReactDOM.render(container, root); //(넣을 요소, 넣을 장소)
</script>하지만 여전히 코드가 길다.
JSX
위에서 사용한 createElement 를 대체할 수 있는, 자바스크립트를 확장한 문법이다.
HTML과 매우 흡사한 문법으로 리액트 요소를 만들 수 있게 해주는데, 생긴 게 HTML과 비슷해서 개발자 입장에서 사용하기 편리하다고 한다. (문법이 조금씩 그래도 다르니까 찾아보면서 사용하면 될 것 같다.)
브라우저는 JSX를 invalid하게 인식하기 때문에 babel을 사용해야 한다. 아래 코드를 script에 추가하면 된다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>JSX를 이용해서 직접 만든 요소는 무조건 '대문자'로 시작하는 것이 규칙이다. (HTML 태그와 구분짓기 위해)
<script type="text/babel">
const Button = () => <button style={{ color: "blue" }}>click me</button>;
const Container = (
<div>
<Button />
</div>
);
ReactDOM.render(Container, root);
</script>