TIL_20.05.31(일) - React

기초를 튼튼하게,,, 모든 공부는 react 공식문서를 통해서 진행하였다.

컴포넌트 렌더링

//컴포넌트
function Welcome(props) {
  console.log(props)
  return <h1>Hello, {props.name}</h1>;
}
//엘리먼트
const element = <Welcome name="Sara" />;
ReactDOM.render(element, document.getElementById('root'));

React가 사용자 정의로 작성한 엘리먼트를 발견하면 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props라고 한다.

실제 콘솔에는

Object {
  name: "Sara"
}

가 찍히는 모습을 확인 할 수 있다.

컴포넌트 합성

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

//컴포넌트
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'));

props의 이름을 변경 할 수 도 있음!!!