[React Exam 27] 조건부 렌더링 1

React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작합니다. if, switch, 삼항연산자, &&(AND), || (OR) 연산자와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 사용할 수 있습니다. 

 

조건이 참인 경우만 렌더링을 수행합니다.

if(조건){         return  <div>결과</div>;     }else{         return null;     }

 

변수 또는 식의 결과가 값과 일치 할때 만 렌더링을 수행합니다.

switch(변수 또는 식){     case 값1:       return  <div>결과1</div>;     case 값2:       return  <div>결과2</div>;     default:         return  null;     }

 

삼항 연산자를 이용할 수 있습니다.

{gender ? "남자" : "여자"}

 

 &&(AND)  연산자를 이용할 수 있습니다.

다음은 어떻게 결과가 나올까요?

{gender && "남자"}{!gender && "여자"}

 

&&(AND) 연산의 경우 앞의 식이 참인 경우에만 뒤의 식을 실행합니다. 결국 gender값이 참인 경우에 만 "남자"를 출력합니다. gender값이 false인 경우에는 !연산자와 같이 사용했으므로 true가 되어 "여자"가 출력됩니다.

 

 ||(OR)  연산자를 이용할 수 있습니다.

다음은 어떻게 결과가 나올까요?

{gender || "여자"}{!gender || "남자"})

 

||(OR)  연산의 경우 앞의 식이 거짓인 경우에만 뒤의 식을 실행합니다. 결국 gender값이 거짓인 경우에 만 "여자"를 출력합니다. gender값이 true인 경우에는 !연산자와 같이 사용했으므로 false가 되어 "남자"가 출력됩니다.

 

ConditionalRendering1.js 파일을 만듭니다. 

const ConditionalRendering1 = ({user})=>{
    let {username, age, gender} = user;
 
    // if문 사용
    let viewUser = `${username}(${age}세,`
    if(gender){
        viewUser += "남자)";
    }else{
        viewUser += "여자)";
    }
 
    // switch문 사용
    let viewUser2 = `${username}(${age}세,`
    switch(gender){
    case true:
        viewUser2 += "남자)";
        break;
    case false:
        viewUser2 += "여자)";
        break;
    default:
        viewUser2="";
    }
 
    return(
        <>
            가장 일반적인 출력 : {username}({age}세, {gender}) <br/>
            if문을 이용한 출력 : {viewUser}<br/>
            switch문을 이용한 출력 : {viewUser2}<br/>
            삼항 연산자 이용한 출력 : {username}({age}세, {gender ? "남자" : "여자"}) <br/>
            &&(AND) 연산자 이용한 출력 1 : {username}({age}세, {gender && "남자"}{!gender && "여자"}) <br/>
            &&(AND) 연산자 이용한 출력 2 : { age >= 20 && "어른" } { age <  20 && "얼라" } <br/>
            ||(OR) 연산자 이용한 출력 1 : {username}({age}세, {gender || "여자"}{!gender || "남자"}) <br/>
            ||(OR) 연산자 이용한 출력 2 : { age < 20 || "어른" } { age >=  20 || "얼라" } <br/>
            <hr/>
        </>
    );
}
export default ConditionalRendering1;

 

App.js  파일을 만듭니다. 

import ConditionalRendering1 from "./ConditionalRendering1";
 
const App = ()=>{
    let users = [
      {username:"한사람",age:18,gender : true},
      {username:"두사람",age:25,gender : false},
    ];
    return (
        <>
          <ConditionalRendering1 user={users[0]}/> 
          <ConditionalRendering1 user={users[1]}/>
        </>
    )
}
export default App;

 

index.js  파일을 만듭니다. 

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>
);    

 

 

결과 화면입니다.