[React] props 와 조건부 렌더링 ( 삼항연산자 Conditional (ternary) operator) CSS 적용방법

Suji Kang·2023년 8월 25일

Conditional (ternary) operator Props React emotion/css

🐾 props 와 조건부 렌더링

조건에 따라서 적용되어야 하는 css가 달려져야한다

📍 localhost:3000/conditional 페이지 설정해주고,

App.js

const router = createBrowserRouter([
{ path: '/conditional', element: <ConditionalPage />
}]);

conditional.js

//  조건부 랜더링

import styled from "@emotion/styled";

const ConditionalPage = () => {
    return (
        <>
            <h1>조건부 렌더링</h1>
            <MyDiv>div1입니다</MyDiv>
            <MyDiv2>div2입니다</MyDiv2>
        </>
    );
}

const MyDiv = styled.div`
border: 3px solid black;
width: 300px;
text-align: center;
`;

const MyDiv2 = styled.div`
border: 3px solid black;
width: 300px;
text-align: start;
`;

export default ConditionalPage;

📍 css 가 100개가 다 같은데 한줄 text-align 만 다르다고 가정하면,
👉 이렇게 하면 굉장히 비효율적이다.

📍 emotion 에서 정함, 매개변수 1개 있어야해!라고,
html 은 없는 속성을 추가할수있다.

import styled from "@emotion/styled";

const ConditionalPage = () => {
    return (
        <>
            <h1 abc='금요일' id='홍길동' className="err">조건부 렌더링</h1>
            <MyDiv abc='1번' id='홍길동' className="err">div1입니다</MyDiv>
            <MyDiv abc='2번' id='강수지' className="err">div2입니다</MyDiv>
        </>
    );
}

const MyDiv = styled.div`
        border: 3px solid black;
        width: 300px;
        text-align: center;
  		/* ${(a) => {
        return a.abc === '1' ? 'background-color: red;' : 'background-color: blue;'
   		 }} */
   👉 // 한줄로 쓰면
${ a => a.abc === '1번' ? 'background-color: red' : 'background-color: blue'}

export default ConditionalPage;

const ConditionalPage = () => {
    return (
        <>
			<Div2 qqq='1번'>div3입니다</Div2>
			<Div2 qqq='2번'>div4입니다</Div2>
 		</>
    );
}
      
const Div2 = styled.div`
        border: 3px solid black;
        width: 300px;
        background-color: ${(a) => {return a.qqq === '1번' ? 'red' : 'blue'}
 	};
 `;


export default ConditionalPage;

return 생략가능

 background-color: ${a => { a.qqq === '1번' ? 'red' : 'blue'}

📒
emotion  에서
`
`
안에는 css의 속성을 작성하고, 이것이 css로 반영이 되는데,
만일 `` 안에 ${} 이 부분에 함수를 넣어주면
해당 함수의 return 되는 값이 ${} 자리에 쓰여있다고 판단한다

ex)
const Title = styled.h1`
 color: ${props => props.color};
`;

const Title = styled.h1`
 color:red;
`;

📍 이때 해당 함수의 매개변수에는 props(properties(속성))이 객체로 담겨서 전달이 된다.

<Title a = "bbb" c = "dddd">abc</Title>

{
    a : "bbb",
    c : "dddd",
    children : "abc"
    theme:{}
}

👉👉 매개변수에 들어있는 속성 값에 따라서 return 되는 값을 다르게 해주면,
css가 다르게 적용되는 컴포넌트를 만들어진다

const ConditionalPage = () => {
    return (
        <>
			<Div3 bbb='1번'>div5입니다</Div3>
            <Div3 bbb='2번'>div6입니다</Div3>
 		</>
    );
}



const Div3 = styled.div`
        border: 3px solid black;
        width: 300px;
  ${() => { return `background-color: red;` }};
  ${(props) => {
        return props.bbb === '1번' ? { color: 'white', borderRadius: '10px', padding: '50px' } : { margin: '10px', color: 'blue' }
      }
    };
`;


export default ConditionalPage;

📍 ${}안에 있는 함수가 객체가 return 되는 경우에는 해당 객체가 css로 적용이 된다

📒 위에서 두가지 방법을 사용함.
📍 1. css 가 한개만 적용이 필요하면 문자열 return
📍 2. css 가 여러개를 적용해야하면 객체를 return

💁🏻‍♀️ hover와 같은경우...

자기자신 안에있는 p 태그
자기자신이 hover가 된다면

const ConditionalPage = () => {
    return (
        <>
			<Div5 isErr>div7입니다</Div5>
            <Div5>div8입니다</Div5>
 		</>
    );
}

// isErr 이 true면 hover 되었을떄 red
// isErr 이 false면 hover 되었을떄 green
const Div5 = styled.div`
    border: 3px solid black;
    width: 300px;

    ${props => {
        return props.isErr ?
           {'&:hover' : {backgroundColor : 'red'}} : 
   		   {'&:hover' : {backgroundColor : 'green'}};
    }};
`;


export default ConditionalPage;

💁🏻‍♀️ props 로 문자열값이 아닌 자바스크립트 값 (숫자, boolena, 객체, 배열)을 전달하고 싶다면?

const ConditionalPage = () => {
    return (
        <>
			<Div4 isErr={true}>빨간색 div</Div4>
            <Div4 isErr={false}>파란색 div</Div4>
 			<Div4 >isErr 이 없는대?</Div4>
 		</>
    );
}

const Div4 = styled.div`
        border: 3px solid black;
        width: 300px;
    ${(props) => {
        return props.isErr === true ? {
            backgroundColor: 'red',
            color: 'blue',
        } : {
            backgroundColor: 'green',
            fontWeight: 'bold'
        }
    }};
`;


export default ConditionalPage;

💁🏻‍♀️ props에 없다면?

없으면 undefined 나온다.

🐾 자바스크립트 JS

삼항연산자

📒 값1? 값2 : 값3
👉 값1이 true면 값2가 결과, 값1이 false면 값3이 결과.

논리연산자

 값1 && 값2 
   true && true --> true 
   true && false --> false
   false && true --> false
   false && false --> false
 값1 || 값2 
   true || true --> true 
   true || false --> true
   false || true --> true
   false || false --> false

📍 맥락 평가에 의해 논리연산이 이루어진다

10 && '안녕' --> '안녕' // 10은 truthy 이기 때문에 뒤에 값을보고, 뒤에 결과 값이 된다.
0 || 34 --> 34 // 0은 falsy 이기 때문에 뒤에 값이 결과 값이 된다.  
'' && '강수지' --> '' // ''은 falsy 이기 때문에 뒤에값 안바도된다.
'강수지' || 72 --> '강수지' // '강수지'는 truthy 이기 때문에 뒤에 안바도된다.

📍truthy
👉 javascript에서 boolean으로 바꿨을떄 true로 바뀌는 값들
📍 falsy
👉 javascript에서 boolean으로 바꿨을떄 false로 바뀌는 값들
 false 
 0
 0.0
 ''
 null 
 undefined

'강수지' // truthy
 true // truthy
 15 * 0 // falsy
 '0' // truthy
 'false' // truthy

📒 리액트에서 삼항연산자보다 논리연산자를 더 많이씀.

💁🏻‍♀️ 예시.

📍 props.aaa 가 true라면 무엇이 return 되는가?

&&

${(props)=>{
    return props.aaa && {
        color : 'red', backgroundColor : 'blue'
    }
}}
결과값: 👉
	{
        color : 'red', backgroundColor : 'blue'
    }

||

${(props)=>{
    return props.aaa || {
        color : 'red', backgroundColor : 'blue'
    }
}}
결과값: 👉
true

📍 props.aaa 가 false라면 무엇이 return 되는가?

&&

${(props)=>{
    return props.aaa && {
        color : 'red', backgroundColor : 'blue'
    }
}}
결과값: 👉
false

||

${(props)=>{
    return props.aaa || {
        color : 'red', backgroundColor : 'blue'
    }
}}
결과값: 👉
	{
        color : 'red', backgroundColor : 'blue'
    }

📍props가 참일때 적용시켜야할 css가 있다면,

props.ddd && {};

📍props가 거짓일때 적용시켜야할 css가 있다면,

props.ddd || {};

const ConditionalPage = () => {
    return (
        <>
			<MyBtn>일반버튼</MyBtn>
            <MyBtn textBtn>텍스트버튼</MyBtn>
            <MyBtn elevatedBtn>엘리베이티드버튼</MyBtn>
 		</>
    );
}

const MyBtn = styled.button`
    cursor: pointer;
    ${(props) => {
        return props.textBtn && {
            backgroundColor: 'none',
            border: 'none',
            '&:hover': {
                backgroundColor: 'silver',
            }
        }
    }
 };
${(props) => {
        return props.elevatedBtn && {
            backgroundColor: 'skyblue',
            border: 'none',
            boxShadow: '2px 4px 12px',
            '&:active': {
                boxShadow: 'none',
            }
        }
    }}
`;

 
export default ConditionalPage;