https://react.dev/learn/passing-props-to-a-component

Props(프롭스)란?

공통된 여러 버튼의 텍스트와 이미지를 다르게 보여주고 싶다면?

컴포넌트로 만들어서 부모 컴포넌트에서 사용하게 됩니다.

props는 부모 컴포넌트에서 자식 컴포넌트에게 전달하는 값 입니다.

즉, props를 활용하면 부모 컴포넌트 -> 자식 컴포넌트로 값을 전달할 수 있습니다.

자식 컴포넌트에서 props는 읽기 전용입니다. 따라서 자식 컴포넌트에서 자체 props를 수정할 수 없습니다.

 

 

Props의 기본 사용법

• 부모 컨포넌트

import Button from './components/Button'

function App() {
  return (
    <>
      <Button text={"블로그"} />
      <Button text={"뉴스"} />
    </>
  )
}

export default App

자식 컴포넌트 Button으로 text로 각각의 값을 전달합니다.

 

• 자식 컴포넌트

const Button = (props) => {
    return (
        <button>
            {props.text}
        </button>
    )
}

export default Button;

이런식으로 부모 컴포넌트로 prop를 전달 받아 {props.text}로 각각의 버튼 텍스트를 출력합니다.