[React] Components, Props

✔️React: Component-based

리액트에서는 모든 페이지가 컴포넌트로 구성되어있으며, 하나의 컴포넌트는 또 여러개의 컴포넌트의 조합으로 이루어질 수 있다.

✔️React Component

• 입력: Props
• 출력: react element
  이렇게 어떠한 속성들(props)의 입력을 받아 그에 맞는 react element를 생성하여 리턴 → `react component
  

비유해보자면,

• 붕어빵 틀: Component
• 만들어진 붕어빵: Element
  

---

✔️Props

• Component의 속성
• 컴포넌트에 전달할 다양한 정보를 담고있는 JavaScript 객체
• Read-Only (읽기 전용) → 값 변경 불가능
  - element 생성 도중에 props값이 변경되면 안되기 때문
  - 변경하고 싶다면 새로운 값을 컴포넌트에 전달하여 새 element를 생성
• 모든 리액트 컴포넌트는 props를 직접 바꿀 수 없으며, 같은 props에 대해 항상 같은 결과를 리턴해야함
  

Props 사용법

• jsx를 사용한 경우, 아래와 같이 '키-값'쌍의 형태로 컴포넌트에 props 넣을 수 있음

function App(props){
  return (
    <Profile
      name="밍"
      introduction="안녕하세요"
      viewCount={1500} 
   />
  );
)

• props는 아래와 같은 js가 됨

{
  name: "밍",
  instroduction: "안녕하세요",
  viewCount: 1500
}

---

✔️Component

Function Component

• Welcome이라는 함수 컴포넌트 예시

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

Class Component

• React.Component를 상속받아서 만듦
  - 한 클래스의 변수들과 함수들을 상속받아 새로운 자식 클래스를 생성

class Welcome extends React.Component {
  render(){
    return <h1>안녕, {this.props.name}</h1>;
  }
}

---

✔️Component의 특징

• 이름: 항상 대문자로 시작

const element = <Welcome name="밍" />;

Component 합성

- `Component`안에 또 다른 `Component`를 쓸 수 있음
- 복잡한 화면을 여러 `Component`로 나누어 구현 가능

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

function App(props){
  return (
    <div>
      <Welcome name="Mike" />
      <Welcome name="Steve" />
      <Welcome name="Jane" />
    </div>
  )
}

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

Component 추출

1. avatar부분 추출

• 기존 코드

function Comment(props){
  return (
    <div className="comment">
      <div className="user-info">
        // 이 부분을 추출하여 별도의 컴포넌트를 생성
        <img className="avatar">
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
      </div>
    </div>
  )
}

• Avatar 컴포넌트

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

• 변경된 기존 코드

function Comment(props){
  return (
    <div className="comment">
      <div className="user-info">
        // 변경된 부분
        <Avatar user={props.author} />
        <div className="user-info-name">
          {props.author.name}
      </div>
    </div>
  )
}

2. UserInfo 추출

• 기존 코드

function Comment(props){
  return (
    <div className="comment">
      // 이 부분 추출
      <div className="user-info">
        <Avatar user={props.author} />
        <div className="user-info-name">
          {props.author.name}
      </div>
    </div>
  )
}

• UserInfo컴포넌트

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

• 변경된 기존 코드

function Comment(props){
  return (
    <div className="comment">
      // 이 부분 추출
      <UserInfo user={props.author} />
    </div>
  )
}