React 기초 (2) : props

안타깝지만 Potato.js는 지워주자. Component를 이해했다면 필요가 없다.

 

App.js에 존재하는 component를 공부해보자.

우리는 App.js 내부에 2개의 컴포넌트를 만든 후 그걸 병합할거다

이는 ReactDOM.render가 하나의 컴포넌트만 렌더할 수 있기 때문이다.

 

import React from 'react';



function Food({fav}) {
    / {fav}는 props에 든 fav를 구조 분해 할당으로 할당한 것입니다
	return (
	<h1>I love {fav}!</h1>
	);
}

function App() {
	return (
    <div>
      <h1>Hello!!</h1>
      <Food fav='kimchi' />
      //여기서 Food의 fav는 prop(property)라 부른다. 컴포넌트 안에든 것.
      <Food fav='film' />
      <Food fav='novel' />
      <Food fav='coding' />
	</div>
	)
}

export default App;

 

자, prop의 형태는 html과 비슷하게 생겼는데 예시를 들어 보자면 다음과 같다.

 

<Food lala={True} whoa={[1, 3, 5, ‘what’]}, sure=“Yes” />

 

lala, whoa, sure가 전부 prop이다.

즉, 문자열을 제외하고는(sure=“Yes”)

중괄호{} 안에 배열, 불린 등 여러 값을 마음대로 넣어주면 된다.

 

<div class=“btn”>과 같은 html과 흡사한 모양이다.

전달된 prop들은 한 Object로 묶여서 전달된다.

 

따라서 이 object에서 특정 prop를 추출해서 쓰기도 한다.

 

function Food(props) { 
	return <h1>I love {props.fav}</h1>;
}


function App() {
	return (
	<div class="container">
	<h1>Hello!!</h1>
	<Food fav="kimchi" lala={(1, 3, 5)} />
	</div>);
}

여기서 props는 객체로, 하단 App 컴포넌트의 fav와 lala를 인자로 가지고 있음.

그러니까 fav와 lala를 객체로 가지고 있단 말이다.

props = {fav: "kimchi", lala: 5} 인 셈.

그래서 props.fav를 빼다 쓸 수 있는 것임.

 

 

---

 

function 말고 Class를 에서도 props를 활용할 수 있다. 다만, React Hook의 등장으로 함수형에 익숙해지는 것이 더 좋을 것이다

 

class Subject extends React.Component {
  render() {
    return (
      <div>
        <header>
          <h1>{this.props.title}</h1>
          <h2>{this.props.sub}</h2>
        </header>
      </div>
    );
  }
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="web programming"></Subject>
        <Nav></Nav>
        <Contents></Contents>
      </div>
    );
  }
}

export default App;

 

 

---

 

Hook, state, props 활용의 기본 형태는 이렇다.

import React, { useState } from "react";

const Test = props => {
  return (
    <h2>
      {props.cinema}
      {props.food}
      {props.num}
    </h2>
  );
};

const App = () => {
  const [count, setCount] = useState(0);
  return (
    <>
      <div className="App"></div>
      <Test cinema="tark" num={count} />
      <Test cinema="tark" food="popcorn" num={count} />
    </>
  );
};

export default App;