카테고리 없음

[React] JSX - 2

Developer KTU 2024. 11. 5. 22:32
반응형

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로 영화 웹 서비스 만들기' 강의

반응형