[React] 4. Component와 Props

출처: React 공식 홈페이지

Components and Props – React (reactjs.org)

 

 

0. 컴포넌트를 통해 UI를 재사용 가능한 여러 조각으로 나눌 수 있다. 

elements는 화면에서 보게되는 것이다. 보통 컴포넌트들이 모아져서 만들어진다. 변하지 않는다.
컴포넌트는 props를 받아 elements를 출력하는 함수와 같다.

 

내 생각에 컴포넌트는 데이터를 받아서 HTML을 구성하는 로직이 첨부된 느낌. 엘리먼트는 그 마지막 결과물. 

 

1. 컴포넌트 정의 방법

 

(1) 가장 간단한 방법

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

 

(2) 또는 ES6 문법 class를 이용

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

 

 

2. 컴포넌트 렌더링

> React가 사용자 정의 컴포넌트(예시 Welcome)을 발견하면 JSX 속성과 자식을 해당컴포넌트에
단일 객체로 데이터를 전달하는데 이것을 'props' 라고 한다.

 

예시)

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

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을 효율적으로 업데이트합니다.

 

 

3. 컴포넌트 합성

> 컴포넌트 안에 다른 컴포넌트가 들어갈 수도 있다. 아래는 예시

 

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

function App(){
  return(
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

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

 

 

4. props는 읽기 전용이다.

> 받은 props 값을 변경해서는 안된다. React의 원칙.

 

 

5. 컴포넌트 추출

> 컴포넌트를 여러 개의 작은 컴포넌트로 나누는 것을 두려워해서는 안된다.

 

예시)

(1) 나누기 전

function formatDate(date) {
  return date.toLocaleDateString();
}

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img
          className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <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>
  );
}

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'https://placekitten.com/g/64/64',
  },
};
ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author}
  />,
  document.getElementById('root')
);

 

 

(2) 나눈 후

- Comment > UserInfo > Avatar 로 나누었다.

function formatDate(date) {
  return date.toLocaleDateString();
}

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

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

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

const comment = {
  date: new Date(),
  text: 'I hope you enjoy learning React!',
  author: {
    name: 'Hello Kitty',
    avatarUrl: 'https://placekitten.com/g/64/64',
  },
};

ReactDOM.render(
  <Comment
    date={comment.date}
    text={comment.text}
    author={comment.author}
  />,
  document.getElementById('root')
);