Component란?

• component-based!

  • 리엑트에서는 모든 페이지가 컴포넌트로 이루어져있고, 하나의 컴포넌트는 또 다른 컴포넌트의 조합으로 만들어 질 수 있다.
  • 컴포넌트는 props를 입력으로 받아서 React element를 반환한다.
  • 이렇게 보면 쉽게 생각해서 component를 객체지향으로 봤을때, class라고 생각해도 무리가 없어 보인다. 반환이 되는 React element는 객체 지향에서 instance라고 생각하면 될 것 같다.

• Props?

  • property
  • component 의 속성
  • read-only
    • 값 변경이 안됨
    • 다른 값으로 변경하려면 새로운 값을 컴포넌트에 전달하여 새로 Element를 생성
  • All React Components must act like pure with respect to their props.
    • 모든 리엑트 컴포넌트는 props를 직접 바꿀 수 없고, 같은 props에 대해서는 항상 같은 결과를 보여줄것!

• Props 사용

function App(props) {
  return (
    <Profiles name="react" introduction="hello, i'm react" viewCount={1500}>
    </Profiles>
  );
}

• 이렇게 component를 불러올때 인자로 넣어준다.

function Profiles(props) {
 	return (
      <div>
        NAME: props.name
        INTRODUCTION: props.indroduction
        VIEWS: props.veiwCount
      </div>
    );
}

• 이렇게 props.을 이용해서 변수를 사용한다.