리액트 공식문서 Props

1. 기본적인 Props

// Welcome이라는 컴포넌트에 Props로 name="Sara" 전달
const element = <Welcome name="Sara" />

💡 컴포넌트로 작성한 엘리먼트를 발견하면, JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다.

// Welcome 컴포넌트에서 {name : 'Sara'}로 props를 받는다.
function Welcome(props){
	return <h1>Hello, {props.name}</h1>
}

// Welcome이라는 컴포넌트에 Props로 name="Sara" 전달
const element = <Welcome name="Sara" />;
ReactDOM.render(
	element,
  	document.getElementById('root')
);

예시코드 설명

1. <Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출합니다.
2. React는 {name : "Sara"}를 props로 하여 Welcome 컴포넌트를 호출합니다.
3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환합니다.
4. React DOM은 <h1>Hello, Sara</h1>엘리먼트와 일치하도록 DOM을 효율적으로 업데이트 합니다.

💡 컴토넌트에서 props로 {name : 'Sara'} 객체 형태로 받는다.

2. 컴포넌트 합성

3. 컴포넌트 추출 (컴포넌트를 잘개 쪼개기)

목적 : 처음에는 컴포넌트를 추출하는 작업이 지루해 보일 수 있습니다. 하지만 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타냅니다. UI 일부가 여러 번 사용되거나 (Button, Panel, Avatar), UI 일부가 자체적으로 복잡한 (App, FeedStory, Comment) 경우에는 별도의 컴포넌트로 만드는 게 좋습니다.

추출 하기전

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <Avatar user={props.author} />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

💡 Comment라는 컴포넌트안에 많은 정보들이 들어가있다.

추출하고 난 후 (컴포넌트를 쪼개기)

export default function Extraction() {
  return (
    <Comment date={comment.date} text={comment.text} author={comment.author} />
  );
}

function Comment(props) {
  console.log('props', props);
  return (
    <div className='Comment'>
      <UserInfo user={props.author} />
      <div className='Comment-text'>{props.text}</div>
      <div className='Comment-date'>{formatDate(props.date)}</div>
    </div>
  );
}

// 컴포넌트로 따로 빼서 관리 Extraction
function UserInfo(props) {
  console.log('UserInfo', props);
  return (
    <div className='UserInfo'>
      <Avartar user={props.user} />
      <div className='UserInfo-name'>{props.user.name}</div>
    </div>
  );
}

// 컴포넌트로 따로 빼서 관리 Extraction
function Avartar(props) {
  console.log('Avartar', props);
  return (
    <img className='Avatar' src={props.user.avatarUrl} alt={props.user.name} />
  );
}

💡 여러가지 컴포넌트들로 분해 하면서 Comment 컴포넌트가 단순해지고 각 컴포넌트들의 재 사용성이 증가했다!