1. 조건부 렌더링

조건부 렌더링이란 무엇일까요?

• 말 그대로, 조건부로 렌더링을 한다는 뜻이에요.
• 조건부 렌더링은 주로 if나 조건부 연산자와 같은 JavaScript 연산자를 사용해서 구현해요.

조건부 렌더링 사용 예시

• 위의 사진은 저희의 1주차 과제 구현 화면입니다.
• 잘 보면 초록색과 노란색 영역 모두 카드의 구성 요소가 비슷하죠?
  • 공통 data: 썸네일 사진, 제목, 작가명, 평점
• 하지만 초록색 카드에서만 이번주에 업데이트된 제목이 나오는 게 차이점이네요!
• 이럴 때 조건부 렌더링을 이용하면 1개의 컴포넌트로 초록색, 노란색 카드를 전부 구현할 수 있어요!
  • 이건 과제로 낼 테니까 한 번 해보시기를!

그럼 또 다른 예시를 코드로 봐볼까요?

function LoginHeader() {
  return <div>환영해요!</div>;
}

function NotLoginHeader() {
  return <div>로그인을 해주세요.</div>;
}

• 유저가
  • 로그인했을 때는 LoginHeader를,
  • 로그인을 하지 않았을 때는 NotLoginHeader 컴포넌트를 렌더링하고 싶어요.
• 이럴 때! 조건부 렌더링을 사용하면 되겠죠?

<aside> 💡

로그인용 헤더, 비로그인용 헤더를 따로 만드는 것보다 하나의 헤더 컴포넌트에서 조건부 렌더링으로 관리하는 게 훨씬 효율적이에요!

</aside>

function Header({ isLogin }) {
  return <header>{isLogin ? <LoginHeader /> : <NotLoginHeadr />}</header>;
}

export default Header;