조건부 렌더링
- 어떠한 조건에 따라서 렌더링이 달라지는 것
사용 예
- greeting 컴포넌트에서 isLoggedIn이 ture이면 UserGreeting을 return
- isLoggedIn이 false이면 GuestGreeting을 return
javascript의 Truthy와 Falsy
- truty : ture는 아니지만 true로 여겨지는 값
- falsy : false는 아니지만 false로 여겨지는 값
Element Variables
- 리액트 엘리먼트를 변수처럼 사용할 수 있음(button)
Inline Conditions
- 조건문을 코드 안에 집어넣는것
Inline If
- &&연산자를 사용
- unreadMessages.length가 0보다 크면 렌더링
Inline If-else
ex1)
ex2)
- 삼항연산자 사용
- ex2처럼 element를 사용할 수도 있음
Component렌더링 막기
- null을 리턴하면 렌더링 되지 않음
- props.warning의 값이 true인 경우 경고return
- false일 경우에는 아무것도 출력하지 않음
