HTML문서에 React, jsx문법은 처음 써보는데 HTML에서 사용할 때는
useState앞에 React.를 붙여줘야 하는게 다른 것 같다.
왜 다른지는 더 공부해보는 걸로...
코드를 잘못 친건데 바벨 설정이 잘못된 줄 알고 뻘짓했다.
간단하게 바벨에 대해서 정리하고 마무리한다.
바벨은 크로스브라우징 혼란의 해결사(이름은 혼돈..?)
브라우저마다 사용하는 언어가 달라서 프론트엔드의 코드는 일관적이지 못할 때가 많다. 예를들면 IE는 Promise를 이해하지 못하고, 과거의 사파리가 Promise.prototype.finally 메서드를 사용할 수 없었던 것 등이 있겠다.
바벨은 ECMAScript2015+로 작성한 코드가 모든 브라우저에서 동작하도록 호환성을 지켜준다.
바벨은 3단계로 빌드를 진행한다.
- 파싱(Parsing) : 코드를 읽고 추상구문트리(AST)로 변환하는 단계
- 변환(Transforming) : 추상구문트리를 변경하는 단계(실제로 코드를 변경)
- 출력(Printing) : 변경된 결과물을 출력하는 단계
바벨은 코드를 받아서 코드를 반환한다.
중요한 것은 바벨은 파싱과 출력만 담당하고 변환작업은 플러그인이 한다는 거다.
플러그인은 일일이 설정할 수도 있지만 여러 플러그인을 모아놓은 세트를 가져올 수도 있다.
이것을 '프리셋'이라고 한다.
커스텀 플러그인이나 프리셋을 사용하는 방법은 바벨 공식문서에 자세히 설명되어 있다.
바벨 공식문서 확인하기
<!DOCTYPE html>
<html lang="ko">
<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>연습장</title>
</head>
<body>
<div id="root"></div>
<!-- body 태그 닫는 위치 주의 -->
</body>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
function App() {
// useState앞에 React.을 붙여줘야 함
const [toDo, setToDo] = React.useState('');
const [toDos, setToDos] = React.useState([]);
// onChange라는 변수에 이벤트의 타깃의 값을 toDo로 정함
const onChange = (e) => setToDo(e.target.value);
//
const onSubmit = (e) => {
e.preventDefault(); // submit 이벤트 후 새로고침 방지
// toDo가 아무것도 없으면 아무것도 반환하지 않음
if (toDo === '') return;
// setToDos에 화살표 함수로 배열 추가
setToDos((currentArray) => [toDo, ...currentArray]);
setToDo(''); // input창 비움
};
console.log(toDo);
console.log(toDos);
return (
<div>
<h1>My to do list ({toDos.length})</h1>
<form onSubmit={onSubmit}>
<input
value={toDo}
onChange={onChange}
type="text"
placeholder="Write you do list"
/>
<button>Add to list</button>
</form>
</div>
);
}
const root = document.getElementById('root');
ReactDOM.render(<App />, root);
</script>
</html>
프론트엔드 개발하는 사람