리액트를 사용해보자.
ReactJS, React-dom 호출
<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>
- ReactJS : 애플리케이션을 interactive하게 만들어주는 라이브러리
- ReactDOM : 라이브러리, 혹은 패키지이며 모든 react element를 HTML body에 둘 수 있도록 해줌
리액트를 본격적으로 시작하기전에 정석 문법을 다뤄보았다.
리액트에 익숙한 개발자들은 이 방법으로 구현하지 않는다고 하지만 앞으로 개발하기에 앞서 리액트의 동작 원리를 이해하는데 도움이 되는 듯 하다.
React Element 생성하기
<!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>
const root = document.getElementById("root")
const h3 = React.createElement(
"h3",
{
onMouseEnter: () => console.log('mouse enter')
},
"hello im a span"
)
const button = React.createElement(
"button",
{
id: "sexy-btn",
onClick: () => console.log("im clicked"),
style: {
color: "tomato"
}
},
"Click me"
)
const contatiner = React.createElement("div", null, [h3, button])
</script>
</html>Javascript를 이용해 element를 생성하고 ReactJS가 HTML로 번역하는 동작방식
React.createElement(component, props, ...children)
const h3 = React.createElement("h3", {id: "h3-test"}, "im a H3")
ReactDOM.render(h3, root)첫번째 argument는 생성하고자 하는 HTML 태그와 동일한 이름이어야한다.
두번째는 h3의 property가 될 수 있다. -> class name 혹은 id
뿐만 아니라 onClick과 같은 eventListener를 만들 수 있다.
세번째로는 h3의 content가 들어간다.
ReactDOM.render ~ : 요소를 어디에 둘 것인지 알려줘야한다.
JSX?
JSX는 자바스크립트에 XML을 추가 확장한 문법이다.
리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니지만 위처럼 element를 생성하는 것이 번거로워 JSX문법이 만들어졌고, 문법이 훨씬 간소화되었다.
JSX를 브라우저에서 실행하기위해선 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환해주어야한다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
...
</script>
JSX 문법 사용하기
<script type="text/babel">
const root = document.getElementById("root")
function Title() {
return (
<h3 id="title" onMouseEnter={() => console.log('mouse enter')}>
Hello im a title
</h3>
)
}
const Button = () => (
<button
id="sexy-btn"
style={{
color: "tomato"
}}
onClick={() => console.log("im clicked")}>Click me
</button>
)
const Container = <div>
<Title />
<Button />
</div>
//컴포넌트의 첫글자는 무조건 대문자여야한다.
//소문자일경우 react와 jsx는 html button태그라고 받아들이기 때문임!!
ReactDOM.render(Container, root)
//Container를 함수로 바꾸면 아래처럼 렌더코드도 변경할 수있음
//ReactDOM.render(<Container />, root)
</script>JSX 문법
1. 반드시 부모 요소가 감싸는 형태여야 한다.
<div>
<h3></h3>
</div>2. 자바스크립트 표현식
JSX 안에서도 자바스크립트를 사용할 수 있다. 이를 위해선 코드를 {}로 감싸 사용한다.
{() => console.log("im clicked")}3. if문(for문) 대신 조건부 연산자(삼항 연산자) 사용
if문과 for문의 경우 자바스크립트 표현식이 아니기 때문에 JSX 내부에서 사용할 수 없다.
따라서 JSX 주변 코드에서 사용하거나, {}안에서 조건부 연산자(삼항 연산자)를 사용한다.
-외부에서 사용
function Test() {
let desc = ''
let logined = 'Y'
if(logined === 'Y') {
desc = <div>회원입니다.</div>
}
else {
desc = <div>비회원입니다.</div>
}
return (
<div>
{desc}
</div>
)
}
-내부에서 사용
function Test() {
let logined = 'Y'
return (
<div>
<div>
{logined === 'Y' ? (
<div>회원입니다.</div>
) : (
<div>비회원입니다.</div>
)
</div>
</div>
)
}이밖에 AND연산자(&&) 사용, 즉시실행함수 사용이 있다.
4. ReactDOM은 HTML Attribute 이름 대신 camelCase로 작성해야한다.
- JSX에서 자바스크립트 문법을 사용하려면 {}를 써야 하기 때문에 스타일 적용시에도 객체 형태로 넣어주어야 한다.
- JSX 스타일링시 카멜 표기법으로 작성한다. (font-size -> fontSize)
- JSX에서는 class가 아닌 className을 사용한다.
const CssStyle = () = (
<div
className="className"
style={{
fontSize: '12px'
backgroundColor: 'blue'
}}
/div>5. 주석 사용 방법
JSX 내에서 {/ ... /} 형태를 사용한다.
JSX는 React.createElement를 호출하는 편리한 문법이다. 따라서 JSX를 사용할 경우 해당 문법을 직접 호출하는일은 거의 없다.
