React의 조건부 렌더링

컴포넌트의 상태에 따라 일부 조건을 기반으로 react 컴포넌트 전체 또는 일부를 렌더링하기를 원할 수도 있습니다. 조건부 렌더링이 당신을 구할 곳입니다.
간단히 말해서 조건부 렌더링은 특정 조건에 따라 구성 요소 전체 또는 일부를 렌더링할 수 있는 방법입니다. 이것은 JavaScript에서 조건이 작동하는 것과 거의 동일한 방식으로 작동하며 React 애플리케이션에서 4가지 방법으로 조건부 렌더링을 사용할 수 있습니다.

if/else 조건

요소 변수

삼항 조건부 연산자

단락 연산자
각 방법에 대해 자세히 논의해 보겠습니다.-

If/Else 조건부 렌더링

React의 if-else는 JavaScript에서와 유사하게 작동합니다. 컴포넌트를 조건부로 렌더링하는 데 사용할 수 있는 방법은 다음과 같습니다.

class Conditions extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name = "Tejeshwer";
        }
    }

    render() {
        if(this.state.name === "Tejeshwer") {
            return ( <div> Welcome Tejeshwer </div> );
        } else {
            return ( <div> Welcome Anonymous User </div> );
        }
    }
}

이 방법이나 접근 방식은 조건의 영향을 받지 않은 상태로 남아 있는 부분이 if 블록과 else 블록 모두에 대해 반복되어야 하기 때문에 DRY(자신을 반복하지 마십시오) 접근 방식에서 벗어납니다. 이제 JSX 내에 if-else를 배치하지 않는 이유가 무엇인지 알 수 있습니다.
당신의 생각은 좋지만 JSX는 함수 호출과 객체 생성을 위한 문법적 설탕이기 때문에 가능하지 않습니다. 그 때문에 우리는 그 안에 if-else 블록을 사용할 수 없습니다.

요소 변수

이 접근 방식에서는 JavaScript 변수를 사용하여 구성 요소의 조건에 따라 달라지는 특정 요소를 저장합니다. 이 접근 방식이 구현되는 방식은 다음과 같습니다.

class Conditions extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name = "Tejeshwer";
        }
    }

    render() {
        let userName;
        if(this.state.name === "Tejeshwer") {
            userName = <span>Tejeshwer</span>;
        } else {
            userName = <span>Anonymous User</span>
        }

        return ( <div> Welcome {userName} </div> );
    }
}

이 접근 방식의 주요 이점은 DRY 원칙을 따르고 영향을 받지 않는 부분을 계속해서 반복하지 않고 특정 조건에 따라 구성 요소의 특정 부분을 렌더링할 수 있다는 것입니다.

삼항 조건 연산자

이는 조건부 렌더링을 처리할 때 가장 널리 사용되는 접근 방식입니다. 이 접근 방식은 삼항 조건부 연산자(? :)를 사용하여 특정 조건을 기반으로 요소를 렌더링합니다. 이 접근 방식은 다음과 같이 구현됩니다.

class Conditions extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name = "Tejeshwer";
        }
    }

    render() {
        return (
            <div>
                Welcome {this.state.name === "Tejeshwer" ? 
            <span>Tejeshwer</span> : <span>Anonymous User</span>}
            </div>
        )
    }
}

if-else 블록과 달리 삼항 연산자를 JSX 내에서 사용할 수 있다는 것을 눈치채셨겠지만, 이것이 조건부 렌더링의 이 접근 방식을 사용하는 주요 이점이며 가장 널리 사용됩니다.

단락 연산자

이 접근 방식은 삼항 연산자를 사용하는 세 번째 접근 방식의 확장입니다. 조건이 참인 경우에만 화면에 요소를 렌더링하고 싶을 때 사용하고, 그렇지 않으면 아무 것도 렌더링하고 싶지 않습니다. 이 접근 방식은 && 연산자를 사용하며 다음과 같은 방식으로 구현할 수 있습니다.

class Conditions extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            name = "Tejeshwer";
        }
    }

    render() {
        return(
            <div>
                Welcome {this.state.name && 
                              <span>Tejeshwer</span>}
            </div>
    }
}

이 접근 방식에서는 먼저 '&&' 연산자의 왼쪽이 평가되고 왼쪽의 조건이 true이면 오른쪽이 반환되지만 왼쪽이 false이면 아무 것도 반환되지 않습니다.

이것은 React의 조건부 렌더링, 그것이 무엇이며 어떻게 구현하는지에 관한 것이었습니다.
네가 좋아하길 바래...