ch02. Props(1)

• properties의 줄인표현으로 컴포넌트 속성을 설정할때 사용하는 요소이다.
• 해당 컴포넌트에서 불러와 부모 컴포넌트에서 설정할 수 있다(현재는 App컴포넌트)

JSX 내부에서 props 렌더링

• MyComponent 컴포넌트를 수정해서 name 이라는 props를 렌더링 하도록 설정
• props값은 컴포넌트 함수의 파라미터로 받아 와서 사용한다.
• props를 렌더링 할때에는 JSX 내부에서 {} 기호로 감싸주면  된다.

• import React from "react";
  //MyComponent.js
  const MyComponent = (props) => {
    return (
      <div>
        안녕하세요 제 이름은 {props.name}입니다.
      </div>
    );
  };
  export default MyComponent;

• 컴포넌트를 사용할 때에는 props 값을 지정해 주면 된다.

• import React from "react";
  import MyComponent from "./MyComponent";
  //App.js
  const App = () => {
  	// name은 React값으로 props를 채워준다
    return <MyComponent name="React" />;
  };
  export default App;

  

Props 기본값 설정

• 방금전 MyComponent의 props 값의 빈값으로 주면 React값을 뺴고 출력한다.
• props의 값을 따로 지정하지 않았을 경우에 기본값으로 보여주는 설정이 defaultProps이다.

• import React from "react";
  const MyComponent = (props) => {
    return <div>안녕하세요 제 이름은 {props.name}입니다.</div>;
  };
  MyComponent.defaultProps = {
    name: "기본이름",
  };

• 

• 

태그 사이의 내용을 보여주는 children

• 컴포넌트 태그 사이의 내용을 보여주는 props를 children이라고 한다.

• import React from "react";
  import MyComponent from "./MyComponent";
  const App = () => {
    return <MyComponent>리액트</MyComponent>;
  };
  export default App;

• 태그 사이에 작성한 문자열 React를 MyComponent.js 내부에서 보여주기 위해서는 props.children 값을 보여줘야 된다.

• const MyComponent = (props) => {
    return (
      <div>
        안녕하세요 제 이름은 {props.name}입니다.
        <br />
        children 값은 {props.children} 입니다.
      </div>
    );
  };
  export default MyComponent;

•