React 커스텀 컴포넌트의 조건부 렌더링 문제 살펴보기
<p>내 React 애플리케이션의 사용자 정의 구성요소에서 조건부 렌더링에 문제가 있습니다. 저는 특정 조건이 충족될 때만 콘텐츠를 렌더링하는 조건부 렌더링용 사용자 정의 구성 요소를 만드는 작업을 해왔습니다. 현재 코드는 다음과 같습니다. </p>
<pre class="brush:js;toolbar:false;">'react'에서 React 가져오기;
function ConditionalRenderComponent({ 조건, 하위 }) {
반품 (
<div>
{조건 및 어린이}
</div>
);
}
기본 ConditionalRenderComponent 내보내기;
</pre>
<p>이 맞춤 구성요소를 사용하는 동안 <code>condition</code>인 경우에도 콘텐츠가 <code>children</code> 액세스하고 실행했습니다. 이는 조건이 <code>false</code>인 경우 맞춤 구성요소 없이 직접 <code>condition && <div></div></code>를 사용하는 동작과 다릅니다. 콘텐츠에 대한 접근이 적절하게 차단되었습니다. </p>
<p><strong>맞춤 구성요소를 사용하는 방법은 다음과 같습니다.</strong></p>
<pre class="brush:js;toolbar:false;">'react'에서 React, { useState, useEffect } 가져오기;
'./ConditionalRenderComponent'에서 ConditionalRenderComponent를 가져옵니다.
함수 앱() {
const [userData, setUserData] = useState(null);
const isLoggedIn = userData !== null;
useEffect(() => {
setTimeout(() => {
setUserData({
사용자 이름: 'john_doe',
이메일: 'john@example.com'
});
}, 1000);
}, []);
반품 (
<div>
<h1>내 앱에 오신 것을 환영합니다</h1>
<ConditionalRenderComponent 조건={isLoggedIn}>
<div>
<p>안녕하세요, {userData.username}님! </p>
<p>귀하의 이메일: {userData.email}</p>
</div>
</ConditionalRenderComponent>
{!isLoggedIn <p>사용자 데이터에 액세스하려면 로그인하세요. </p>}
</div>
);
}
기본 앱 내보내기;
</pre>
<p>위의 예에서 <code>userData</code>는 처음에는 <code>null</code>이며 나중에 서버에서 검색된 데이터로 채워집니다. <code>isLoggedIn</code> 조건은 <code>userData</code> </p>
<p>그러나 <code>isLoggedIn</code> 조건이 <code>false</code>(데이터를 가져오기 전)임에도 불구하고 <code>ConditionalRenderComponent</code> <code>userData</code>에 액세스하고 표시합니다. 이로 인해 "TypeError: null 속성을 읽을 수 없습니다('username' 읽기)"라는 오류 메시지가 나타납니다. </p>
<p><strong>표준 조건부 렌더링과의 비교: </strong></p>
<p>다음은 표준 <code>condition <div></div></code>을 사용한 동작을 비교한 것입니다. </p>
<pre class="brush:js;toolbar:false;">// 표준 조건부 렌더링
{isLoggedIn &&
<div>
<p>안녕하세요, {userData.username} 님! </p>
<p>귀하의 이메일: {userData.email}</p>
</div>
)}
</pre>
<p>위의 코드에서 볼 수 있듯이 표준 방법을 사용하면 조건이 <code>false</code>일 때 <code>userData</code> 값에 대한 액세스가 올바르게 차단됩니다. </p>
<p><code>children</code> 속성이 있는 맞춤 구성요소를 사용할 때 동작에 이러한 차이가 발생하는 이유가 무엇인지 잘 모르겠습니다. 디버깅을 시도하고 해결책을 찾아보았지만 아직 명확한 답을 찾지 못했습니다. </p>
<p> 이러한 현상이 발생하는 이유와 <code>children</code> 속성에 대해 예상되는 조건부 렌더링 동작을 달성하기 위해 맞춤 구성요소를 수정하는 방법에 대한 통찰력이나 제안을 보내주시면 감사하겠습니다. </p>
<p>도움을 주셔서 미리 감사드립니다! </p>
