[React] Elements

 

Element : 리액트 앱을 구성하는 가장 작은 블록들

 

function Button(props) {
    return (
    	<button className={`bg-${props.color}`}>
            <b>
            	{props.children}
            </b>
        </button>
    )
}

function ConfirmDialog(props) {
    return (
    	<div>
            <p> 내용을 확인하셨으면 확인 버튼을 눌러주세요.</p>
            <Button color='green'>확인</Button>
        </div>
    )
}

ConfirmDialog 컴포넌트가 Button 컴포넌트를 포함하고 있다.

 

// ConfirmDialog 컴포넌트의 elements
{
    type: 'div',
    props: {
    	children: [
        	{
            	type: 'p',
                props: {
                	children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.'
                }
            },
            {
            	// Button 컴포넌트의 elements 를 형성해서 합치게 된다. 
            	type: Button,
                props: {
                    color: 'green',
                    children: '확인'
                }
            }
        ]
    }
}

 

 

• Element 의 가장 중요한 특징 : 불변성(immutable)

 : Elements 생성 후에는 children 이나 attribute 를 바꿀 수 없다.