props란?

props는 부모 컨포넌트로부터 자식 컨포넌트로 전달된 데이터를 의미한다.

props는 읽기전용(read-only) 라는 것에 주의하자

props 사용법

1. props 파라미터 활용

App.js

<script>
import React from "react";
import Button from "./Button";

function App() {
  return <Button name="yong" color="blue" />;
}

export default App;
</script>

Button.js

<script>
function Button(props) {
  return (
    <div>
      <button style={{ color: props.color }}>Hello : {props.name}</button>
    </div>
  );
}

export default Button;

</script>

props는 객체 형태로 전달되기 때문에 두 값을 사용할 때 객체형태로 props.name과 같이 사용한다.

2. ES6 destructuring 활용

Button.js

<script>
function Button({ name, color }) {
  return (
    <div>
      <button style={{ color: color }}>Hello : {name}</button>
    </div>
  );
}

export default Button;

</script>

전달받은 props 변경

props는 read-only 이기 때문에 직접적으로 값을 변경할 수 없다.

하지만 state에 props값을 넣어서 바꿔서 사용이 가능하다.

<script>
import { useState } from "react";

function Button({ name, color }) {
  const [result, setResult] = useState(name);
  const onClick = () => setResult("sang");
  return (
    <div>
      <button onClick={onClick} style={{ color: color }}>
        Hello : {result}
      </button>
    </div>
  );
}

export default Button;

</script>

전달받은 name을 state로 관리하고 바꾸고자 하는 값을 setResult 함수에 인자로 준다.

defaultProps로 props 기본값 설정

<script>
import { useState } from "react";

function Button({ name, color }) {
  const [result, setResult] = useState(name);
  const onClick = () => setResult("sang");
  return (
    <div>
      <button onClick={onClick} style={{ color: color }}>
        Hello : {result}
      </button>
    </div>
  );
}

Button.defaultProps = {
  color: "red",
};

export default Button;

</script>

<script>
import React from "react";
import Button from "./Button";

function App() {
  return (
    <div>
      <Button name="yong" color="blue" />
      <Button name="yong" />
    </div>
  );
}

export default App;

</script>