[nomadcoder]ReactJS로 영화 웹 서비스 만들기 #2 [2021 UPDATE] THE BASICS OF REACT
0
React JS 작성해보기
아래 코드를 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>React JS : element를 생성하고 event listnear를 더하는 것을 도와줌(interactive power 소유)
React-DOM : React element 가져다가 HTML로 바꿔줌
사용하는 방법 : body에 빈div를 생성한 후 script로 가져와서 ReactDOM.render로 연결
ReactDOM.render(span, span이 가야할 위치)
-> 그래서 보통 body에 id=“root” 만들어서 span을 root 안에 두라고 함
const span 그러나 createElement(“span”) 은 반드시 생성하고자 하는 HTML 태그와 똑같아야함
JSX : Javascript에 XML을 추가한 확장한 문법
babel : 자바스크립트 컴파일러.
브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다
JSX 문법
1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.
2. 자바스크립트 표현식
3. if문(for문) 대신 삼항 연산자(조건부 연산자) 사용
4. React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용 한다.
JSX 문법 참고 : https://goddaehee.tistory.com/296
바닐라JS는 HTML -> JS 순서
리액트는 JS -> HTML 순서
index.html
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<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>
<script src="https://unpkg.com/@babel/standalone@7.20.15/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
// 컴포넌트 생성 방법1
const h3 = React.createElement(
"h3",
{id:"title", onMouseEnter:()=> console.log("mouse enter")},
"Hello im span");
// 컴포넌트 생성 방법2(JSX), 함수 설정1
function Title() {
return(
<h3 id="title" onMouseEnter={()=> console.log("mouse enter")}>
Hello i'm a title
</h3>
);
}
// 컴포넌트 생성 방법1
const btn = React.createElement(
"button",
{onClick:() => console.log("im clicked"),
style: {backgroundColor:"tomato"}},
"Click me");
// 컴포넌트 생성 방법2(JSX), 함수 설정2
// 대부분 이 방법으로 작성
const Button = () => (
<button style = {{backgroundColor:"tomato"}} onClick={() => console.log("im clicked")}>
Click me
</button>);
const container = React.createElement("div", null, [Title,Button]);
// title, button 함수화 필수
// 생성한 컴포넌트는 첫글자 대문자, 소문자는 html요소로 인식
const Container = () => (
<div>
<Title />
<Button />
</div>);
// span을 root에 둔다
ReactDOM.render(<Container/>, root);
</script>
</html>
웹백엔드개발자를 꿈꾸는