ReactJS 팁 및 요령: 단락 조건부 UI 렌더링 방지
2346 단어 frontendjavascriptwebdevreact
지난 몇 년 동안 저는 ReactJS로 작업했습니다.
단락 조건부 예기치 않은 UI 렌더링이라는 일반적인 것으로 시작하겠습니다.
단락 조건문이란 무엇입니까?
이 조건은 UI 구성 요소를 렌더링하는 간결한 방법입니다.
단락 조건부 접근법의 예:
const Component = ({ number = 0 }) => number && <div>Current: {number}</div>
이전에 언급한 구성 요소는
0
역효과를 낼 것입니다.빈 UI 대신 0을 렌더링하는 이유는 무엇입니까?
JavaScript의 비교 연산자는 부울 값을 반환하지 않고 비교된 값 중 하나를 반환합니다.
위에서 언급한 경우
number
값을 확인하면 zero
렌더링됩니다.예기치 않은 UI 렌더링을 피하는 방법
이 문제를 피하는 방법은 삼항 비교를 사용하여 두 시나리오에서 무엇이 반환되는지 명시하는 것입니다.
다음과 같은 삼항 비교를 사용하여
Component
를 수정합니다.const Component = ({ number = 0 }) => (number ? <div>Current: {number}</div> : null)
number
변수의 값이 0인 것을 고려하면 3항에서 두 번째 옵션인 null
를 반환합니다. 이 경우 React는 null
값이기 때문에 렌더링하지 않습니다.마무리
이 기사 시리즈가 도움이 된다고 생각하거나 몇 가지 프로그래밍 주제에 대해 논의하고 싶다면 언제든지 @helderburato으로 저에게 연락하십시오.
감사! ⚡️
Reference
이 문제에 관하여(ReactJS 팁 및 요령: 단락 조건부 UI 렌더링 방지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/helderberto/reactjs-tips-tricks-avoid-short-circuit-conditional-ui-rendering-j5a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)