Cleaner React:조건 렌더링

일반적으로 React 어셈블리는 조건부 렌더링으로 인해 이해하기 어려워집니다.처음에는 간단한if/else 또는 삼원 연산자가 전체적인 가독성에 유리한 것 같지만 시간이 지날수록 다른if/else 또는 삼원 연산자가 추가될 수 있습니다.
이 문제를 더욱 복잡하게 하는 것은 조건 연산자가 여러 차례 끼워져 있다는 것이다. 불행하게도 이것은 너무 쉽다.
먼저 React에서 조건부 렌더링을 어떻게 하는지 본 다음에 몇 가지 실험에 깊이 들어가면 이러한 실험들은 React에서 조건부 렌더링을 하는 더욱 읽을 수 있는 방법을 제공할 수 있다.

조건 렌더링 스타일

간단한 장면
장면:특정 속성 "isLoggedIn"을 지정하여 로그인 구성 요소와 등록 구성 요소를 표시합니다.

사용 & & &
일부 빠른 조건 논리에 대해 자주 '& &' 를 사용하면 삽입하기 쉽다.

const Session = ({ isLoggedIn }) => {  
 return (  
   <>  
     {isLoggedIn && <Login />}  
     {!isLoggedIn && <SignOut />}  
   </>  
 );  
};  

If/Else 문 사용
이 간단한 장면을 감안하면, 여기에guard자구가 하나 있는데, 이것은 '&' 보다 더 읽을 만하다.

const Session = ({ isLoggedIn }) => {  
 if (isLoggedIn) {  
   return <SignOut />  
 }  

 return <Login />  
};  

삼원 연산자 사용
이것도 이해하기 쉽다.말 한마디 할 수 있어서 다행이다.

const Session = ({ isLoggedIn }) => isLoggedIn ? <SignOut /> : <Login />;  

복잡한 장면
장면: 주어진 속성 "isLoggedIn"의 경우 로그인 구성 요소와 등록 구성 요소를 표시하고, "isUnicorn"로고가true이면 "UnicornLogin"구성 요소도 표시합니다.

사용 & & &
이거 큰일났다.한 가지 조건이 있어야만'&&&'를 적게 쓸 수 있다는 것은 분명하다.

const Session = ({ isLoggedIn, isUnicorn }) => {  
 <>  
   {isLoggedIn && !isUnicorn && <Login />}  
   {!isLoggedIn && isUnicorn && <isUnicorn />}  
   {!isLoggedIn && !isUnicorn && <SignOut />}  
 </>;  
};  

If/Else 문 사용
그다지 무섭지는 않지만, 다른 구성 요소로 되돌아오는 모든 구성 요소를 포장하고 싶다면, 이것은 일을 곤란하게 할 것이다.

const Session = ({ isLoggedIn, isUnicorn }) => {  
 if (isLoggedIn) {  
   return <SignOut />;  
 } else if (isUnicorn) {  
   return <UnicornLogin />;  
 };

 return <Login />;  
};  

삼원 연산자 사용
마찬가지로 불가피하게 더 많은 변화가 발생할 때if/else 문장을 사용하는 것도 같은 어려움을 겪을 수 있다.

const Session = ({ isLoggedIn, isUnicorn }) => {  
 if (isLoggedIn) {  
   return <SignOut />;  
 }

 return isUnicorn ? <UnicornLogin /> : <Login />;  
};  

조건 고트차스
현재, 우리는 React에서 조건 렌더링을 어떻게 사용하는지 이해했다. 우리는 특정한 예시를 보았는데, 그 중에서 조건 렌더링은 예상한 효과에 도달하지 못할 수도 있다.

논리 "&"연산자

매핑 시 0 표시
'& &' 를 사용하여 데이터 집합의 길이를 검사한 다음 이 데이터 집합에 비추면 목록이 비어 있을 때 '0' 을 나타냅니다.
켄트 C 도드는 최근 그의 문장https://kentcdodds.com/blog/use-ternaries-rather-than-and-and-in-jsx에서 이 점을 강조했다
데이터가 비어 있을 때 다음 코드는 '0' 을 나타냅니다.

const RenderData = ({ data }) =>  data.length && data.map(...);  

이것은 '& &' 가 아닌 삼원 연산자를 사용하여 해결할 수 있다.

const RenderData = ({ data }) =>  data.length > 0 ? data.map(...) : null;  

이것도if/else 문장을 사용하여 해결할 수 있다.

const RenderData = ({ data }) =>  data.length > 0 ? data.map(.const RenderData = ({ data }) => {  
 if (data.length === 0) return null;

 return data.map(...)  
}  

구성 요소에 0 표시
이것은 본 기기에 특정된 것이지만, 구성 요소를 조건부로 나타내고 조건을 전달할 때, 무의식중에 0을 나타낼 수 있습니다.이로 인해 프로그램이 붕괴되고 "변하지 않는 충돌: 구성 요소에 텍스트 문자열을 보여야 합니다."라는 오류 메시지가 표시됩니다.
메시지가 0이면 애플리케이션이 충돌합니다.

message && <Text>{message}</Text>  

네스트된 3분체
만약 네가 조건이 하나 있다면, 3분의 1은 좋은 것이다.그러나 다른 검사와 다른 검사를 재구성하지 않고 빠르게 추가하는 것은 너무 쉽다.
이것은 간단한 예이다. 우리가 렌더링한 모든 구성 요소에 5-10개의 선 길이가 있다면 어떻게 될지 상상할 수 있다.

const RenderData = ({ data }) => {  
 return data.length === 0 ? null  
   : data.length === 1  
   ? <SingleItem data={data} />  
   : data.length === 2  
   ? <DoubleItem data={data} />  
   : <MultiItem data={data} />  
}  

더 좋은 조건을 만들다
우리는 React에서 기본적인 조건문을 어떻게 작성하는지, 그리고 피해야 할 함정들을 이해했다.React에서 더 나은 조건 코드를 작성하는 방법을 생각해 보겠습니다.

조건 연산자 어셈블리
만약 당신의 뇌가 해석만 하고 조건문이 필요하지 않다면 JSX를 읽는 것이 더욱 쉽다고 생각합니다.그러면 우리는 어떻게 조건 연산자를 XML로 씁니까?
"RenderIf"라는 어셈블리를 생성하고 부울 속성 "isTrue"를 가져와 하위 레벨을 렌더링하는 방법을 생각해 보겠습니다.

export const RenderIf = ({ children, isTrue }) => isTrue ? children : null;

RenderIf.propTypes = {  
 children: node.isRequired,  
 isTrue: bool.isRequired,  
};  

RenderIf 구성 요소를 사용하여 예제를 작성할 때 주로 XML에 집중합니다.그러나, 여전히 일부 볼 논리는 정리해야 한다.

const RenderData = ({ data }) => {  
 return (  
   <>  
     <RenderIf isTrue={data.length === 1}>  
       <SingleItem data={data} />  
     </RenderIf>  
     <RenderIf isTrue={data.length === 2}>  
       <DoubleItem data={data} />  
     </RenderIf>  
     <RenderIf isTrue={data.length > 2}>  
       <MultiItem data={data} />  
     </RenderIf>  
   </>  
 );  
}  

"RenderIf"구성 요소를 포장하여 부울 로직을 정리할 수 있습니다.

const IfSingleItem = ({ children, data }) => <RenderIf isTrue={data.length === 1}>{children}</RenderIf>  
const IfDoubleItem = ({ children, data }) => <RenderIf isTrue={data.length === 2}>{children}</RenderIf>  
const IfMultiItem = ({ children, data }) => <RenderIf isTrue={data.length > 3}>{children}</RenderIf>

const RenderData = ({ data }) => {  
 return (  
   <>  
     <IfSingleItem data={data}>  
       <SingleItem data={data} />  
     </IfSingleItem>  
     <IfDoubleItem data={data}>  
       <DoubleItem data={data} />  
     </IfDoubleItem>  
     <IfMultiItem data={data}>  
       <MultiItem data={data} />  
     </IfMultiItem>  
   </>  
 );  
}  

우리 케이크도 먹고, 그것도 먹고!
나는 개인적으로 더 많은 성명성 React를 읽는 것을 좋아하지만, 내가 언급하지 않은 결함 중 하나는, RenderIf 구성 요소의 하위 단계는 우리의 조건이false일지라도 렌더링 주기를 겪는다는 것이다.RenderIf는 여전히 JSX이지 순수한javascript가 아니기 때문이다.
그렇다면 우리는 어떻게 대처해야 하는가?
나는 공교롭게도 RenderIf 바벨 플러그인을 썼는데, 바로 이렇게 한 거야!너는 나의 GitHubhere에서 코드를 찾을 수 있다.
본질적으로 이 플러그인은 다음과 같은 코드를 사용합니다.

<RenderIf isTrue={someCondition}>
  <span>I am the children</span>
</RenderIf>

그것을 이렇게 만들다.

{someCondition ? <span>I am the children</span> : null

따라서, 우리는 우리의 성명성 문법을 얻었고, 그것이 전송될 때, 우리는 더욱 높은 성능의 버전을 얻었다.또한 이 플러그인을 사용하면 RenderIf 구성 요소를 작성할 필요가 없습니다.🎉

언제 재구성
통상적으로 하나의 구성 요소에 복잡도의 누적이 존재하면 재구성이 필요한 구성 요소가 존재한다는 것을 나타낸다.언제, 어떻게 재구성하는지 정확히 알기는 어렵지만, 다음은 당신이 고려할 수 있는 일반적인 경험 법칙들입니다.

100줄 이상의 코드
어셈블리를 100선 이하로 유지합니다.100-250줄의 영역에 들어가기 시작했을 때 정말 재구성을 고려해야 한다.만약 500여 줄의 코드가 있다면 가능한 한 빨리 재구성해야 한다.

고권 복잡도
코일의 복잡도는 코드를 통과하는 경로수다.간단한if/else 블록이 있다면 그 블록의 링 복잡도는 2이고, 만약if/else if/else if/else if/else if/else 블록이 있다면 링 복잡도는 5이다.
ESLint complexity rule를 사용하여 이 작업을 강제로 수행할 수 있습니다.
어떤 복잡도가 적당한지는 당신에게 달려 있지만, 4-5 정도는 보통 좋은 출발점이다.

세정제 반응
우리는 주의력을 분산시키는 문법을 추출하고 언제 재구성할지 알고 더욱 뚜렷한 반응을 작성할 수 있다.
RenderIf와 같은 도움말 구성 요소를 만드는 것은 선언적 구문에 조건 논리를 추출하는 방법을 설명하는 예입니다.이것은 주로 XML을 받아들이기 때문에 당신의 뇌를 더욱 쉽게 한다.이 아이디어를 바탕으로 우리는 조수 구성 요소를 포장하고 더욱 풍부한 조건 구성 요소 집합을 만들어서 위아래 문장을 추가할 수 있다.
하루가 끝날 때, React가 아무리 깨끗해도 버그가 생기기 쉬우며, 전혀 재미없는 거대하고 복잡한 구성 요소이것은 좋은 실천으로 언제 재구성을 하는지 알고 재구성이 필요하다는 것을 알 때 규칙을 준수하는 것이다.
즐거운 코딩, 당신의 반응을 깨끗하게 유지!
ZEAL 블로그에 최초 게시here
‍