모든 초보자가 알아야 할 React.js의 조건부 렌더링.

이 게시물에서는 React.js 프로젝트에서 조건부 렌더링을 사용하는 방법에 대해 설명합니다.

두 가지 방법을 사용하여 jsx 요소를 조건부로 렌더링할 수 있습니다.

1. { condition && jsx elements }

{ condition ? jsx element : other jsx element }

처음에는 사소해 보일 수 있지만 프로젝트에서 이 항목을 많이 사용하게 되므로 반응 개발의 핵심을 형성합니다.

좋아, 그들을 배울 수 있습니다.

1. { 조건 && jsx 요소 }

화면에 사용자에게 표시할 요소/데이터가 없을 때 이것을 사용합니다.

예를 들어,

사용자가 처음으로 웹사이트에 들어가 일부 데이터를 추가하려고 할 때 이 조건부 렌더링 코드를 사용하여 "항목이 없습니다"또는 "입력한 데이터가 없습니다"또는 이와 유사한 것을 말할 수 있습니다.

return(
<div>

{ !data && <div> You have entries </div>}

<input type="text" placeholder="Write something" value={input_variable}></input> 
</div> 

사용자가 데이터를 입력한 후 조건은 이제 거짓이므로 아무 것도 렌더링하지 않습니다.

React의 강력하면서도 단순한 개념.

여기에서 이 개념을 많은 방법으로 사용할 수 있지만 저는 이 목적을 위해 이 조건문을 사용합니다.

다른 논리를 사용하는 경우 의견에 언급하십시오.

2. { 조건 ? jsx 요소 : 다른 jsx 요소 }

이것은 파악하기에 더 발전된 것이지만 많은 사용 사례에서 매우 유용합니다.

이 조건문은 이 게시물에서 언급한 첫 번째 항목의 상위 집합으로 취급할 수 있습니다.(수학자들은 이 개념을 잘 알고 있을 것입니다.)

The first conditional rendering concept just displays only one jsx element if it is true.

The second one will help you display either one of the two elements you try to display with a conditional.

위의 내용을 이해하지 못했다면 예를 들어 설명하겠습니다.

따라서 사용자 입력이 잘못된 경우 오류 메시지를 렌더링하고 사용자 입력이 올바른 경우 입력 값을 렌더링하려는 경우 이 조건부 렌더링 개념을 사용할 수 있습니다.

<div>
<input type="text" placeholder="Write something" value={input_variable}></input> 

{!error ? <div>The input data the user entered {inputdata}</div> : <div>{error_message}</div>}
</div>

이 조건부 렌더링 개념을 리액트로 처음 배우기 시작했을 때 무슨 일이 일어나고 있는지 이해하기가 매우 어려웠습니다.

하지만 이 주제에 대한 많은 기사를 꾸준히 읽고 YouTube 및 Udemy 비디오를 보면서 이 조건부 렌더링 항목을 이해하게 되었고 이제는 내 프로젝트에서 이를 사용하는 방법을 알게 되었습니다.

어렵다면 이 글을 저장해 두었다가 몇 번이고 읽어보시면 이해하실 수 있을 것입니다.

이것이 프로젝트에서 조건부 렌더링을 사용하는 방법입니다.

궁금한 점이 있으면 댓글로 질문해 주시면 해결해 드리겠습니다.

읽어 주셔서 감사합니다!!

내 포트폴리오를 확인하십시오: Gautham's portfolio

내 블로그를 확인하세요: coding-magnified.tech

저에게 감사하거나 저를 응원하고 싶다면 아래 링크로 저에게 커피를 사주실 수 있습니다.

내 다른 기사:

.

.