조건부 렌더링

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

 

1. 조건부 렌더링이란?

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

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

 

2. 사용하는 이유

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

 

3. 사용방법

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

 

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

 

 3) jsx밖에서 if문 사용

 

4. 적용

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

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

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