[React] Component & Props

> Component

프론트앤드 개발에서 Component(이하 컴포넌트)라는 단어를 많이 사용한다. 컴포넌트는 재사용 가능한 UI 단위이다.

컴포넌트를 하나만 만들어 여기저기서 재사용하면 input 디자인이 바꼈을 때 css한 줄만 수정하면 바뀐 디자인이 페이지에 모두 반영될 것이다.

컴포넌트는 독립적으로 재사용가능한 코드를 관리 할 수 있는데, 하나의 컴포넌트에 필요한 html, css, js를 모두 합쳐서 만들 수 있다.

컴포넌트는 함수랑 비슷하다, 함수도 기능이 독립적이고 한번 선언해두면 필요할 때마다 호출하면서 재사용할 수 있다. 컴포넌트도 함수처럼 input을 받아서 return 할 수 있다.

React 컴포넌트에서는 input을 props라고 하고 return은 화면에 보여져야할 React요소가 return된다.

> Component 만들기

React는 component를 만들고 관리하기 좋은 라이브러리다. class형과 함수형으로 만들 수 있는데, 요즘은 함수형으로 만드는 것이 유지보수 측면에서 좋기때문에 많이들 사용한다.

👉🏻 함수형 컴포넌트

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

👉🏼 클래스형 컴포넌트

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

> Component 사용

• 컴포넌트는 function이름 or class 이름으로 사용할 수 있다,. 태그처럼 <welcome /d으로 작성한다.

• 우리가 정의한 컴포넌트를 사용할 때, 원하는 property를 얼마든지 추가할 수 있다. 그러면 welcome 컴포넌트(함수)에서 parameter로 해당 property를 받아서 사용할 수 있다. 이것을 props라 한다.
  props는 property의 줄임말이다.
  .(dot)으로 속성명에 접근가능하고, props.속성명 으로 속성값을 가져올 수 있다.

// 1. Welcome 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 2. App 컴포넌트 정의
function App() {
  return (
    <div>
      <Welcome name="wecoder" />
      <Welcome name="John" />
      <Welcome name="Sara" />
    </div>
  );
}

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

1. welcome컴포넌트: welcome 컴포넌트를 사용한 측(부모)에서 name이라는 property를 부여한거 같다. 이유는 props.name의 값을 사용했으니까

2. App컴포넌트를 보니 div로 감싸져있고, 컴포넌트를 세번 사용했다. name이라는 property를 부여해줬다.

3. ReactDOM.render 함수로 React 요소를 그려준다. root라는 id를 찾아 컴포넌트를 그려준다.

> 더 작은 Component로 분리하기

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">
        {formatDate(props.date)}
      </div>
    </div>);
}

댓글기능을 구현하기 위해 comment라는 함수를 만들어 .avatar 요소를 컴포넌트로 만들었다.

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

• .avatar 부분을 그대로 떼와서 Avatar(함수 첫글자는 무조건 대문자!)라는 이름으로 컴포넌트를 만들어준다.
• comment컴포넌트에서는 props.author로 접근해서 avatarUrl과 name을 가져왔는데, Avatar컴포넌트에서는 좀 더 직관적으로 사용할 수 있도록 user라는 이름을 받아온다.
• props.user에서 avatarUrl, name값을 가져온다.
• 그러면 를 사용하는 측에서 user라는 attribute를 추가해야 한다.

```jsx
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>
      <div className="comment-text">
        {props.text}
      </div>
      <div className="comment-date">
        {formatDate(props.date)}
      </div>
    </div>);
}

Avatar 컴포넌트에서 user의 avatarUrl과 name이 필요하므로, Comment컴포넌트에서 props.author 정보를 user라는 attribute로 넘겨줬다. props.author의 avatarUrl, name값이 user를 통해 전달됐다.