Props 헷갈리는 사람 다 들어오세요! [🐣어기여차 리액트 공부]

한번에 이해하는 Props 시작합니다🍿😎

3.3 Props

props는 properties의 줄임 표현으로 컴포넌트 속성을 설정할 때 쓰입니다.

🕵🏻‍♂️아직도 모르겠다고? props를 한번에 이해하는 알짜배기 코너!

👨‍🍳부모님이 👧아이에게 도시락을 싸주고 있다고 생각해 봅시다.
부모님은👨‍🍳 어떤 도시락을 싸줄지 재료들을 고민하고 장을 보겠죠.

소스는 토마토 소스로, 면은 파스타면으로 토핑은 파마산 치즈를 선택했습니다. 여기서 props의 속성은 소스, 면, 토핑이고 그 속성의 값은 토마토 소스, 파스타면, 파마산 치즈가 되겠죠.
그러면 아이는 부모님이 싸주신 도시락을 전달 받아 소풍에서 1) 토마토 소스를 파스타 면에 뿌리고 파마산 치즈를 그 위에 올려 먹을 수도 있고, 2) 토마토 소스를 파마산 치즈와 섞은 뒤 마지막에 파스타 면을 넣어서 먹을 수도 있겠죠.

여기서 부모님이 전해주신 도시락 통은 props이며, 도시락 통 안에 들어있는 소스, 면, 토핑은 props의 속성, 토마토 소스, 파스타면, 파마산 치즈 은 속성에 해당하는 값들이 되겠습니다. 자식은 부모로부터 정의된 props를 전달 받아 쓸 수 있는 것이죠.

안타깝게도 자식에게는 이미 정해진 props 속성값들을 바꿀 순 없겠죠.. 부모님 요리사👨‍🍳가 이미 정해서 주었으니까요!

props는 컴포넌트를 불러오는 파일에서 설정할 수 있답니다.즉, App.js에서 props의 값들을 지정해주고 Component.js에서 전달받은 props값을 사용하는 것이지요.

간단한 예시를 살펴보도록 하겠습니다.

[3.3 -1] Props 기본 설정하기

1. 컴포넌트를 호출하는 파일 (부모) 에서 props를 설정합니다.

//App.js
import React from "react";
import "./App.css";
import NewCool from "./Component";

const App = () => {
  return (
    <div>
      <h1>하루 습관 100일 챌린지</h1>
      {/* props설정하기 : adjective를 props의 속성으로 쓸 수 있겠죠 adjective의 속성값은 "쿨한"이 되겠네요.*/}
      <NewCool adjective="쿨한" />
    </div>
  );
};

export default App;

2. 해당 컴포넌트 파일에 가서 설정한 props값을 받아와 작성해줍니다.

//Component.js

const NewCool = (props) => {
  return (
    <div>
      <div>나의 새롭고 {props.adjective} 컴포넌트</div>
    </div>
  );
};
export default NewCool;

짜잔-

어때요? 이제 props 기초 개념 모두 이해하셨나요?!
여러 메서드들을 활용하여 props속성들에 제약을 걸어줄 수 있어요. 타입을 지정해줄 수도 있고, 필수적으로 props 속성값을 지정해줘야만 에러가 나지 않도록 설정해줄 수도 있죠.
이부분은 다음 시간에 다뤄볼게요!

🐣삐약- props 개념! 이제 절대 못 잊겠죠?