[React] 6. Props - 컴포넌트에 값 전달하기

서회정

Feb 13, 2026

Contents

1. Props란 2. props 활용 1. Button 컴포넌트 생성 2. Button 컴포넌트 import 및 props값 추가 3. 매개변수로 props값 전달

1. Props란

💡

Properties의 줄임말

각 컴포넌트에 전달되는 값들을 Props라고 부른다

2. props 활용

💡

같은 UI를 가지고 값이 다른 버튼 세 개를 만들어보자

1. Button 컴포넌트 생성

Button.jxs 파일을 생성하고, button태그를 리턴하도록 만들어보자.


const Button = () => {
  return <button>클릭</button>;
};

export default Button;

2. Button 컴포넌트 import 및 props값 추가

App.jsx에 만들어둔 버튼 컴포넌트를 import하고 사용해보자.

그리고 각각의 버튼의 text라는 props에 넣어줄 값들을 입력할 수 있다.


import "./App.css";
import Button from "./components/Button";

function App() {
  return (
    <>
      <Button text={"메일"} />
      <Button text={"카페"} />
      <Button text={"블로그"} />
    </>
  );
}

export default App;

여기까지만 실행해보면 아직 props는 전달되지 않는 것을 볼 수 있는데 버튼컴포넌트에서 어떤 위치에 해당하는 값을 넣어줄 건지 지정하지 않았기 때문이다.

버튼 컴포넌트에서 부모 컴포넌트로부터 받은 값을 props라는 매개변수를 통해 활용할 수 있는데, 매개변수에 props를 입력하고 콘솔로 출력해보면 부모 컴포넌트로부터 받은 세 개의 값을 확인할 수 있다.

여기서 주의해서 살펴볼 점은 text라는 props로 보낸 값이 자식의 매개변수에 객체로 전달된다는 것이다.

객체로 전달된 값을 꺼내서 쓰기 위해서는 점표기법이 필요하다.

따라서 props로 전달된 값을 props.text 와 같은 문법으로 중괄호 안에 사용하게 되면 다음과 같이 각각 전달된 프로퍼티 값이 잘 출력되는 것을 확인할 수 있다.

3. 매개변수로 props값 전달


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

export default Button;

다음과 같이 버튼에 두 가지 이상의 프로퍼티를 넣은 경우에도 점표기법으로 사용하고자 하는 값을 꺼내어 활용할 수 있다.


import "./App.css";
import Button from "./components/Button";

function App() {
  return (
    <>
      <Button text={"메일"} color={"red"} />
      <Button text={"카페"} />
      <Button text={"블로그"} />
    </>
  );
}

export default App;


const Button = (props) => {
  // console.log(props);
  return <button style={{ color: props.color }}>{props.text}</button>;
};

export default Button;

✅ 프로퍼티가 모든 컴포넌트에서 반드시 사용되지 않는 경우

첫 번째 컴포넌트에만 전달된 color 프로퍼티의 red라는 값을 문자열로 함께 출력하게 된다면 해당하는 프로퍼티를 전달받지 않은 컴포넌트에는 출력이 되지 않는다.

이 경우, 랜더링만 되지 않을 뿐 오류는 발생하지 않는데 프로그래밍을 하다보면 오류를 마주할 때도 있다.

예를 들어 문자열로 출력하고자 하는 props.color 의 첫 글자를 대문자로 표현하고자 하여 props.color.toUpperCase() 를 사용하게 될 때에는 다음과 같이 랜더링 오류가 발생한다.

원인은 해당하는 프로퍼티가 없는 컴포넌트의 경우 undifined 값을 반환하게 되는데, 이를 단순히 랜더링 할 때에는 문제가 되지 않지만 undifined 에 .toUpperCase() 함수를 사용하며 문제가 발생하는 것이다.

이 문제를 해결하고자 한다면 값이 없을 때 기본 값을 넣어주는 과정이 필요하다.

기존에 전달되던 객체를 props라고 받아오던 매개변수에 프로퍼티를 구조분해할당으로 각각 값을 받아오는 것이 핵심이다.


const Button = ({ text, color = "black" }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
    </button>
  );
};

export default Button;

이렇게 구조분해할당 방식으로 값을 받아오며 color에 기본 값인 black을 기입해주면 별도로 값이 들어가지 않을 때에도 color에는 black이라는 값이 들어가 오류 발생을 막을 수 있다.

물론 빈문자열도 가능!

✅ props로 전달하는 값이 많을 때

💡

props로 전달하는 값이 많은 경우에는 여러 프로퍼티들을 묶어 객체로 만들고 그것을 스프레드 연산자를 통해 보다 깔끔하게 전달할 수 있다.


import "./App.css";
import Button from "./components/Button";

function App() {
  return (
    <>
      <Button text={"메일"} color={"red"} a={1} b={2} c={3} />
      <Button text={"카페"} />
      <Button text={"블로그"} />
    </>
  );
}

export default App;


const buttonProps = {
    text: "메일",
    color: "red",
    a: 1,
    b: 2,
    c: 3,
  };


import "./App.css";
import Button from "./components/Button";

function App() {
  const buttonProps = {
    text: "메일",
    color: "red",
    a: 1,
    b: 2,
    c: 3,
  };

  return (
    <>
      <Button {...buttonProps} /> // 뿌려!
      <Button text={"카페"} />
      <Button text={"블로그"} />
    </>
  );
}

export default App;

✅ props로 html요소나 React 컴포넌트도 전달할 수 있다.

마지막 버튼 태그에 닫는 태그를 별도로 만들어서 그 안에 div태그를 사용해 자식요소라는 문자열을 넣는다. 이렇게 넣은 div 요소는 자동으로 Button컴포넌트의 children이라는 이름의 props로 전달된다.


import "./App.css";
import Button from "./components/Button";

function App() {
  const buttonProps = {
    text: "메일",
    color: "red",
    a: 1,
    b: 2,
    c: 3,
  };

  return (
    <>
      <Button {...buttonProps} />
      <Button text={"카페"} />
      <Button text={"블로그"}>
        <div>자식요소</div>
      </Button>
    </>
  );
}

export default App;

버튼 컴포넌트에서 children으로 해당하는 값을 받고 이를 랜더링 할 수 있다.


const Button = ({ children, text, color = "" }) => {
  return (
    <button style={{ color: color }}>
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;