Skip to content

Latest commit

 

History

History
190 lines (153 loc) · 4.32 KB

값식문, 삼항 연산자.md

File metadata and controls

190 lines (153 loc) · 4.32 KB

값식문, 삼항 연산자

  • 프로그래밍에서 문법을 중요시된다. 문법은 국어사전에서는 “말의 구성 및 운용상의 규칙”이라고 한다. 즉, 프로그래밍에서의 규칙을 의미한다.
  • 값, 식: 삼항연산자, 고차함수
  • 문: if문, for문 등
  • 고차 함수를 사용해야한다.
  • () : 함수를 호출한다는 의미이다.
// JSX 예시
// 틀린 예
<div id={if (condition) {'msg'}}>Hello World!</div>

// Is transformed to this JS, (위 JSX가 아래로 변환된것이다.)
// 틀린 예
React.createElement('div',{id: if(contion) {'msg'}}, 'Hello World!'); ⓐ

const obj = {id : if(condition) {'msg'}} ⓑ

// 옳은 예
ReactDOM.render(<div id={condition? 'msg' : null}> Hello World!</div>,moundMode); ⓒ
  • ⓐ의 if문을 ⓑ 키의 값으로 if문을 넣었다(문을 값으로 넣음) 이것은 에러가 난다. 값이 들어와야 한다.
  • ⓒ 삼항연산자는 값으로 귀결되기 때문에 옳은 예이다.
  • 따라서 JSX 내부에 삼항연산자를 쓸 수 있지만 if문을 사용할 수 없다.

다른 예시)

// 틀린 예
{
  () => {
    const rows = [];
    // for문
    for (let i = 0; i < objectRows.length; i++) {
      rows.push(<ObjectRow key={i} data={objectRows[i]} />);
      return rows;
    }
  };
}

// 옳은 예
{
  objectRows.map((obj, i) => {
    <ObjectRow key={i} data={obj} />;
  });
}
  • for문은 틀린 예시이다. for문 대신 고차함수인 map()을 사용하면 된다.
// 틀린 예, 즉시실행 함수이다.
{
  () => {
    if (contidionOne) return <span>One</span>;
    if (contidionTwo) return <span>Two</span>;
    else conditionOne;
    return <span>Three</span>;
  };
}

// 옳은 예
{
  conditionOne && <span>One</span>;
}
{
  contidionTwo && <span>Two</span>;
}
{
  !contidionTwo && <span>Three</span>;
}
  • 즉시 실행 함수의 틀린 예시다.

정리

  • JSX를 사용할 때 내부에 값 혹은 식은 들어갈 수 있지만 문을 들어 갈 수 없다. (if문, for문 , switch 등 x) 그렇기 떄문에 고차 함수를 사용해야한다.

삼항연산자

삼항 연산자 예시

조건 ? 참 : 거짓(조건 ? 식 : 식);
  • 삼항연산자 참과 거짓에는 식이 들어가야 한다. 식에는 if문, for문이 들어가면 안된다.
  • 밑에서 가독성이 나쁜 삼항 연산자에 예시이다.
// 코드를 해석하기 어렵다.
function example() {
  return condition1
    ? value1
    : condition2
    ? value2
    : condition3
    ? value3
    : value4;
}

// if else 반복
function example2() {
  if (condition1) {
    return value1;
  } else if (condition2) {
    return value2;
  } else if (condition3) {
    return value3;
  } else {
    return value4;
  }
}
  • 이러한 경우 switch 문으로 바꾸는것이 가독성에 좋다.
// Switch 문 이용하는 것이 유용하다.
function example() {
  switch (key) {
    case condition1:
      break;
    case condition2:
      break;
    case condition3:
      break;
    default:
      break;
  }
}

다른 예시

const example = condition ? (a === 0 ? "zero" : "positive") : "negative";
  • 중첩된 삼항연산자를 가독성을 위해 ()로 감싸야 한다.

다른 예시

const welcomeMessage = (isLogin) => {
  const name = isLogin ? getName() : "이름없음";
  return `안녕하세요 ${name}`;
};

// 위를 바꾼 예시
const welcomeMessage = (isLogin) => {
  if (isLogin) {
    return `안녕하세요 ${getName()}`;
  }
  return "이름없음";
};
  • 위는 로그인이 있으면(isLogin) getName()이름을 반환을 name변수가 넣어 return 하는 코드이다.
  • 삼항 연산자를 if문으로 풀어서 보면 밑에 코드 처럼 된다.

밑은 나쁜 예시에 대한 설명이다.

function alertMessage(isAdult) {
  isAdult ? alert("입장이 가능합니다.") : alert("입장이 불가능합니다.");
}
// 추천하는 예시
function alertMessage(isAdult) {
  if (isAdult) {
    alert("입장이 가능합니다.");
  } else {
    alert("입장이 불가능합니다.");
  }
}
  • 위 같은 경우 삼항 연산자보다 if문으로 쓰는 것을 추천한다.

정리

  • 삼항 연산자를 쓰는 경우는 변수에 할당하거나 함수를 값으로 return 하는 경우에 사용하는 것을 추천한다.