[React] 리액트 Props

Props

Props는 자바스크립트 변수 또는 HTML 속성등을 컴포넌트로 넘겨 사용할 수 있는 인수와 비슷한 개념이다. 부모 컴포넌트에서 Props를 사용하여 자식 컴포넌트에게 값을 전달할 수 있다.

 

Props 사용하기

여기 2개의 박스가 있는 컴포넌트가 있다.

App.jsx

 

Box1.jsx                                                                                                                       Box2.jsx

 

Box1과 Box2 컴포넌트에는 각각 파란색과 핑크색 배경화면을 속성값으로 가지고 있다.

부모 컴포넌트인 App.jsx에서 자식 컴포넌트들에게 Props를 사용하여 속성값을 전달하려고 한다.

// App.jsx
import Box1 from "./components/Box1";
import Box2 from "./components/Box2";

const App = () => {
  return (
    <div className="bg-red-100 min-h-screen flex flex-col justify-center items-center gap-12">
      <Box1 color="bg-blue-500" />
      <Box2 color="bg-pink-500" />
    </div>
  );
};

export default App;

// Box1.jsx
const Box1 = (props) => {
  return <div className={`${props.color} w-12 h-12`}>Box1</div>;
};

export default Box1;

 

App.jsx에서 "bg-blue-500" 속성값을 color 변수명에 저장을 하고 그 값을 Props를 사용하여 Box1.jsx에 전달해 준다.

Box1.jsx는 매개변수를 Props로 사용하고 "bg-blue-500" 속성값을 props.color 변수명을 사용하여 값을 참조한다.

HTML 속성값에 JS 코드를 사용하기 위해선 중괄호와 백틱을 사용하여 그 안에 ${변수명} 형태로 사용한다.