컴포넌트안에 또 다른 컴포넌트

복잡한 화면을 여러 개의 Component로 나눠서 구현 가능!

function Welcome(props) {
  return <h1>안녕, {props.name}</h1>; 
}

function App(props) { // Welcome 컴포넌트를 3개 가지고 있는 컴포넌트 -> 컴포넌트 합성
  return (
    <div>
    	<Welcome name = "Mike" />
    	<Welcome name = "Steve" />
    	<welcome name = "Jane" />
    </div>
  )
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

컴포넌트 합성

리액트로만 구성된 웹의 기본구조

• App Component(루트) 내부에
  -- 하위 --
  - Welcome Component -> props = {name:"Mike"}
  - Welcome Component -> props = {name:"Mike"}
  - Welcome Component -> props = {name:"Mike"}
  : 세개의 Welcome Componet가 다른 속성으로 각각 존재

컴포넌트 추출

기존 페이지에 리액트를 합치는 경우 루트노드가 한개가 아닐 수 있다

복잡한 컴포넌트를 나눠 여러개의 컴포넌트로 만드는 과정

장점

• 재사용성
• 개발 속도 향상

회원 댓글 코드

*여러개의 컴포넌트들이 섞여있다

function Comment(props) {
	return (
    	<div className = "comment">
        	<div className = "user-info">
            	<img className = "avatar"
                	src = {props.author.avatarUrl}
                    alt = {props.author.name}
                />
                <div className = "user-info-name">
                	{props.author.name}
                </div>
            </div>
          
            <div className="comment-text">
            	{props.text}
            </div>
         
            <div className = "comment-date">
            	{formateDate(props.date)}
            </div>
        </div>
    );
}  

Avatar 컴포넌트 추출하기

Comment에서 Avatar 컴포넌트 분해 및 별로의 컴포넌트로 생성

function Avatar(props) {
  return (
    <img className="avatar"
    	scr={props.user.avatarUrl}
		alt={props.user.name}
	/>
  );
}

보편적인 단어를 사용하는 이유는 재사용성 용이를 위함

추출된 Avatar 컴포넌트 적용

function Comment(props) {
	return (
    	<div className = "comment">
        	<div className = "user-info">
            	<Avatar user={props.author}/> // ---> Avatar 컴포넌트가 적용된 모습
                <div className = "user-info-name">
                	{props.author.name}
                </div>
            </div>
          
            <div className="comment-text">
            	{props.text}
            </div>
         
            <div className = "comment-date">
            	{formateDate(props.date)}
            </div>
        </div>
    );
}  

UserInfo 컴포넌트 추출하기

Comment에서 UserInfo(Avatar포함) 컴포넌트 분해 및 별로의 컴포넌트로 생성

function UserInfo(props) { // Author 대신 의미를 분명하게 하기위해 UserInfo라고 만듬
  return (
    <div className="user-Info"
    	<Avatar user = {props.user} />
		<div className="user-info-name">
          {props.user.name}
		</div>
	</div>
  );
}

최종 추출된 UserInfo 컴포넌트 적용

function Comment(props) {
	return (
    	<div className = "comment">
        	<UserInfo user={props.suthor}/>           
            <div className="comment-text">
            	{props.text}
            </div>
            <div className = "comment-date">
            	{formateDate(props.date)}
            </div>
        </div>
    );
}  

즉,

이 코드가

<div className = "user-info">
  <img className = "avatar"
       src = {props.author.avatarUrl}
       alt = {props.author.name}
       />
  <div className = "user-info-name">
    {props.author.name}
  </div>
</div>

처리 후...

이렇게 요약된다

<UserInfo user={props.suthor}/>  

컴포넌트의 구조

Comment Component > UserInfo Component > Avatar Component

추출 기준은 없지만

• 기능단위로 분류하고

• 바로 재사용 가능하도록 추출해주는 것이 좋다

재사용 가능한 Component를 많이 갖고 있을수록 개발 속도가 빨라진다!