Specialization

Specialization는 전문화 특수화라는 뜻을 가지고있음 Specialization의 의미가 어렵다고 느껴질순있지만 예시를 보면서 이해해보자!

다이얼로그라는 것은 굉장히 범용적인 의미를 가지고있음

모든 종류의 다이얼로그를 다 포함하는 개념이라고 볼 수 있는데 웰컴 다이얼로그라는것은 누군가를 반기기위한 다이얼로그라고 볼수있음 범용적인게 아니라 좀 더 구체화된것임.

이처럼 범용적인 개념을 구별이 되게 구체화 하는것을 Specialization라고함

웰컴 다이얼로그는 다이얼로그의 특별한 케이스

기존의 객체지향 언어에서는 상속을 사용하여 Specialization을 구현함.

하지만 리액트에서는 합성을 사용하여서 Specialization을 구현함

function Dialog(props) {
	return (
    	<FancyBorder color="blue">
        	<h1 className="Dialog-title">
            	{props.title}
            </h1>
            <p className="Dialog-message">
            	{props.message}
            </p>
         </FancyBorder>
      );
  }
  
  function WelcomeDialog(props) {
  	return (
    	<Dialog
        	title="어서오세요"
            message="우리 사이트에 방문하신 것을 환영합니다"
         />
      );
  }

위에있는 Dialog라는 컴포넌트는 범용적인 의미를 가진 컴포넌트임 

그리고 이 컴포넌트를 사용하는 WelcomeDialog컴포넌트가 나옴 .

Dialog컴포넌트에서는 title과 message라는 두가지 props를 갖고있는데 각각 다이얼로그에 나오는 제목과 메세지를 의미함.

따라서 어떻게 props를 전달해주느냐에따라 메세지의 문구가 달라짐

이렇게 Specialization은 범용적으로 쓸수있는 컴포넌트를 만들어놓고 이를 특수화 시켜서 컴포넌트를 사용하는 합성방식임.

 

그렇다면 아까 배웠던 containment와 Specialization를 같이 사용하려면 어떻게 해야할까?

우선 containment를 위해서 props.children을 사용하고 Specialization을 위해 직접 정의한 props를 사용하면 됨!

 

function Dialog(props) {
	return (
    	<FancyBorder color="blue">
        	<h1 className="Dialog-title">
            	{props.title}
            </h1>
         	<p className="Dialog-message">
            	{props.message}
            </p>
            {props.children}
        </FancyBorder>
     );
  }
  
  function SignUpDialog(props) {
  	const [nickname, setNickname] = useState('');
    
    const handleChange = (event) => {
    	setNickname(event.target.value);
     }
    
    const handleSignU[ = () => {
    	alert(`어서오세요, ${nickname}님!`);
    }
    
    return (
    	<Dialog 
        	title="화성 탐사 프로그램"
            message="닉네임을 입력해주세요.">
            <input
            	value={nickname}
                onChange={handleChange} />
            <button onClick={handleSignUp}>
            	가입하기
            </button>
         </Dialog>
      );
  }

하위 컴포넌트가 다이얼로그 하단에 렌더링되고, 실제 dialog컴포넌트를 사용하는 signupdialog컴포넌트를 살펴보면 Specialization을 위한 props인 title, message에 값을 넣어주고 있으며 사용자로 부터 닉네임을 입력받고 가입하도록 유도하기 위해 <input>과 버튼 태그가 들어있습니다 이 두개의 태그는 모두 props.children으로 전달되어 다이얼로그에 표시됩니다. 이러한 형태로 containment와 Specialization을 동시에 사용할 수 있습니다!!!!