props

리액트에서 동적값을 전달하기 위해 props 를 사용한다.

 

// App.jsx
import Post from "./components/Post";

// 최상위 컴포넌트
// 일반적으로 최상위 컴포넌트 하나를 두고 그 안에 다른 컴포넌트를 넣는다.

function App() {
  // Post에 props를 전달
  return <main>
    <Post author = "sois" body= "react awesome!"/>;
    <Post author = "ruby" body = "hello react"/>;

  </main>
}

export default App;

// jsx에서 소문자의 태그는 html요소로 간주하기 때문에 커스텀 컴포넌트의 명칭은 대문자로 시작되어야한다.

 

사용할 컴포넌트에 props로 전달하려면 키와 값으로 그저 넘기기만 하면 된다.

 

받는 컴포넌트에서 props 인자를 받는 것으로 해준다.

props는 기본적으로 객체로 넘어오기에 키값을 통해 내용을 꺼낼 수 있다.

 

// Post.jsx
function Post(props) {
  // props를 통해 동적 값을 받을 수 있다.
  // 전달받은 속성의 키로 꺼낼 수 있다.
  return (
    <div>
      <p>{props.author}</p>
      <p>{props.body}</p>
    </div>
  );
}

export default Post;

// export function ~ 또는 export default 함수명; 으로 export 할 수 있다.
// 이 둘의 차이는 import 하는 곳에서의 import 방식이 다른 것일 뿐이다.
// {}를 사용하면 jsx안에 자바스크립트 식, 변수 등을 사용할 수 있다.