노마드 코더 "ReactJS로 영화 웹 서비스 만들기" 정리 3 (Props) (정리중)

Components와 Props

개념적으로 컴포넌트는 JavaScript 함수와 유사하다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

 

컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것.

function Btn(props) {
  return (
    <button
      style={{
        backgroundColor: "skyblue",
        color: "white",
        padding: "10px 20px",
        margin: "10px",
        border: 0,
        borderRadius: "10px",
      }}
    >
      {props.text}
    </button>
  );
}

function App() {
  return (
    <div>
      <Btn text="Save Changes" />
      <Btn text="Continue" />
    </div>
  );
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

버튼을 생성하는 Btn과 화면에 출력해 주는 App 두 개의 함수를 지정한다.

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한. 이 객체를 “props”라고 한다. 일종의 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법.

 

App 함수에서는 Btn 함수를 호출하면서 사용자가 정의한 것들을 단일 객체(Object)로 전달한다. 위 코드에서는 text 하나밖에 없지만, 여러 개를 전달할 수 있다.

만약 property를 오브젝트로부터 바로 꺼내는 방식을 사용한다면 props 대신 지정한 이름을 중괄호 안에 넣어서 사용하면 된다.

// 위 코드에서 변경되는 부분만 작성

function Btn({text}) {
  return(
  {text}
  }
}