[React] Props로 데이터 전달하기

 

 

React에서는 페이지를 컴포넌트라는 단위로 나누어서 블록을 조립하는 것과 같이 개발합니다.

 

따라서 react로 어떤 사이트의 해더를 개발한다고 한다면 우리는 이를 컴포넌트로 나누어서 개발해야 할 것입니다.

 

만약 네이버의 해더를 구현한다고 가정해봅시다.

 

그렇다면 간력하게 먼저 Search 컴포넌트가 필요할 것 같습니다.

 

그리고 그 밑에 있는 이동 버튼 들은 아이콘만 다르고 다 똑같이 때문에 하나의 Button 컴포넌트를 이용하면 만들 수 있겠습니다.

 

그렇다면 각각의 버튼 컴포넌트가 하나는 메일, 하나는 카페, 하나는 블로그를 나타내야할 것입니다. 

 

이를 위해서는 어떤 버튼을 렌더링할 것인지 결정하기 위해서는 우리는 각각의 버튼 컴포넌트에 값을 전달해 주어야 할 것입니다.

 

함수를 호출할 때 인수를 전달하는 것과 같은 원리입니다.

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

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

export default App;

import React from "react";

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

export default Button;

 

위와 같이 코드를 작성하고 props를 콘솔에 출력해 보았습니다.

 

3개의 객체가 출력된 것을 확인할 수 있습니다.

 

앱 컴포넌트에서 버튼 컴포넌트를 총 3번 작성하였고, 이로 인하여 버튼 컴포넌트가 3번 호출 되었습니다. 그리고 앱 컴포넌트에서 자식 컴포넌트인 버튼 컴포넌트에 전달한 값이 객체 형태라는 것을 알 수 있습니다.

 

다시 말해서 자식 컴포넌트에서 text = {"메일"}과 같이 작성한다면 이는 객체로 묶여 자식 컴포넌트의 매개변수 전달된다는 것을 알 수 있습니다.

 

결론적으로 우리가 앱 컴포넌트에서 자식 컴포넌트에 전달한 값들은 객체로 묶여서 자식 컴포넌트의 props로 전달된다. 그리고 자식 컴포넌트에서는 이 객체를(props)를 사용할 수 있게 된다는 것입니다.

 

여기서 다음과 같이 여러개의 props를 전달할 수 있습니다.

수정은 첫번째 버튼 컴포넌트만 다음과 같이 하겠습니다.

<Button text={"블로그"} />            =====>      <Button text={"블로그"} color = {"red"} />

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

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

export default App;

---

이제 전달받은 props를 활용해보겠습니다.

//Button.js
import React from "react";

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

export default Button;

 

위와 같이 '버튼'이라고 쓰여 있던 곳을 점표기법을 사용하여 props의 값을 사용해 보았습니다.

결과로는 다음과 같이 잘 나온 것을 알 수 있습니다.

또한 이번에는 color라는 props를 활용하여 버튼의 스타일을 바꿔보겠습니다.

//Button.js
import React from "react";

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

export default Button;

위와 같이 버튼 컴포넌트의 스타일의 color를 props로부터 전달받은 값으로 바꾸어 주는 것도 가능합니다.

---

props를 더 편리하게 사용할 수 있는 방법이 있습니다.

 

지금까지 props는 객체의 값을 전달받는다는 것을 알 수 있었습니다.

 

따라서 굳이 props에 점표기법으로 접근하지 않고 객체의 구조분해할당문법으로 매개변수의 위치에 중괄호를 열고 text와 color의 값을 직접 꺼내오는 방식으로 작성할 수 있습니다.

//Button.js
import React from "react";

const Button = ({text, color}) => {
  return <button style={{ color: color }}>{text}</button>;
};

export default Button;

위와 같이 작성하여도 똑같이 잘 렌더링 되는 것을 확인할 수 있습니다.

 

---

만약 props로 전달해야 하는 값이 아주 많다면 어떻게 되는지 살펴보겠습니다.

 

버튼 컴포넌트에 props를 text, color, a,b,c 총 5개를 전달해야 한다면 버튼 컴포넌트가 약간 지저분해 보일 것입니다.

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

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

export default App;

 

그래서 props로 전달하고 싶은 값을 전달 전에 객체로 묶어서 전달해보겠습니다.

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

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

export default App;

위처럼 스프레드 연산자를 이용하여 props를 전달하였습니다.

 

렌더링 된 결과를 확인해보면 이전과 동일하게 잘 렌더링된 것을 알 수 있습니다.

---

사실 props의 값으로는 일반적인 자바스크립트 값뿐만 아니라 html요소 컴포넌트도 전달할 수 있습니다.

 

이를 확인해 보기 위해서 앱 컴포넌트 안에 있는 버튼 컴포넌트 하나를 약간 수정해보겠습니다.

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

function App() {
  const buttonProps = {
    text: "블로그",
    color: "red",
    a: 1,
    b: 2,
    c: 3,
  };
  return (
    <div>
      <Button {...buttonProps} />
      <Button text={"카페"} />
      <Button text={"메일"}>
        <div>자식입니다~~</div>
      </Button>
    </div>
  );
}

export default App;

여기서 마지막 버튼 컴포넌트의 자식요소인 div 태그는 자동으로 버튼 컴포넌트의 children이라는 props로 전달이 됩니다.

자동입니다.

 

따라서 버튼 컴포넌트에서 chilren props에 있는 값을 사용할 수 있습니다.

//Button.js
import React from "react";

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

export default Button;

 

한번 children 요소를 사용해보겠습니다.

//Button.js
import React from "react";

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

export default Button;

위와 같이 메일 버튼 안에 div가 잘 추가된 것을 볼 수 있습니다.

 

또한 리액트 컴포넌트를 children으로 설정할 수 있는데 이 또한 확인해보겠습니다. 전달해 줄 컴포넌트는 새로운 Header.js를 만들어서 해주겠습니다.

//Header.js
import React from "react";

const Header = () => {
  return (
    <div>
      <h1>header</h1>
    </div>
  );
};

export default Header;

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

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

export default App;

이 또한 정상적으로 렌더링 되는 것을 확인할 수 있습니다.

---

지금까지 부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는 props에 대해서 살펴보았습니다.

props는 부모 컴포넌트에서 자식 컴포넌트로 전달이 되지만 자식 컴포넌트에서 부모 컴포넌트로 값을 전달하는 것은 리액트에서는 불가능합니다.

 

감사합니다.