반응형
1. 개요
지난 포스팅에 언급했듯. 다른 컴포넌트를 담는 div 컴포넌트는 어떻게 구현하는지 포스팅해보겠다.
2. 코드
지난 포스팅에선
const Container = React.createElement("div", null, [title, btn]);이런식으로 컴포넌트들을 배열로 가져와서 랜더링 했지만 JSX에서는 개발자가 정의한 컴포넌트를 태그로 불러올 수 있다.
<!DOCTYPE html>
<html lang="en">
<head></head>
<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/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = (
<h3
id="title"
onMouseEnter={
() => console.log("mouse enter")
}>
Hello I'm a title
</h3>
);
const Btn = (
<button
style={
{backgroundColor : "tomato"}
}
onClick={
() => console.log("I'm clicked")
}>
Click me
</button>
);
//const Container = React.createElement("div", null, [Title, Btn]);
const Container = (
<div>
<Title />
<Btn />
</div>
);
ReactDOM.render(Container, root);
</script>
</html>이렇게 개발자가 정의한 컴포넌트를 '<Title />', '<Btn />'로 가져올 수 있다. 여기서 페이지를 열어보면?
이렇게 에러가 쫘르륵 나오게되며, 당연히 페이지에는 나와야할 텍스트와 버튼이 나오지 않는다. 에러가 발생한 이유가 무엇일까?
2-1 Arrow Function
자바스크립트에는 애로우 함수 (Arrow Function)라는 개념이 있는데, 이는 함수를 간결하게 표현해주는 함수 표현식이다. 일반적인 함수 표현보다 구문이 간단하고, 특히 콜백 함수에서 많이 사용된다.
const add = (a, b) => a + b;// Arrow Function
const Btn = () => (
<button
style={
{backgroundColor : "tomato"}
}
onClick={
() => console.log("I'm clicked")
}>
Click me
</button>
);리액트에서는 이렇게 사용되며, 아래의 함수 표현식과 같은 의미로 쓰인다.
function Btn(){
return (
<button
style={
{backgroundColor : "tomato"}
}
onClick={
() => console.log("I'm clicked")
}>
Click me
</button>
);
}위, 아래 중 어느 표현이 더 간결한가? (아래요) 이렇게 함수형으로 컴포넌트를 구현해야 한 컴포넌트에서 다른 컴포넌트를 가져올때 태그를 사용하여 불러올 수 있다.
다시 아래 코드를 보자.
// Arrow Function 적용
<!DOCTYPE html>
<html lang="en">
<head></head>
<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/babel.min.js"></script>
<script type="text/babel">
const root = document.getElementById("root");
const Title = () => (
<h3
id="title"
onMouseEnter={
() => console.log("mouse enter")
}>
Hello I'm a title
</h3>
);
const Btn = () => (
<button
style={
{backgroundColor : "tomato"}
}
onClick={
() => console.log("I'm clicked")
}>
Click me
</button>
);
//const container = React.createElement("div", null, [title, btn]);
const Container = () => (
<div>
<Title />
<Btn />
</div>
);
ReactDOM.render(<Container />, root);
</script>
</html>
3.결과
지식출처) 노마드코더님 - 'ReactJS로 영화 웹 서비스 만들기' 강의
반응형
