[React] Components와 Props (3)

Components 컴포넌트

- UI를 재사용 가능한 개별적인 조각으로 나눔

- JS의 함수와 유사

- 이름의 시작은 항상 대문자

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

 

props

- 순수 함수처럼 동작 -> 입력한 값을 바꾸려 하지 않고 동일한 결과 반환

- 값을 바꾸고 싶을 땐 state 사용 (다음 장)

 

React element에 사용자 정의 components 담기

const element = <Welcome name="cho" />;
// props <- {name: 'cho'}

 

components 여러번 렌더링

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

function App() { // 여러 번 렌더링 하는 새로운 함수
  return (
    <div>
      <Welcome name="cho" />
      <Welcome name="kim" />
      <Welcome name="hawng" />
    </div>
  );
}

 

components 쪼개기

- 가독성과 단순성

 

쪼개기 전

function Comment(props) {
  return (
    <div className="Comment">
      // 쪼개기 1
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        // 쪼개기 2
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
  );
}

쪼개기 1 - Avatar() 함수 생성

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

쪼개기 2 - Avatar() 함수를 이용해서 UserInfo() 함수 생성

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

결과 

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} />
    </div>
  );
}