[React Exam 28] 조건부 렌더링 2

배열/객체/맵등을 이용하여 조건부로 렌더링이 가능합니다.

렌더링할 데이터를 배열/객체/맵등에 저장해 놓고 필요시 컬렉션별로 얻어오는 방법을 이용하여 값을 얻어오면 됩니다.

 

배열을 이용한 렌더링

// 객체를 이용한 조건부 렌더링     const obj = {         "guest"  : <div>손님</div>,         "member" : <div>회원님</div>,         "admin"  : <div>관리자님</div>,     };     const State = ({state})=> obj[state];

 

객체를 이용한 렌더링

// 배열을 이용한 조건부 렌더링     const array = [<div>손님</div>,<div>회원님</div>,<div>관리자님</div>]     const Level = ({level})=>array[level];

 

맵을 이용한 렌더링

// 맵을 이용한 조건부 렌더링     const areaMap =new Map([         [11,'서울특별시'],         [22,'부산광역시'],         [33,'대구광역시'],         [44,'인천광역시'],         [55,'광주광역시'],         [66,'대전광역시'],         [77,'울산광역시'],         [88,'세종특별자치시'],     ]);     const Area = ({code})=><div>{areaMap.get(code)}</div>;

 

ConditionalRendering2.js 파일을 만듭니다.

const ConditionalRendering2 = ()=>{
    // 객체를 이용한 조건부 렌더링
    const obj = {
        "guest"  : <div>손님</div>,
        "member" : <div>회원님</div>,
        "admin"  : <div>관리자님</div>,
 
    };
    const State = ({state})=> obj[state];
 
    // 배열을 이용한 조건부 렌더링
    const array = [<div>손님</div>,<div>회원님</div>,<div>관리자님</div>]
    const Level = ({level})=>array[level];
 
    // 맵을 이용한 조건부 렌더링
    const areaMap =new Map([
        [11,'서울특별시'],
        [22,'부산광역시'],
        [33,'대구광역시'],
        [44,'인천광역시'],
        [55,'광주광역시'],
        [66,'대전광역시'],
        [77,'울산광역시'],
        [88,'세종특별자치시'],
    ]);
    const Area = ({code})=><div>{areaMap.get(code)}</div>;
 
    const Greeting = ({isShow=false, username="한사람"})=>{
        if(!isShow) return null; // 아무것도 그리지 않는다.
        return <div>{username}님 반갑습니다.</div>
    }
 
    return(
        <>
            <State state='admin'/>
            <State state='guest'/>
            <State state='member'/>
            <hr/>
            <Level level={0}/>            
            <Level level={1}/>            
            <Level level={2}/>          
            <hr/>
            <Area code={11}/>  
            <Area code={33}/>  
            <Area code={88}/>  
            <hr/>
            <Greeting/>
            <Greeting isShow={false} username="한사람"/>
            <Greeting isShow={true} username="두사람"/>
            <hr/>
        </>
    );
}
 
export default ConditionalRendering2;

 

 

 

App.js  파일을 만듭니다. 

import ConditionalRendering2 from "./ConditionalRendering2";
 
const App = ()=>{
    return (
        <>
          <ConditionalRendering2/>
        </>
    )
}
export default App;

1 2 3 4 5 6 7 8 9 10

import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App';   const root = ReactDOM.createRoot(document.querySelector("#app")); root.render(     <React.StrictMode>         <App/>     </React.StrictMode> );     Colored by Color Scripter

 

결과 화면입니다.