조건부 랜더링

• 특정 조건이 참인지 거짓인거에 따라 다른 결과물을 랜더링 하는 것을 의미

• JavaScript에서는 null, false, undefined를 랜더링 하면 아무것도 나타나지 않는다.

Hello.js

import React from 'react'; //리액트를 불러와서 사용하겠다.

//비구조 할당 또는 구조 분해 문법을 사용한다면 아래처럼 작성
function Hello({color, name, isSpecial}) {
    return (
        <div style={{ color }}>
            { isSpecial && <b>*</b> }
            안녕하세요 {name}
        </div>
    ) 
}

Hello.defaultProps = {
    name : '이름없음'
}

export default Hello; //Hello라는 컴포넌트를 만들어서 내보내겠다.

삼항 연산자를 이용해 조건부 랜더링을 할 수 있다.

function Hello({color, name, isSpecial}) {
    return (
        <div style={{ color }}>
            { isSpecial ? <b>*</b> : null }
            안녕하세요 {name}
        </div>
    ) 
}

&&연산자 사용 - &&를 사용하면 첫번째로 나오는 false값을 반환하며 없다면 마지막 값 반환

function Hello({color, name, isSpecial}) {
    return (
        <div style={{ color }}>
            { isSpecial && <b>*</b> }
            안녕하세요 {name}
        </div>
    ) 
}

컴포넌트의 props값을 설정하게 될 때 만약 props이름만 작성하고 값 설정을 생략한다면, 이를 true로 간주한다. isSpescial === isSpecial={true}

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial />
      <Hello color="pink"/>
    </Wrapper>
  );
}

---

단축 평가 논리 계산법

console.log(true && 'hello'); // hello
console.log(false && 'hello'); // false
console.log('hello' && 'bye'); // bye
console.log(null && 'hello'); // null
console.log(undefined && 'hello'); // undefined
console.log('' && 'hello'); // ''
console.log(0 && 'hello'); // 0
console.log(1 && 'hello'); // hello

---

이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C