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

Question

해쉬태그를 만들기 위해 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에 저장되는 것까지 알겠습니다. props로 넘기고 const ShareButtonGroup = ({ testParam, resultParam, renderTestInfo }) => { // console.log('renderTestInfo', renderTestInfo.info.mainUrl); return (

친구에게 공유하기

); }; export default ShareButtonGroup; 해쉬태그에서 받아오면 undefined 오류로 넘어가지 않습니다. 강사님 영상은 별다른 오류가 없는데, 저는 계속 빈객체로 넘어가서 흐름을 생각해본건데, 제가 잘못 생각하고 있는 부분이 있는지 궁금합니다.

코배투 · Answer

안녕하세요. 우선 해결하셨다니 다행이고, 좋은 질문 남겨 주셔서 감사합니다.   옵셔널 체이닝이 생기면서 간단하기도 하지만, 거꾸로 표현하면 그만큼 내부적으로 일어나는 일에 대해 무관심하게 넘어갈 수 있는 부분인데요.   우선 영상 속에서 타이핑했던 코드와 다른 점이 한 부분 있습니다. 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 · Answer

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

인프런 AI 인턴 · Answer

안녕하세요, 인프런 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분쯤 코드가 똑같은데 연결이 안되요 게시글을 참고해 보시기 바랍니다. 이 게시물에서는 라우팅 및 컴포넌트 구조 관련 문제 해결 과정을 공유하고 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.