간단하고 알기 쉬운 React 마법(07): JSX에서if/else 사용

현재render()의 코드는 다음과 같습니다. src/pages/Detail.js

return 
Hello, {chance.first()}!
;

괄호 안에 있는 ES6 코드는 컴파일할 때 실행되며, 리셋 값을render에 기입하기 때문에, 페이지를 새로 고칠 때마다 무작위 이름을 볼 수 있습니다.그러나 이 코드는 사실상 매우 특수한 코드로 표현식이라고 하는데 변수를 만들거나 다른 유형의 조작을 수행할 수 있는 다른 문장에 비해 대략적으로 하나의 값으로 표시할 수 있음을 나타낸다.사실 차이는 크지 않지만, 나를 믿어라. 이런 차이는 매우 중요하다.JSX에서만 표현식을 사용할 수 있기 때문에 모든 코드를 사용할 수 없습니다.예를 들어 {this.props.message}와 {chance.first()}는 모두 합법적이지만 다음 코드는 합법적이지 않습니다.

{if (chance.first() === 'John') { console.log('Got John');
} else { console.log('Got someone else'); } }

설명, ===은 자바스크립트에서 추천하는 두 값을 비교하는 연산자입니다.만약 네가 지금 ==을 사용한다면 너는 서둘러 바꿔야 한다. 왜냐하면 ==는 두 대비의 값을 전의할 수 있기 때문이다. ===는 결코 할 수 없기 때문에 엄격히 같다고 불린다.지금 너는 아마도 생각할 것이다. "이런 코드를 쓰는 것을 허락하지 않으니 정말 다행이다. 그것은 너무 이해하기 어렵다."확실히 그렇습니다. JSX에서if/else 문장을 사용할 수 없지만, JavaScript는 매우 느슨한 클래스 C 언어입니다.if/else를 대체하기 위해 삼원 연산자를 계승했다는 것을 의미합니다.즉, JSX에서 사용할 수 있는if/else의 대체품이 있는데, 이것은 매우 엄격한 문법이 있다:src/pages/Detail.js

{chance.first() === 'John' ? console.log('Got John')
: console.log('Got someone else') }

이 가능하다, ~할 수 있다,...js

{
    chance.first() == 'John'
    ? console.log('Got John')
    : console.log('Got someone else')
}

만약 네가 원한다면 그를 구성 요소에 추가할 수 있지만, 이것은 단지 예시일 뿐, 다 쓰고 나면 삭제된다.
두 개의 괄호는 설명할 필요가 없지만, 그 중 일부 새로운 것들은 삼원 표현식이라고 부른다. 왜냐하면 그것은 세 부분으로 구성되어 있기 때문이다. (chance.first () = 'John'), 조건이 진실이면 실행 (console.log ('Got John')), 조건이 가짜면 실행 (console.log ('Got someone else)).
중요한 부분은 물음표와 사칭이다. 조건이 진짜 집행인 문장은 물음표 뒤에, 조건이 가짜 집행인 문장은 사칭 뒤에.이해하기 어려울 것 같지만, 그래야만 JSX에서if/else를 사용할 수 있습니다. 좋아하든 싫어하든 다음react 코드에서 여기저기 3원 표현식이 있는 것을 볼 수 있습니다.
더 심각한 것은, 끼워 넣은 삼원 표현식이 물음표 사칭을 포함해서 진짜와 가짜 나무를 형성하는 것을 자주 볼 수 있다는 것이다.JSX는 이렇게 하는 것을 허락하지만 제네바 공약도 이렇게 쓰는 것을 허락하지 않으니 그러지 않는 것이 좋겠다.
그러나 JSX에서 삼원 표현식을 쓰는 장점은 그들의 반환값이 출력에 직접 들어가는 것이다.예를 들면 다음과 같습니다.
src/pages/Detail.js

render() {
    return 

    {
        chance.first() == 'John'
        ? 'Hello, John!'
        : 'Hello, world!'
    }
    
;
}

이 예에서 3원 표현식의 진위 판단 후 실행된 부분은 하나의 문자열만 있고 이 문자열들은 JSX로 전송되어 p 라벨로 렌더링됩니다.그래서 이런 삼원 표현식을 사용할 준비가 되어 있고 그들은 항상 한 줄에 쓰지만 이런 표현식은 남용되기 쉽다.