명확한 예제와 자세한 설명을 통해 React 조건부 렌더링에서 '예기치 않은 토큰'구문 오류를 해결하는 방법을 알아보십시오. ---이 비디오는 https://stackoverflow.com/q/76663032/에 대한 질문을 기반으로합니다. '스택 오버 플로우'웹 사이트에서 https://stackoverflow.com/u/521624/). 이 훌륭한 사용자와 StackexChange 커뮤니티 덕분에 공헌에 감사드립니다. 대체 솔루션, 주제, 주석, 개정 기록 등의 최신 업데이트/개발과 같은 독창적 인 콘텐츠 및 더 자세한 내용은 이러한 링크를 방문하십시오. 예를 들어, 원래 제목은 다음과 같습니다. CC BY-SA BY-SA.SA.HTTPS.com/Help/Help/Help/licensing the 'is'is 'is'is is 'render https.c.help/licensing에서 라이센스가 부여 된 컨텐츠에서 조건부 렌더링에 대한 예기치 않은 토큰. BY-SA 4.0 '(https://creativecommons.org/licenses/by-sa/4.0/) 라이센스 및 원본 답변 게시물은'CC Bysa 4.0 '(https://creativecommons.org/licenses/by-sa/4.0/) 라이센스에 따라 라이센스가 부여됩니다. 당신에게 어떤 것이 보이면, vlogize [at] gmail [dot] com에서 저를 보내 주시기 바랍니다. --- React에서 조건부 렌더링에서 예상치 못한 토큰 오류를 반응 할 때, 특히 구성 요소 렌더 로직에 JSX를 사용하는 경우 매우 실망 스러울 수있는 다양한 구문 오류가 발생할 수 있습니다. 개발자가 직면 한 일반적인 문제 중 하나는 조건부 렌더링에서 악명 높은 예상치 못한 토큰 오류입니다. 이 안내서에서는이 문제의 구체적인 예, 그것이 어떻게 발생하는지, 그리고 그것을 고치는 방법을 탐색 할 것입니다. 문제를 이해하면 API 또는 React의 상태 관리 도구에서 가져온 게시물을 렌더링하고 있다고 생각합니다. 특정 기준에 따라 이러한 게시물을 조건부로 표시하려고 시도 할 수 있습니다 (예 : 게시물이 성공적으로 해결 된 경우 및 사용 가능한 게시물이있는 경우). 그러한 시나리오에서는 다음과 같은 것처럼 보이는 코드 스 니펫을 작성할 수 있습니다. [[[이 텍스트 또는 코드 스 니펫을 공개하려면 비디오 참조]] 여기에서 구문 오류를 실수로 트리거 할 수 있습니다. 오류 메시지는 다음과 같은 내용을 읽을 수 있습니다. 이 문제를 해결하기 위해 솔루션을 세분화하려면 React 구성 요소의 조건부 논리를 더 잘 구성해야합니다. 코드 스 니펫을 단계별로 수정하는 방법을 해부합시다. 1. 유효한 JSX를 반환하는 것의 중요성 조건부 렌더링 요소를 위해 JSX의 && 운영자를 활용할 때 JavaScript 문을 실행하는 것이 아니라 유효한 JSX를 반환해야한다는 것을 기억해야합니다. 이 경우 값을 반환하는 것처럼 함수 (DisplayPosts (Posts))을 호출하려고하지만 실제로 원하는 것은 JSX 출력입니다. 2. 구문 수정 여기에 이전 코드 스 니펫의 수정 된 버전은 다음과 같습니다. [[이 텍스트 또는 코드 스 니펫을 공개하려면 비디오 참조] 3. 변경 사항 설명 조각 사용 : 반응 단편 (<> ... )은 JSX가 단일 루트 요소를 반환해야하기 때문에 여러 요소를 래핑하는 데 사용됩니다. 이렇게하면 게시물과 버튼이 모두 단일 리턴 노드로 포장되도록합니다. JSX 내부에 세미콜론이 없음 : DisplayPosts (게시물) 후 세미콜론을 제거했습니다. 이 세미콜론은 JSX의 흐름을 깨뜨 렸기 때문에 구문 오류를 일으켰습니다. 결론 예상치 못한 토큰 구문 오류가 발생하는 것은 React에서 발생하는 동안 걸림돌이 될 수 있습니다. 그러나 조건부 렌더링이 유효한 JSX를 반환하고 REACT 단편을 올바르게 사용하도록하면 이러한 문제를 효과적으로 제거 할 수 있습니다. JSX의 구문 문제를 기억하고 이러한 명확한 조정으로 구성 요소가 원활하게 실행되고 예상대로 렌더링됩니다. 이 구조화 된 구문을 자신의 프로젝트에 적용하여 React Journey를 향상 시키십시오!
