props 너란 녀석 드디어 깨달았다

안녕하세요! 오늘은 드디어 저를 계속해서 괴롭혔던 props에 대해 알아보도록 하겠습니다 뭐 물론 괴롭힌건 아니고 제가 계속 이해가 안가서 혼자 힘들어하고 있었던거였답니다 : )

또 계속해서 찾아보고 알아보니 개념은 어렵지 않았습니다!

네! 그러면 본격적으로 설명을 해보겠습니다..!!

props가 뭔가요?

네 props란 부모 컴포넌트에서 자식 컴포넌트로 데이터 및 함수를 전달하는 기능입니다

자식에서 부모로는 절대 안됩니다! 무조건 부모에서 자식으로!

기본 구조

props의 기본구조로는

<컴포넌트이름 프롭이름={실제데이터} />

입니다

어떻게 사용하나요?

function App() {
  const cities = [
    {
      name: "서울",
      desc: "서울은 인구 너무 많음",
    },
    {
      name: "부산",
      desc: "부산은 해운대",
    },
    {
      name: "대구",
      desc: "대구 너무 더워",
    },
  ];

부모 컨포넌트에서 이런식으로 함수가 있을 때

function CityInfo(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>{props.desc}</p>
    </div>
  );
}

이런식으로 부모에 있는 함수 값을 자식에게 전달하여 자식 컴포넌트에서 받을 수 있습니다

인자값으로 props 라는 단어를 사용한 것은 보통 props라는 단어로 통일해서 흔히 사용하기 때문입니다

그렇게 되면

props.name은 "서울", "부산", "대구"의 값을 가져오게 되고

props.desc은 "서울은 인구 너무 많음", "부산은 해운대", "대구 너무 더워" 라는 값을 가져오게 되죠

이게 왜 편한가요?

보통 우리는 하드코딩을 하기 싫어합니다 그리고 데이터값들을 받아주어서 많은 것들을 하게 되고 여러 컴포넌트가 하나의 파일을 만들기 때문에 props를 사용하게 됩니다
이해하고 사용하시면 좀 더 편리하게 사용하실 수 있으실겁니다!

---

네 오늘은 React에 쓰이는 props에 대해 알아보았는데요

저도 처음에는 계속 겁을 먹다보니 알아보고 이해를 하려는데 정말 많은 시간이 걸리더라구요...

근데 약간 포기한 상태로 차근차근 해보자라고 생각을 했고 시간이 걸리더라도 천천히 기초부터 해보자 해서 알아보니 조금은 이해가 된 것 같습니다!

이제 계속 실전으로 써먹으면서 익히면 될 것 같은 생각이 듭니다!

여러분들도 어렵게 생각하지 마시고 아주 기초부터 익히신다 생각하시고 공부하신다면 하실 수 있으실겁니다!!

제가 했으니깐요!

네! 그러면 오늘은 여기까지이며
항상 몸 조심하시고 우리는 또 행복하자구요!!