조건부 렌더링

react.js 공식문서 MainConcept 7. 조건부 렌더링

 

1. 조건부 렌더링이란?

조건에 따라서 렌더링 여부를 결정하거나, 렌더링 할 요소를 선택하는 것입니다.

공식문서에서는 컴포넌트를 조건에 따라 렌더링 하는 것을 다루었으나, 꼭 컴포넌트가 아니더라도 class명이나 분기가 필요한 곳 어디서든 사용이 가능합니다.

 

2. 사용하는 이유

애플리케이션 상태에 따라 원하는 컴포넌트만을 렌더링할 수 있어 컴포넌트 관리 및 상태관리가 더욱 편리해집니다.

 

3. 사용방법

 1) jsx안에서 삼항연산자 사용

See the Pen Conditional Rendering Example by sujeong91 (@sujeong91) on CodePen.

 

 2) jsx안에서 논리연산자 사용

See the Pen Inline If-Else with Logical && Operator by sujeong91 (@sujeong91) on CodePen.

 

 3) jsx밖에서 if문 사용

See the Pen Preventing Component Rendering by sujeong91 (@sujeong91) on CodePen.

 

4. 적용

 1) 로그인 여부에 따른 화면 전환

 2) 클래스 존재여부에 따른 ux변화

 3) 컴포넌트의 렌더링 막기