3. Component, props

 

1. Component

React Component는 Function Component와 Class Component로 나뉜다. 

최근에는 Function Component를 주로 사용하기 때문에 이를 중심적으로 살펴보고자 한다.

 

Function Component

컴포넌트는 데이터를 가진 props를 input으로 받아, output으로 element를 반환한다.

그렇기 때문에 component가 화면에 렌더링 되지 않고, 출력된 element가 실제로 화면에 나타난다.

 

cf) component의 이름은 항상 대문자로 시작해야 한다.

 

- 예시

하나의 props 객체를 받아서 인삿말이 담긴 element 리턴하는 component

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를 선언한다.
• 그 다음 생성한 element를 파라미터로 해서 ReactDOM.render 함수를 호출한다.

//Welcome 컴포넌트 생성
function Welcome(props) {
  return <h1>안녕, {props.name}</h1>;
}

const element = <Welcome name="인제" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

 

 

Component 합성

 합성은 여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것이다. 

 

- 예시

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

// App 컴포넌트는 Welcome 컴포넌트 세개를 포함
//각각의 Welcome 컴포넌트는 각기 다른 props를 가진다.
function App(props) {
  return (
    <div>
    	<Welcome name="Mike" />
    	<Welcome name="Steve" />
    	<Welcome name="Jane" />
    </div>
  )
}

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

 

 

Component 추출

• 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나누는 과정
• 컴포넌트의 재사용성과 개발 속도가 향상된다.

-예시

1. 전체 코드

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

 

2. Avatar 추출

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

 

3. UserInfo 추출

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

 

4. 최종 코드

function Comment(props) {
  return (
    <div className="comment">
    	<UserInfo user={props.author} />
// ... ...
	</div>
  );
}

 

2. props

• properties의 줄임말
• component의 input 값이 되는 property
• 모든 리액트 컴포넌트는 props를 직접 바꿀 수 없고, 같은 props에 대해 항상 같은 결과를 보여준다.

- 예시

function App(props){
  return(
    <Profile
      name="예린"
      introduction="안녕하세요, 예린입니다."
      viewCount={1500}
    />
  );
}