1. Document Object Model
2. codesandbox
sandbox 를 이용해서 코드를 테스트할 수 있다.
3. react 맛보기
아래 코드를 코드샌드에 입력해본다.
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<div id="root"></div>
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", { children: "hello, world!" });
ReactDOM.render(element, rootElement);
</script>
</body>
잘 출력된다.
- 아래와 같이 안에 여러개를 쓸 수 있다.
<script>
const rootElement = document.getElementById("root");
const element = React.createElement("h1", {
className: "title",
children: ["hello, world!", "It's me", "goot"]
});
ReactDOM.render(element, rootElement);
</script>하지만 코드가 길어지면서 불편하다. 이럴때 jsx를 이용한다
- jsx
문자도 HTML도 아닌 javaScript의 확장문법이다.
jsx를 사용하려면 babel이 필요하다.
- babel 코드 사용해보기
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const element = <h1 className="title">Hello, world!</h1>;
ReactDOM.render(element, rootElement);
</script>
</body>
</html>위 코드처럼 사용하면 아래와 같이 나온다.
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const text = "Hello, world!";
const titleClassName = "title";
const customH1 = <h1 className={titleClassName}>{text}</h1>;
const element = customH1;
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
4. 멀티 Element 생성하기
여러개의 태그를 넣을때는 어떻게 해야하나??
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const element = (
<React.Fragment
// children={[<h1>Hi</h1>, <h2>Bye</h2>, <h3>Children</h3>]}
children={[
React.createElement("h1", null, "Hi"),
React.createElement("h2", null, "Bye"),
React.createElement("h3", null, "Children")
]}
/>
);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
위와 같이 하면 되지만 아래와 같은 코드로
더 줄일 수 있다.
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const element = (
<>
<h1>Hi</h1>
<h3>Bye</h3>
<h5>Children</h5>
</>
);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
5. element 찍어내기
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const paint = (title, description) => (
<>
<h1>{title}</h1>
<h3>{description}</h3>
</>
);
const element = (
<>
{paint("Good", "good")}
{paint("Bad", "bad")}
{paint("So so", "so so")}
</>
);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const Paint = ({ title, description, children }) => {
return (
<>
<h1>{title}</h1>
<h3>{description}</h3>
{children}
</>
);
};
const element = (
<>
<Paint title="Good" description="good">
<h1>hi</h1>
</Paint>
<Paint title="Bad" description="bad " />
<Paint title="So so" description="so so" />
</>
);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>6. JS와 JSX 섞어쓰기
같이 쓸 수 있다.
<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const rootElement = document.getElementById("root");
const Text = ({ text }) => {
// text가 대문자로 시작하면, h1 소문자로 시작하면 h3
if (text.charAt(0) === text.toUpperCase()) {
return <h1>{text}</h1>;
} else {
return <h3>{text}</h3>;
}
};
const element = (
<>
<Text text="Text" />
<Text text="text" />
</>
);
ReactDOM.render(element, rootElement);
</script>
</body>
</html>
프론트엔드 개발자