복합 Component 카드 만들기 - React 튜토리얼 3

복합 Component

복합 Component라고 타이틀을 붙였는데

Component의 포함관계를 정의한다고

보면 될 것 같습니다. 부모/자식 관계라고도

할 수 있는데 그렇다고 객체지향 프로그램밍의

철저한 상속관계는 아니고 CSS 계층 정도의

느슨한 관계(?) 정도라고 볼 수 있습니다.

쉽게말하면 Component안에 Component를

포함하는 방법입니다. React는 이 컴포턴트

시스템을 중심으로 작동하는데 하나의 웹앱에

몇개의 컴포넌트가 적당한가? 에 대한

아이디어를 정립할 필요가 있습니다.

많이 만든다고 좋은게 아니고

적어도 문제가 됩니다. 그 사이의

적당한 밸런스 포인트가 있는데

이것은 구현하는 프로그래머가

결정할 사안입니다. 프로그램은

어떻게 만들어도 돌아가겠지만

기본적인 성능 문제, 유지보수와

확장성 등에 영향을 미치는 문제이기에

처음에 와꾸를 잘 설계하는게 좋습니다.

이 포스팅에서는 다음과 같은 색상 카드를

만들어서 포함관계를 알아봅니다.

위의 색상 카드는 HTML과 CSS로도

구현할 수 있습니다. 하지만 프로그램의

로직없이 밑도 끝도 없이 하드코딩을

해야 하기 때문에 제대로된 프로그램을

만드는 것은 상당히 어려운일입니다.

그래서 리액트같은 웹 프레임워크를

사용해서 프론트엔드를 개발합니다.

이렇게 생긴 컴포넌트는 웹에서

흔히 사용하는데 저 카드에 색상대신

상품의 사진을 넣고 아래의 텍스트에는

상품정보를 넣으면 쇼핑몰 디자인입니다.

그러니까 색상 카드를 만들 수 있으면

다른 것들도 만들 수 있게 됩니다.

(그래서 이것을 배울 가치가 있다)

컴포넌트의 분리

처음에 할 일은 컴포넌트의 와꾸를 짜는 겁니다.

이것은 그렇게 어렵지 않은데

div 의 포함관계를 생각하면 카드의

div 가 있고 그 안에 div(블록)이

두개 들어가 있는 모양입니다.

html 이라면 다음과 같은 형태일 겁니다.

(Card 컴포넌트 안의 render()에서 return 시)

<div class="container">
   <div class="square"></div>
   <div class="label"></div>
</div>

Card라는 컴포넌트를 만들어서 그 안에

색상이 있는 Square와 글자가 있는

Label 컴포넌트를 render 한다면

아래처럼 할 수 있습니다.

return(
    <div>
        <Square/>
        <Label/>
    </div>
);

코드펜에서 실행하면 아래와 같습니다.

See the Pen react component build by jayonk (@jayonk) on CodePen.

브라우저에서 html 파일을 검사해보면

div 태그가 중첩되어 있는 것이 보입니다.

React 소스파일은 브라우저가 이해하는

HTML 파일로 변환되기 때문입니다.

속성값 전달

컴포넌트를 포함시키다 보면

속성값을 전달할 일이 있습니다.

예를 들어 배경색은 반복해서 사용되는

대표적인 속성인데 컴포넌트 간에

배경색상 값을 전달할 수 있습니다.

아래는 값을 전달하는 예제 코드입니다.

this.props 를 사용합니다.

포함관계를 잘 살펴보면 어디서

어디로 가는지 확인할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src=" https://unpkg.com/@babel/standalone/babel.min.js"></script>
    
</head>

<body>
    <style>
        body{
            margin: 0;
        }
        #container {
            height: 90vh;
            padding: 1em;
            background-color: #9EC3FF;
        }

    </style>
    <div id="container"></div>

    <script type="text/babel">

        class Square extends React.Component {
            render(){
                let style = {
                    height: 150,
                    backgroundColor: this.props.color
                };
                return(
                    <div style={style}>
                    </div>
                );
            }
        }
        class Label extends React.Component {
            render(){
                let style = {
                    fontFamily: "D2Coding",
                    fontWeight: "bold",
                    padding: ".3em",
                    fontSize: "1.2em",
                    lineHeight: "2em",
                    margin: 0
                };
                return(
                    <p style={style}>{this.props.color}</p>
                );
            }
        }
        class Card extends React.Component {
            render(){
                let style = {
                    height: 200,
                    width: 150,
                    padding: 0,
                    margin: "1em",
                    backgroundColor: "#FFFFFF",
                    boxShadow: "3px 3px 5px #152967",
                    textAlign: "center",
                    display: "inline-block"
                };
                return(
                    <div style={style}>
                        <Square color={this.props.color}/>
                        <Label color={this.props.color}/>
                    </div>
                );
            }
        }

        var myColor = "#1D4AD3";
        var pinkColor = "#E544C7";
        var goldColor = "#FFCC00";

        var destination = document.querySelector("#container");
        ReactDOM.render(
            <div>
                <h2>Color Card Component</h2>
                <Card color="#43C83C"/>
                <Card color="#84483C"/>
                <Card color={myColor}/>
                <Card color={pinkColor}/>
                <Card color={goldColor}/>
                
            </div>, destination            
        );

    </script>
</body>
</html>

코드펜으로 보면 아래와 같습니다.

See the Pen react cards component by jayonk (@jayonk) on CodePen.

컴포넌트의 사용법은 자바스크립트 문법에

따라 여러가지가 있기 때문에 좀 쉽지는

않습니다. 보통은 자바스크립트 프로그램을

어느정도는 할 줄 알아야 React 진도를

나갈 수 있다고 알려져 있습니다.

(프로그래밍 경험이 없어도 가능은 하지만

자바 스크립트는 다른 언어에 비해

초보자가 배우기 쉬운 언어는 아닙니다)

라이브러리와 프레임워크를 다루는데는

생각보다 많은 지식과 경험이 필요한데