[공식문서]Components 와 props

1. Components 란?

개념적으로 컴포넌트는 자바스크립트 함수와 유사하며, props라고 하는 임의의 입력을 받은 후 

화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 

 

2. 함수형 컴포넌트 , 클래스형 컴포넌트

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

이 함수는 데이터를 가진 하나의 props (props는 속성을 나타내는 데이터) 객체 인자를 받은 후,

React 엘리먼트를 반환하므로 유효한 React 컴포넌트다.

 

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

 

3. 컴포넌트 렌더링 

React가 사용자 정의로 작성한 const element = <Welcome name="Kang" />;  을 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에  단일 객체로 전달하며, 이 객체를 props 라고 한다.

 

* 렌더링 예시

function Welcom(props) {     return <h1>Hello, {props.name}</h1>; } const element = <Welcom name="Kang" />; ReactDOM.render(    element,    document.getElementById('root') );

1. <Welcom name="Kang" /> 엘리먼트로 ReactDOM.render() 를 호출한다.

2. React는 {name="Kang"} 를 props로 하여 Welcome 컴포넌트를 호출한다.

3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Kang</h1> 엘리먼트를 반환한다. 

4. ReactDOM은 <h1> Hello, Kang</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트한다. 

 

※ 컴포넌트의 이름은 항상 대문자로 시작해야한다.

 

4. 컴포넌트 합성

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다.

(모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있다고한다.)

 

React앱 에서 버튼,폼, 다이얼로그,화면 등 의 모든 것들이 흔히 컴포넌트로 표현된다.

※ Welcome 컴포넌트를 여러번 렌더링 하는 예시 function Welcom(props) {     return <h1> Hello, {props.name} </h1> } function app() {     return (     <div>        <Welcom name="Kang" />        <Welcom name="Lee" />        <Welcom name="Jung" />      </div>     ); } ReactDOM.render(     <App />     document,getElementById('root') );

결과

일반적으로, 새 React 앱은 최상위에 단일 App 컴포넌트를 가지고 있다.

기존 앱에 React를 통합하는 경우에는 Button과 같은 작은 컴포넌트부터 시작해서 뷰 계층의 상단으로 올라가면서 작업하는게 좋다.

 

 

5. 컴포넌트 추출

다음 예시를 통해 컴포넌트 추출에 대해 알아보자.

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

이 컴포넌트 author(객체), text(문자열) 및 date(날짜)를 props로 받은 후 화면에 보여준다.

위 컴포넌트는 구성요소들이 중첩 구조로 이루어져 재사용은 어렵다.

 

1. Avatar 를 먼저 추출 해보자.

 - Avatar 는 자신이 comment 내에서 렌더링 된다는것을 알필요는 없다. props의 이름은 조금더 일반화된 user로 바꾸자. (props의 이름은 컴포넌트 자체의 관점에서 짓는 것을 권장한다.)

 

 <Avatar user={props.author} />

 <UserInfo user={props.author} />

 

조금더 단순하게 변경할 수 있다.

 

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

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

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

 

 

마지막으로,

 

props는 읽기전용이므로 컴포넌트의 자체 props를 수정해서는 안된다.

 

function sum(a,b) {

     return a+b;

}

 

이러한 함수를 순수 함수라고 칭하며, 입력값을 바꾸려 하지 않고 동일한 입력값에 대해 동일한 결과를 반환한다.

모든 React 컴포넌트는 자신의 props를 다룰때 반드시 순수함수처럼 동작해야한다.

 

어플리케이션 UI는 동적이며 시간에 따라 변한다. 그에 따라 React는 state를 통해 위 규칙을 위반하지않고 상황에 맞게 자신의 출력값을 변경할 수 있도록 해준다.