[JavaScript] React - Component와 Props

Component

컴포넌트란 재사용 가능한 UI단위를 말합니다. 만약 자신이 회원가입 페이지의 로그인 창 등 여러가지를 만들었는데, 정보 수정 하는 페이지를 추가하게 되어 비밀번호 input을 만들어야 한다면 반복되는 부분을 하나의 컴포넌트로 만들어 똑같은 디자인의 input을 사용할 수 있습니다.
또한, 컴포넌트는 독립적으로, 재사용 가능한 코드로 관리할 수 있습니다. 컴포넌트는 함수로 만들어 사용할 수 있으며, 컴포넌트도 input을 받아 return이 가능합니다. React에서는 컴포넌트를 props라고 말하며 reutrn은 화면에 보여져야할 React 요소가 return 됩니다.

Component 생성

함수로 Hello 컴포넌트 생성

React는 컴포넌트를 만들고 관리하기 좋은 라이브러리 입니다. React에서는 컴포넌트를 class나 함수로 만들어 사용합니다. 필요에 의해 함수 or class로 만들어야 합니다.

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

example)

<div id='root'></div>				//HTML

function Hello() {				//javascript
	return <h1>Hello</h1>;
}
ReactDOM.render(<Hello />, document.getElemetByID('root'));
						// Hello

class로 Hello 컴포넌트 생성

class로 컴포넌트를 만들려면 React.Component를 extend해서 생성합니다. 컴포넌트를 생성할 때 render() 메소드는 무조건 정의해야하며, return도 해주어야 합니다. (필수)

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

Component 사용

함수나 클래스를 사용할 때에는 를 사용하게 됩니다. 정의했던 컴포넌트를 사용할 때, 원하는 속성을 추가할 수 있고 그러면 Hello 컴포넌트에서 인수로 해당 속성을 받아서 사용할 수 있습니다. 이것을 props라고 말하며, propssms property의 줄임말 입니다.
.으로 속성명에 접근하고, props.속성명으로 속성값을 가져올 수 있습니다.

• Hello 컴포넌트: Hello 컴포넌트를 사용한 측(부모)에서 name이라는 attribute를 부여했나 봅니다. props.name의 값을 사용합니다.
• App 컴포넌트를 보면 div로 감싸져있고, 컴포넌트를 세번 사용했습니다. name이라는 attribute를 부여해주었습니다.
• ReactDOM.render 함수로 React 요소를 그려줍니다. root라는 id를 찾아 컴포넌트를 그려주었습니다.

//1. Hello 컴포넌트 정의
function Hello(props) {
  	return <h1>Hello, {props.name}</h1>;
}
//2. App 컴포넌트 정의
function App() {
  return (
    <div>
    	<Hello name="yeonseoung" />
    	<Hello name="eunsu" />
    	<Hello name="jongil" />
    </div>
  );
}
//3. 화면에 React 요소 생성
React.DOM.render(
  <App />
  document.getElementByID('root')
  );

1. Hello 컴포넌트 : Hello 컴포넌트를 사용한 측에서 name이라는 attribute 부여, props.named의 값을 사용하세요.
2. App 컴포넌트가 div로 감싸져있고 컴포넌트를 세번 사용했습니다. name이라는 attribute 부여
3. ReactDOM.render 함수로 React 요소를 생성하고, root라는 id를 찾아 컴포넌트를 생성

작은 Component로의 분리

컴포넌트는 재사용 가능한 코드의 단위이기 때문에, 컴포넌트 내에서도 재사용할 수 있는 요소들을 분리하여 작은 Component로 분리할 수 있습니다. 아래의 user-info-name을 컴포넌트로 분리해 보겠습니다.

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>
  );
}
}

.user_info-name 부분을 user_info_name이름으로 컴포넌트를 만들고, Comment 컴포넌트에서 props.author로 접근해서 name을 가져와 user이라는 이름으로 받아오겠습니다. porps에서 props.user에서 user_info-name을 가져오도록 하겠습니다. <user_info-name />을 사용하는 측에서 user라는 attirbute를 추가합니다.

function User_info_name(props) {
  return ( 
        <div className="user-info-name">
          {props.author.name}
        </div>

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

User_info_name 컴포넌트에서 name이 필요하므로, Comment 컴포넌트에서 props.author라는 attribute로 넘겨주었습니다. props.author의 name값이 user를 통해 전달되었습니다.

한번 더 컴포넌트를 분리해보겠습니다. .user-info 부분을 컴포넌트로 만들어보겠습니다. .user-info 부분을 그대로 UserInfo라는 컴포넌트를 생성하였습니다. 줄여보았습니다.
코드가 확실히 간결해졌습니다!!

function UserInfo(props) {
  return (
    <div className="user-info">
      <img className="avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />		
       <User_info_name user={props.user} />
    </div>
  );
}

function Comment(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>
  );
}