조건부 렌더링

조건부 렌더링

들어오는 입력에 맞게 다른 컴포넌트를 렌더링하는 코드다

function Greeting(props) {
    if(props.isLogged){
        return <UserGreeting/>;
    } else {
        return <GuestGreeting/>;
    }

}

function UserGreeting() {
    return <h1>
        Welcome Back!
    </h1>;
}

function GuestGreeting() {
    return <h1>
        Please, sign up.
    </h1>
}

ReactDOM.render(
    <Greeting isLogged={false}/>,
    document.getElementById('root')
);

Greeting을 렌더링하고 있으며 Greeting컴포넌트에서는 props로 받아온 값에 따라서

참이면 UserGreeting, 거짓이면 GuestGreeting 컴포넌트를 반환하고 있다

동적 변화

위 코드를 사용자의 버튼 클릭에 따라서 동적으로 바뀌는 페이지를 만들자

그렇게 하기 위해서는 isLogged의 값이 동적으로 바뀌어야하는데 순수 함수처럼 동작하는 props는 값을 바꿀 수 없다

우선 isLogged를 내부의 state로 옮겨야하는데 우리는 버튼도 추가해야 함으로 Greeting은 그대로 놔두고

컴포넌트를 하나 더 만들어서 합성 시켰다

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

        this.state = {
            isLogged: true
        }
    }

    render() {
        return (
            <div>
                <Greeting isLogged={this.state.isLogged}/>
            </div>
        );
    };
}

ReactDOM.render(
    <Change />,
    document.getElementById('root')
);

Greeting, UserGreeting, GuestGreeting 컴포넌트는 모두 동일하고 Greeting은 여전히 props를 받아 동작하지만

Greeting 외부의 Login컴포넌트의 state값을 받고 있기 때문에 우리는 이 값을 수정할 수 있다

이 과정에서 왜 컴포넌트를 작게 쪼개서 사용하는 것이 보수,재활용이 쉬운지 이해할 수 있었다

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

        this.state = {
            isLogged: true
        }
        this.handleChangeButton = this.handleChangeButton.bind(this);
    }

    render() {
        return (
            <div>
                <Greeting isLogged={this.state.isLogged}/>
                <button onClick={this.handleChangeButton}>Change</button>
            </div>
        );
    };

    handleChangeButton() {
        this.setState(state=>({
            isLogged : !state.isLogged
        }))
    }
}

버튼을 누르면 isLogged가 참이면 거짓, 거짓이면 참으로 바뀌고 그에 따라 동적으로 페이지가 바뀌게 되었다

여러가지 조건부

버튼도 참 거짓에따라 동적이게 바뀌게 만들어보자

if,else

render() {

    let button;
    if(this.state.isLogged){
        button = <button onClick={this.handleChangeButton}> log-out</button>
    } else button = <button onClick={this.handleChangeButton}> log-in</button>

    return (
        <div>
            <Greeting isLogged={this.state.isLogged}/>
            {button}
        </div>
    );
};

렌더 메소드안에서 조건문을 사용해서 button에 값에 맞는 엘리먼트를 할당하고

리턴하는 jsx안에서는 {}를 사용해 자바스크립트 문법으로 엘리먼트를 출력하는 코드이다

클릭에 따라 버튼도 같이 바뀌게 된다

논리 연산자

JSX안에는 if문은 사용하지 못하지만 논리연산자는 사용이 가능하다

아래의 코드들은 모두 위 if,else 코드와 결과가 동일하다

논리 연산자

render() {
    const isLogged = this.state.isLogged;

    return (
        <div>
            <Greeting isLogged={isLogged}/>
            {isLogged && <button onClick={this.handleChangeButton}> log-out</button>}
            {isLogged || <button onClick={this.handleChangeButton}> log-in</button>}
        </div>
    );
};

그냥 논리 연산자가 어떻게 작동하는지 보여주고 싶어서 쓴 코드

&&의 경우 앞의 조건이 참이면 뒤의 표현식이 출력 거짓이면 무시,
||의 경우 앞의 조건이 거짓이면 뒤의 표현식이 출력 참이면 무시

이 코드를 삼항 연산자로 표현하면 아래와 같다

삼항 연산자

render() {
    const isLogged = this.state.isLogged;

    return (
        <div>
            <Greeting isLogged={isLogged}/>
            {isLogged ? <button onClick={this.handleChangeButton}> log-out</button>
                      : <button onClick={this.handleChangeButton}> log-in</button>}
        </div>
    );
};

렌더링 막기

컴포넌트가 렌더링되는 것을 막으려면 null값을 반환하면 된다

사용했던 코드에서 로그아웃을 했을 때 Please, sign up.라는 멘트를 숨기고 싶다고 가정하면

function GuestGreeting() {
    return null
}

그냥 null을 반환시키면 된다