[React] #02 Props는 어떻게 쓰는것일까??

Props?

  우리가 컴포넌트를 사용할 때, 정적인 값만이 아닌 동적으로 리턴값을 바꾸고 싶을 때가 있다. 바로 이럴때 props를 쓰는 것인데, 예시를 보며 알아봅시다.

  일단 props는 property의 약자로, 부모에게 받아온 데이터이다. 이게 무슨 말이냐면, 리액트의 데이터 흐름에 대해서 먼저 알아야 하는데, 리액트는 데이터가 부모에서 자식으로만 이동할 수 있는 '단방향 형식'이다. 따라서 부모요소에서 받아온 props는 읽기 전용, ReadOnly이다.

//Component1.js

export default function Component1 (props) {
	return (
    	<h1>My Name Is {props.name}!</h1>
    );
}

//App.js

import Component1 from "./Component1";

export default function App () {
	return (
    	<Component1 name="Kim"><Component1/>
    );
}

  위의 코드에서 Component1 이라는 컴포넌트는 부모요소로 부터 props를 받는다. 이때 props의 이름은 사용자가 마음대로 정할 수 있다. Component1의 부모 요소인 App.js에서 name="kim" 이라고 작성했다면, Component1에서는 name이라는 props를 사용해야 하는 것 이다.

  이렇게 props를 사용해서 정적인 컴포넌트에 동적으로 값을 바꿔줘 사용자의 행동에 대한 대처를 유동적으로 할 수 있다.

  또한, useState 변수나 함수도 props로 넘길 수 있다.

//App.js

import Component1 from "./Component1";
import { useState } from "react";

export default function App () {
  
  const [num, setNum] = useState(10);
  
  function showInfo (name, num) {
  	return (<h1>내이름: {name} 학번: {num}<h1>) 
  }
  
	return (
    	<Component1 name="KimJunGyoung" snum={num} showInfo={showInfo} />
    );
}

  이렇게 props에 state 변수나 함수를 넣어 자식 컴포넌트로 값을 전달시킬 수 있다!