[React] props 값 undefined

Issue

구현하고자 하는 것에 props를 이용해 값을 넘겨주는 것이 필요하여 해당 작업을 하다 값이 제대로 넘어가지 않고 계속해서 undefined가 나오는 문제가 있었다.

결론부터 말하자면 내가 구현하고자 하는 것은 이렇게 구현하는 것도 아니었고, 생각해보면 너무나 당연한 것이었다.

이거 때문에 시간 상으로 거의 하루의 업무시간을 쏟았지,, 😱 각설하고!

다른 코드의 문제인가 싶어 props 테스트를 위한 컴포넌트를 2개 생성하였는데 똑같이 undefined가 나왔다.

테스트를 했던 코드는 이러하였다.

import React from "react";
import PropChild from "./PropChild";

export default function PropParent() {
  return (
    <div>
      <h1>Parent Component</h1>
      <PropChild firstname="John!" />
    </div>
  );
}


function PropChild({ firstname }) {
  console.log("Received firstname :", firstname);
  return (
    <div>
      <h2>Child Component</h2>
      <p>{firstname}</p>
    </div>
  );
}

아무리 두 눈을 크게 떠도 코드 상에는 문제가 없어 보였고, 내가 잘못 알고있는 것이 아닌가 싶어 나의 전담 사수님 Mr.Gpt에게 질문 🔨

Solution

정말 이렇게도 물어보고 저렇게도 물어보고 거꾸로도 물어보고 다 해봤지만 답을 얻을 수는 없었다.

답은 예상치 못한 상황에서 얻기도 하는 법,,

반 포기 상태로 키보드 뚝딱뚝딱 거리다가 이유를 찾고야 말았다.

firstname의 값이 undefined가 나왔던 이유는 당연히 그래야만 하는 것이었다. 하하하

PropParent 컴포넌트 내에서 PropChild를 이런식으로 prop인 firstname을 John으로 주어 렌더링하게 되면

이렇게 나오지만, PropChild 컴포넌트 자체를 렌더링한다면

이렇게 나오게 된다.

즉!!! 난 여태 PropChild에서 firstname 값을 찾고 있었던 것이었고, 이는 당연하게 전달받은 prop이 없어 값이 없었던 것이었다.

너무 당연한 것인데 왜 몰랐을까.

필자가 하려 했던 것은 프로젝트 리스트 페이지에서 특정 프로젝트를 클릭했을 때 상세 페이지로 넘어가는 것이었다.

이 과정에서 axios get이 필요할테고 프로젝트 하나의 데이터를 가져오려면 프로젝트의 pk를 알아야 한다 생각했다. 그래서 prop을 이용하여 pk를 넘겨주려고 했는데 잘못된 생각이었다.

이를 구현하기 위해서는 useParams() 라는 react-router-dom에서 제공하는 hook을 사용하면 된다.

거의 하루 쏟았던 것을 useParams() 쓰고 5분 만에 구현했다고 한다. 😶‍🌫️

마무리

난 신입 개발자이지만 사수가 없는 곳에서 혼자 백엔드와 프론트엔드를 하고 있다.

말도 안되는 일이라 생각하지만 어쩌다 보니 이렇게 되었다. 기능을 구현하기 위해 서치를 하고 해보다 에러가 나오면 또 서치를 하며 입사한 작년 11월부터 어찌저찌 해오고 있다.

요즘에는 서치보단 chatGpt를 정말 유용하게 잘 쓰고 있다. 나의 사수님이시다.

chatGpt는 정확한 답을 알려주는 AI가 아직은 아니다. 하지만, 질문을 어떻게 하느냐에 따라 답에 대한 정확도가 달라지는 것 같다.

프리미엄 구독할까 🤔