[React] 리액트 IF 문 사용법

2019. 2. 27. 15:14
반응형

[React] 리액트 IF문 사용법





리액트에서는 기본 자바 스크립트에서 사용하던 IF ELSE 방법이아닌


삼항연산자를 이용하는방법이 기본으로 사용된다.


그렇다고 IF ELSE 를 아에 못쓰는것은 아니니 그 예제를 보도록하자 



▼삼항연산자 사용법


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react';
 
class App extends Component {
  render() {
    return (
      <div>
        {
          1 + 1 === 2 
            ? (<div>O</div>)
            : (<div>X</div>)
        }
      </div>
    );
  }
}
 
export default App;
 
cs



▼즉시 실행 함수_IIFE(Immediately Invoked Function Expression)를 이용한 방법




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { Component } from 'react';
 
class App extends Component {
  render() {
    const value = 1;
    return (
      <div>
        {
          (function() {
            if (value === 1) return (<div>O</div>);
            else  return (<div>X</div>);
          })()
        }
      </div>
    );
  }
}
 
export default App;
cs

주로 삼항연사자를 사용해주고 복잡한 조건식을 사용할때에는
웬만하면 JSX 밖에서 로직을 작성하는것이 좋습니다.
하지만, JSX 내부에서 작성해야 한다면,  IIFE 를 사용함



반응형
저작자표시 비영리 동일조건

'Program > React' 카테고리의 다른 글

[React] 리액트 컴포넌트 스타일링_CSS, Sass, CSS Module, styled-components  (0) 2019.04.16
[React] npm / yarn 설치 오류 error An unexpected error occurred  (3) 2019.03.25
[React] 리액트 컴포넌트 생성 & 활용  (0) 2019.03.01
[React] 리액트(react) 설치 및 설정  (0) 2019.02.26

BELATED ARTICLES

more

티스토리툴바