Conditional-rendering

HOGGY'S 

APPLE PARADISE

CIDER 

지금보니 이름이 CIDER네 

정확한 뜻이 궁금해서 찾아보니 CIDER는 사과주라는 뜻이다. 그리고 한국과 일본에서 알콜이 없는 탄산음료를 칭하는 말이라고 한다... 충격

 

강한 탄산과 낮은 도수의 사과음료같은 사과술이 일본에 전해지면서 의미가 변해 사이다가 탄산이 있는 과일맛 음료를 가리키게 된 것으로 추측되며, 이에 해당하는 재플리시サイダー가 한국에까지 그대로 전해지며 콩글리시에 편입된 것이다. 영어로 이러한 음료를 가리키는 표현은 'Lemon-lime soft drink'이고, 영어권에서 이를 지칭할 때는 스프라이트, 7up 같은 상표명으로 부르는 경우가 많다. 외국에서 탄산음료를 '사이다'라고 하지 않도록 주의할 것.

네..😮

 

 

  조건부 렌더링

 모냐 이 한글 + 영어 는.. 

사실 render가 그렇게 익숙한 단어는 아니였는데, 게임개발 배우면서 익숙해졌다. 

Render(hWnd)인가? 에이치쭝으로 외웠는데... 뜻은 아마도 핸들... 오늘 진짜 의식의 흐름 미쳤다

어쨌든 프로그래밍에서 render는 작업물의 결과를 출력하는 것으로 쓰이는 것 같다... 

 

 말 그대로 조건에 따라 렌더링을 다르게 하는 것을 의미한다.

같은 페이지지만 처음 방문할 때, n(n>1)번째 방문할 때 다르게 인사하고 싶다면...?!

회원과 비회원... 비슷하지만 조금 차별을 두고 싶다면?! 

글 쓰는 화면은 동일하게 하고 등록이랑 수정이란 이름만 바꿔서 쓰고 싶다면...? 

조건부 렌더링을 쓰면 됩니다😘

 

  사용방법 - if, &&, 삼항 연산자, optional chaining

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

//출처 : ko.reactjs.org

&&을 이용해서, 앞의 조건이 참이면 뒤를 보여주는 식으로 조건부를 넣을 수 있다. 

* true && expression ->언제나 참 (*/ω＼*)

  flase && expression -> 언제나 거짓 ( ´･･)ﾉ(._.`)

 

falsy 표현식을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만
falsy 표현식이 반환된다는 것에 주의해주세요.
아래 예시에서, <div>0</div>이 render 메서드에서 반환됩니다.

render() {
  const count = 0;  return (
    <div>
      {count && <h1>Messages: {count}</h1>}    </div>
  );
}

// 출처 : ko.reactjs.org

이게 무슨 소리란 말인가?! 내 글씨는 왜 커졌단 말인가,.,,

위 코드에서 count = 0; 즉 falsy 값, 그래서 그 뒤의 expression( <h1> Message: {count} )는 건너뛰고 렌더링 하지 않는다. 그러나 count = 0; 자체는 존재하는 값이므로 앞의 count 부분은 그 값(0)으로 렌더링 된다.

 

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

// 출처 : ko.reactjs.org

 조건 ? 참일 때 실행 : 거짓일 때 실행

현재 로그인 상태에 따라서, 유저가 로그인 중인지 아닌지를 보여준다.

isLoggedIn이 참이면 "The user is cureently logged in."

isLoggedIn이 거짓이면 "The user is not logged in." 으로 렌더링 된다!

태그 자체에 걸 수도 있다. 

 

 조건이 너무 복잡하다면 컴포넌트를 분리하기에 좋은 때 일 수 있다. - 리액트白