[React] 동빈나 React 이론 - 4강 / React의 Component와 Props

React에서 Component는 JavaScript 함수와 흡사하다고 보면 된다.

어떠한 내용을 화면에 그려줄 지에 대해 정의하고 있는 JavaScript 함수 같은 거라고 이해하면 된다. 

 

이러한 Component는 Props를 부모로부터 입력받아서

결과적으로 화면에 어떤 내용을 그릴지 React Element를 반환하는 형태로 동작한다.

 

Props는 Property(속성)의 약자다. 객체 지향 프로그래밍에서 사용하는 '속성'의 의미와 동일하다.

부모 Component에서 자식 Component로 다양한 속성들을 정의해서 보내줄 수 있다.

 

Props를 이용하여 React Component는 계층적으로 본다.

 

---

 

아래 두 코드는 동일한 기능을 수행한다.

Component를 변수로 저장해서 render시켰냐의 차이다.

 

---

props는 default 값을 명시할 수 있다.

DOM render로 Component를 불러올 때, props값이 전달되지않으면 자동으로 디폴트 값으로 출력한다.

 

---

아래 코드는 Component를 계층적으로 사용하여 재사용성을 높였다.

이와 같이 react를 활용하면 View를 표현할 때 보다 효과적으로 코딩할 수 있다.

 

jsx 문법에서는 여러 요소(tag)가 들어갈 때, 전체 요소를 감싸주는 tag가 있어야 한다.

 

---

function User(props){
  return (
    <div>
      <img src = {props.user.imageUrl}/>
      &nbsp; 
      <strong>{props.user.name}</strong>
      </div>
  )
}

function Board(props){
  return (
    <section>
      <User user={props.user}/>
      {props.title}
      <hr/>
      {props.content}
     </section>
  )
}

const board = {
  title: "게시글 제목입니다.",
  content: "게시글 내용입니다. 반갑습니다",
  user:{
	  name: "이상희",
	  imageUrl: "https://placeimg.com/32/32/any"
 }
}
//실제로는 개발을 할때, 데이터를 데이터베이스 서버, 웹서버로 부터 받아와서 개발

ReactDOM.render(
<Board
  title={board.title} 
  content={board.content} 
  user={board.user}
  />, 
 document.getElementById("root")
 );

위 코드를 실행하면 사진과 같이 실행된다.

props를 속성 형태로 전달한다.

 

&nbsp : 한칸 띄우기