🔍 한눈에 알아보기

Composition

• 여러 개의 component를 합성하여 새로운 component를 만드는 것

1. Containment

• 하위 component를 포함하는 형태의 합성 방법
• React component props의 children을 사용

function Border(props){
	return(
    	<div className={'Border Border-' + props.color}>
        	{props.children}
		</div>
    )
}

function WelcomDialog(props){
	return(
    	<Border color="blue">
        	<h1 className="Dialog-title">
            	환영합니다
            </h1>
            <p className="Dialog-message">
            	ㅇㅇ을 찾아주셔서 감사합니다
            </p>
        </Border>
    )
}

2. Specialization

• Composition을 사용하여 특정하게, 혹은 구체적이게 기능을 구현

function Dialog(props){
	return(
    	<Border color="blue">
        	<h1 className="Dialog-title">
            	{props.title}
            </h1>
            <p className="Dialog-message">
            	{props.message}
            </p>
        </Border>
    )
}

function WelcomeDialog(props){
	return(
    	<Dialog
        	title="환영합니다"
            message="ㅇㅇ을 찾아주셔서 감사합니다"
        />
    )
}

function ErrorDialog(props){
	return(
    	<Dialog
        	title="오류입니다"
            message="(오류코드: 0000) 관리자에게 문의하세요"
        />
    )
}

• 범용적으로 사용되는 component인 Dialog의 구체적인 기능을 부여하기 위해 WelcomeDialog와 ErrorDialog를 구현

3. Containment와 Speicalization 함께 사용하기

function Dialog(props){
	return(
    	<Border color="blue">
        	<h1 className="Dialog-title">
            	{props.title}
            </h1>
            <p className="Dialog-message">
            	{props.message}
            </p>
            {props.children}
        </Border>
    )
}

• 앞서 언급된 코드에서 {props.children}을 추가해서 composition을 사용하도록 만듬

function SignUpDialog(props){
	const [nickname, setNickname] = useState('');
    const handleChange = (event) => {
    	setNickname(event.target.value);
    }
    const handleSignUp = (event) => {
    	alert(`${nickname} 님, 환영합니다.`)
    }
	return(
    	<Dialog
        	title="회원가입"
            message="닉네임을 입력해 주세요">
        	<input
            	value={nickname}
                onChange={handleChange}/>
            <button onClick={handleSignUp}>
            	가입하기
            </button>
        </Dialog>
    )
}