조건부 렌더링

조건부 렌더링

화면을 구현하다보면 조건에 따라 다른 내용을 보여줘야 하는 경우가 존재한다.

• 로그인 여부에 따른화면

• 이용약관 동의 여부에 따른 화면

이외에도 여러 가지 상황이 있을 수 있다.

예제 - 서브 컴포넌트 없이 조건부 화면 구현

function MainComponent(){
    const [check, setCheck] = React.useState(false);
    
    const html = check ? <h1>체크 되었을 경우 표시될 화면</h1> 
                            : <h1>체크 되지 않았을 경우 표시될 화면</h1>;

    return (
        <>
            <input type="checkbox" onChange={e=>setCheck(e.target.checked)}/>
            {html}
        </>
    );
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(<MainComponent/>);

예제 - 서브 컴포넌트를 통해 조건부 화면 구현

function SubComponent(props){
    if(props.check) {
        return <h1>체크 되었을 경우 표시될 화면</h1>
    }
    else {
        return <h1>체크 안되었을 경우 표시될 화면</h1>
    }
}

function MainComponent(){
    const [check, setCheck] = React.useState(false);
    
    return (
        <>
            <input type="checkbox" onChange={e=>setCheck(e.target.checked)}/>
            <SubComponent check={check}/>
        </>
    );
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(<MainComponent/>);

props를 활용하여 태그를 분리한 뒤 화면을 구현할 수 있다. 이 경우 가독성이 좋아지며, 필요한 데이터만 전달하여 처리할 수 있다. 또한 컴포넌트가 업데이트 되었을 경우에 필요한 영역이 달라진다.