컴포넌트 안에서 쓰는 if/else

if/else

function Component() {
  if ( true ) {
    return <p>참이면 보여줄 HTML</p>;
  } else {
    return null;
  }
} 

function Component() {
  if ( true ) {
    return <p>참이면 보여줄 HTML</p>;
  } 
  return null;
} 

❗ else 생략이 가능하다

JSX안에서 쓰는 삼항연산자

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 

삼항연산자는 중첩 사용도 가능하다

function Component() {
  return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : ( 2 === 2 
            ? <p>안녕</p> 
            : <p>반갑</p> 
          )
      }
    </div>
  )

❗ 남이 읽었을 때 보기 싫은 코드는 좋은코드는 아닙니다

&& 연산자로 if

true && false;
true && true;

❗ 둘다 true면 전체를 true로 바꿔주세요
&& 기호를 중첩해서 여러개 쓰면 && 사이에서 처음 등장하는 falsy 값을 찾아주고 그게 아니면 마지막 값을 남겨준다고 생각하면 됩니다

 return (
    <div>
      {
        1 === 1
        ? <p>참이면 보여줄 HTML</p>
        : null
      }
    </div>
  )
} 
function Component() {
  return (
    <div>
      {
        1 === 1 && <p>참이면 보여줄 HTML</p>
      }
    </div>
  )
}

switch / case 조건문

function reducer(state, 액션){
  switch (액션.type) {
    case '수량증가' :
      return 수량증가된state;
    case '수량감소' : 
      return 수량감소된state;
    default : 
      return state
  }
}

1. switch (검사할변수명){} 이거부터 작성하고
2. 그 안에 case 검사할변수명이 이거랑 일치하냐 : 를 넣어줍니다.
3. 그래서 이게 일치하면 case : 밑에 있는 코드를 실행해줍니다.
4. default : 는 그냥 맨 마지막에 쓰는 else문과 동일합니다.