SNS 공유버튼 그룹 만들기 6:30~7:30 질문있습니다.

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

SNS 공유 버튼 그룹 만들기

해결된 질문

작성

수정됨

해쉬태그를 만들기 위해

TestResult.jsx에서 아래 useState를 작성하셨는데,

useEffect(() => {
    const testInfo = TESTS?.find((test) => test.info.mainUrl === testParam);
    if (!testInfo) {
      alert('존재하지 않는 테스트입니다.');
      navigate('/');
    }
    setRenderTestInfo(testInfo);

    const resultInfo = testInfo?.results?.find(
      (result) => result.query === resultParam
    );
    if (!resultInfo) {
      alert('존재하지 않는 결과값입니다.');
      navigate(`/${testInfo?.info?.mainUrl}`);
    }
    setRenderResultInfo(resultInfo);
  }, [testParam, resultParam, navigate]);

처음에 testParam, resultParam을 가지고 와

리렌더링이 되면, useEffect 내 코드가 실행되고

testInfo 변수에 값이 저장되겠죠

그리고

setRenderTestInfo(testInfo)를 통해 renderTestInfo에 저장되는 것까지 알겠습니다.

  <ShareButtonGroup
        testParam={testParam}
        resultParam={resultParam}
        renderTestInfo={renderTestInfo}
      />

props로 넘기고

const ShareButtonGroup = ({ testParam, resultParam, renderTestInfo }) => {
  // console.log('renderTestInfo', renderTestInfo.info.mainUrl);
  return (
    <div>
      <h3>친구에게 공유하기</h3>
      <div>
        <FacebookShareButton
          url={`${baseUrl}/${testParam}/result/${resultParam}`}
          hashtag={`#${renderTestInfo?.info.mainTitle}`}
        >
          <FacebookIcon round={true} size={48} />
        </FacebookShareButton>
      </div>
    </div>
  );
};

export default ShareButtonGroup;

해쉬태그에서 받아오면 undefined 오류로 넘어가지 않습니다.

강사님 영상은 별다른 오류가 없는데, 저는 계속 빈객체로 넘어가서 흐름을 생각해본건데, 제가 잘못 생각하고 있는 부분이 있는지 궁금합니다.

react aws Google-Analytics cloudflare adsense 수익화

답변 3

코배투

지식공유자

안녕하세요.

우선 해결하셨다니 다행이고, 좋은 질문 남겨 주셔서 감사합니다.

옵셔널 체이닝이 생기면서 간단하기도 하지만, 거꾸로 표현하면 그만큼 내부적으로 일어나는 일에 대해 무관심하게 넘어갈 수 있는 부분인데요.

우선 영상 속에서 타이핑했던 코드와 다른 점이 한 부분 있습니다.

ShareButtonGroup 에서 FacebookShareButton 에 hashtag 데이터를 넘기는 코드 부분인데요.

적어주신 코드에서는 renderTestInfo?.info.mainTitle 로 넘기셨지만, 강의 영상 또는 소스 코드 레포(https://github.com/cobaetoo/mbti-contents-platform/blob/main/src/components/testResult/ShareButtonGroup.jsx)에서는 renderTestInfo?.info?.mainTitle 로 넘기고 있습니다.

info 안에 mainTitle이 있는지 한 번 더 확인하는 셈이죠.

이렇게 다른 부분 때문에 undefined가 뜬 것으로 파악됩니다.

photographarmacist

질문자

왜 조건부 렌더링을 사용해야하는지 이해했습니다. 근데 왜 영상에서는 조건부 렌더링이 없을까요?

photographarmacist

질문자

useState를 통해 renderTestInfo의 초기값을 빈객체({})로 줬기 때문에 조건부렌더링을 해도 빈객체는 true로 평가되었습니다. 그래서 계속 undefined가 되어, 저는 차라리 아래 코드처럼 아에 비워버렸어요.

  const [renderTestInfo, setRenderTestInfo] = useState();

이렇게 하니까 초기값이 false이니 조건부렌더링에서 아래 코드가 실행되지 않고 set함수에 의해 값이 담기고, 리렌더링 될때 잘 넘어가네요.

{renderTestInfo && (
        <ShareButtonGroup
          testParam={testParam}
          resultParam={resultParam}
          renderTestInfo={renderTestInfo}
        />
      )}

해결은 했지만 왜 영상은 되는지 궁금합니다. 버전차이일까요?

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. photographarmacist님.

질문 주신 상황은 React의 상태 관리와 비동기 작동 방식에 대한 이해와 관련이 있습니다. useState로 설정한 상태(setState)는 호출 즉시 상태를 변경하는 것이 아니라, 그 다음 렌더 사이클에서 변경이 반영됩니다. 하지만, React의 비동기 상태 업데이트 방식으로 인해 renderTestInfo의 값 설정보다 ShareButtonGroup 컴포넌트가 먼저 렌더링되어 undefined 값이 전달된 것처럼 보일 수 있습니다. 이를 방지하기 위해, 간단한 조건문을 사용하여 상태가 할당되지 않았을 때(예: null 또는 undefined) 컴포넌트가 렌더링되지 않도록 제어할 수 있습니다.

해결 방안

조건부 렌더링: renderTestInfo가 유효한 값일 때만 ShareButtonGroup을 렌더링하도록 조건을 추가합니다.

   {renderTestInfo && (
     <ShareButtonGroup
       testParam={testParam}
       resultParam={resultParam}
       renderTestInfo={renderTestInfo}
     />
   )}

로딩 스피너 또는 대체 UI: 데이터가 로드될 때까지 사용자가 기다릴 수 있도록 로딩 스피너를 추가해서 UX를 개선할 수 있습니다.
기본값 설정: ShareButtonGroup에서 renderTestInfo의 기본값(예: 빈 객체)를 설정하여, undefined 에러를 막을 수도 있습니다.

이와 관련된 더 자세한 정보와 문제 해결 사례가 궁금하시다면 사이트 전체 Route 구조 짜기 영상 10분쯤 코드가 똑같은데 연결이 안되요 게시글을 참고해 보시기 바랍니다. 이 게시물에서는 라우팅 및 컴포넌트 구조 관련 문제 해결 과정을 공유하고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

SNS 공유버튼 그룹 만들기 6:30~7:30 질문있습니다.

해결 방안