Component와 Props

Component?

• JS function과 유사하고, "prop"객체를 입력받고 React 엘리먼트를 반환하는 역할
  Props?
• 엘리먼트에 작성된 JSX 어트리뷰트와 자식을 객체로 표현한 것. Component에 인자로 전달된다.

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


const element = <Welcome name="Sara">어려워react</Welcome>;
//react가 사용자 정의 컴포넌트로 작성한 엘리먼트 발견 
//JSX 어트리뷰트(name)와 자식(어려워react)을 컴포넌트(Welcome)에 단일 객체로 전달(이 객체를 props)


ReactDOM.render(element, document.getElementById('root'));

과정 설명

1. <Welcome name="Sara"> 엘리먼트로 ReactDOM.render() 를 호출
2. React는 {name: "Sara", children: "어려워react"} 를 props로 하여 Welcome 컴포넌트를 호출한다.
3. Welcome 컴포넌트는 <h1>Hello, Sara 어려워react</h1> 엘리먼트를 반환
4. ReactDOM은 <h1>Hello, Sara 어려워react</h1> 엘리먼트와 일치하도록 DOM을 업데이트

const element = <Welcome name="Sara">어려워react</Welcome>;
//react가 사용자 정의 컴포넌트로 작성한 엘리먼트 발견 
//JSX 어트리뷰트(name)와 자식(어려워react)을 컴포넌트에 단일 객체로 전달(이게 props)

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

function App() {
  return (
    <div>
      <Welcome name="Sara" /> //{name: "Sara"}
      <Welcome name="Coding" /> //{name: "Coding"}
      <Welcome>react어려워</Welcome> //{children: "react 어려워"}
    </div>
  )
}

ReactDOM.render(element, document.getElementById('root'));

Q&A

---

• DOM을 처음 배울 때 페이지 단위로 작업하는 방법과 비교해서, 컴포넌트 단위로 개발할 때의 장점은 무엇인가요?
  • 컴포넌트 단위로 개발하면 UIf를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있기 때문에 재사용성, 유지 보수면에서 좋다.
• 하나의 컴포넌트에서 여러 개의 엘리먼트를 리턴할 수도 있나요?
  • 참고: Fragments

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  )
}

• <Tweet>나의 새 트윗</Tweet>이라는 컴포넌트 사용 방법이 있다고 가정할 때, 컴포넌트 내에서 나의 새 트윗이라는 문자열은 어떻게 접근할 수 있나요?

  function Tweet(props) {
    return (
      {props.children} // <- 이런식으로 접근 가능
    )
  }

• props를 다룰 때에 지켜야 하는 엄격한 규칙이 하나 있습니다. 무엇인가요?
  • props는 읽기 전용이다. 따라서 모든 React 컴포넌트는 자신의 props를 다둘 때 반드시 순수 함수처럼 동작해야한다