<리액트 기초> 조건부 연산자

 

* 리액트에서의 조건문

 - 리액트의 렌더링 부분에서 jsx문법을 사용할 때 조건문 if를 사용할 수 없다. 

 

 - 정확하게 말하자면 억지로 if문을 사용하려고하면 매우 지저분 해진다.

 

 - 이는 앞서 봤었던 map에서도 마찬가지인데 for문 대신 map으로 반복문을 만들었었다.

 

 - 그렇다면 jsx에서 조건문을 어떻게 만드는 것이 좋을까? state의 result라는 배열에 값이 있을 경우에만 그 값을 이용한 태그를 만들고 싶다고 가정하자.

 

    renderAverage = () => {
        const { result } = this.state;
        return (
            result.length === 0 
                ? null 
                : <> 
                <div>
                    결과 : {result}
                </div>
                </>
        )
    };

    render() {
        const { message } = this.state;
        return (
            <>
                <div>
                    {message}
                </div>
                {this.renderAverage()}
                
            </>
        );
    }

 

 - 아래를 보면 render을 통해서 렌더링을 시키려고 하고 있다. result를 이용하여 태그를 만드는 것이 복잡해 질 수 있으므로 별도의 함수로 위로 올렸음을 알 수 있다.

 

 - 조건부 연산자를 사용한 것을 보자. 배열의 길이가 0 인지를 ? 연산자로 체크한다. true이면 null 을 내보낸다.

 

 - 만약 false이면 : (콜론) 뒤의 값을 내보낸다. 즉 배열이 존재하기만 하면 태그가 랜더링 된다.

 

 - 참고로 null은 jsx문법에서 태그가 없다는 의미로 사용된다.

 

 - 만약 자바스크립트에서 작성하던 조건문이나 반복문을 쓰고싶다면 jsx에서는 못 쓰지만 {} 중괄호 안에서 함수로 작성하면 사용 가능하다. 즉 중괄호안에 익명함수를 선언하고 즉시실행시키면 for문이나 if문을 사용할 수 있다. 하지만 { ( ) => {...}( ) } 와 같이 매우 지저분해지므로 되도록 피하도록 하자.

 

 

---

 

 

 

참고

 

 

 이 글은 ZeroCho 님의 리액트 무료 강좌를 수강하며 개인적으로 정리하며 쓰는 글입니다.

 

 

 

 

인프런

웹 게임을 만들며 배우는 React - 인프런

 

유튜브

리액트 무료 강좌(웹게임)

?연산자와 ??연산자

<자바스크립트> ? 연산자와 ?? 연산자