연산자

연산자 간단정리

1. & : 나머지 연산자. 앞의 값을 뒤의 값으로 나눈 나머지 값.
2. ++ : 변수의 값을 1 증가.
3. • • : 변수의 값을 1 감소.
4. ++a : 전체 수식을 처리하기 전에 적용
5. a- - : 전체 수식을 처리한 후에 적용
6. 표현식 ? True일 때 실행 : False일 때 실행 [ 3항 연산자 ]

• 할당 연산자
  • a += b : a = a + b
  • a -= b : a = a - b
  • a = b : a = a b
  • a /= b : a = a / b
  • a %= b : a = a % b
• 비교 연산자
  • x == y : x와 y의 값이 같다.
  • x === y : x와 y의 값과 타입(type)이 같다.
  • x != y : x와 y의 값이 다르다.
  • x !== y : x와 y의 값이나 타입(type)이 다르다.
  • x > y : x의 값이 y의 값보다 크다.
  • x >= y : x의 값이 y의 값보다 크거나 같다.
  • x < y : x의 값이 y의 값보다 작다.
  • x <= y : x의 값이 y의 값보다 작거나 같다
• 논리 연산자
  • || : or
  • && : and
  • ! : not

1. 연산자의 계산은 단항 연산자( !, ++, - - ) → 산술 연산자 → 비교 연산자 → 논리 연산자 → 할당 연산자 순으로 진행된다.
2. JavaScript에서 true && expression은 항상 expression으로 평가되고 false && expression은 항상 false로 평가된다..
3. 따라서 && 뒤의 엘리먼트는 조건이 true일때 출력이 된다. 조건이 false라면 React는 무시하고 건너뛴다.
4. falsy 표현식을 반환하면 여전히 && 뒤에 있는 표현식은 건너뛰지만 falsy 표현식이 반환된다는 것에 주의할 것.
   아래 예시에서, <div>0</div>이 render 메서드에서 반환된다.

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

1. 엘리먼트를 조건부로 렌더링하는 다른 방법은 조건부 연산자인 3항 연산자를 사용하는 것이다.

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

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      {isLoggedIn
        ? <LogoutButton onClick={this.handleLogoutClick} />
        : <LoginButton onClick={this.handleLoginClick} />
      }
    </div>
  );
}

• 코드의 길이만 신경쓰지 말고,가독성이 좋은 방식을 택하는 것이 더 좋을 수 있다.
• 조건 등이 과하게 복잡하다면, 컴포넌트를 분리하는 것을 고려해보자.