JSX - 엘리먼트를 단순 조건에 따른 렌더

JSX 상에서 조건문을 길게 쓰지 않고 단순하게 엘리먼트를 렌더링 할때 사용한다.
특히 true/false와 같은 조건으로 React 엘리먼트를 렌더할 때 편하다.

<div>
      { this.state.logined && <Profile /> }
</div>

this.state ={ logined : true } 이면 <Profile /> 엘리먼트가 렌더 된다.
<Profile /> 대신에 html 엘리먼트를 넣어도 된다.  (<img src="./test.jpg" /> 이런 거)

 

공식 문서 : https://facebook.github.io/react/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored

Subscribe
Notify of
guest

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

0 댓글
Inline Feedbacks
View all comments
TOP