출처 https://www.youtube.com/watch?v=9__o5q1oenE

next.js 이미지

public 폴더에 있는 이미지 --> '/a.png' --> public/a.png

<Image src="" alt="" width={} height={}/>

react.js 이미지

public 폴더에 있는 이미지 --> '/a.png' --> public/a.png

<img src="" alt="" />

props와 조건부 랜더링

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

emotion에서

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

1. 문자열의 return
ex)
const Title = styled.h1`
	color:sky${()=>{return 'blu'}}e;
`;
    
const Title = styled.h1`
	color:skyblue;
`
이때 해당 함수의 매개변수에는 props(속성들)이 객체로 담겨서 전달이 된다

<Title a='ddd' b='ccc'>abc</Title>

{
  a:'ddd',
  b:'ccc',
  children:'abc',
  theme:{}
}
--> 매개변수에 들어있는 속성 값에 따라서 return되는 값을 다르게 해주면
css가 다르게 적용되는 컴포넌트가 만들어진다

2. 객체의 return
${} 안에 있는 함수가 객체가 return되는 경우에는 해당 객체를
css로 해석하여 적용 시켜준다

3. hover와 같은 경우
자기자신 안에있는 p태그
자기자신이 hover가 된다면

4. props로 문자열값이 아닌 자바스크립트 값(숫자, booleanl, 객체 ...)을 전달하고 싶으면?
  props에 없다면?
  
자바스크립트
	삼항연산자
		값1 ? 값2 : 값3
		--> 값1이 true면 값2가 결과, 값1이 false면 값3이 결과

논리연산자
	값1 && 값2
		true && true --> true
		true && false --> false
		true && true --> false
		false && false --> false

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

맥락 평가에 의해 논리연산이 이루어 진다
	10 && '안녕' --> '안녕'
	
	0 || 34 --> '34'

	'' && 'Kyle' --> ''

	'April' || 72 -->	'April'

truthy
--> javascript에서 boolean으로 바꿨을 때 true로 바뀌는 값

falsy
--> javascript에서 boolean으로 바꿨을 때 false로 바뀌는 값
false
0
0.0
'' (비어있는 문자열)
null
undefined

'April'	// truthy
true	// truthy
15 * 0	// falsy
'0'		// truthy (문자열이니까)
'false'	// truthy (문자열이니까)

Q.props.aaa가 true라면 무엇이 return 될까요?
Q.props.aaa가 false라면 무엇이 return 될까요?
  
${(props)=>{
	return props.aaa && {color:'red', backgroundColor:'blue'}
}}
	--> {color:'red', backgroundColor:'blue'} (객체가 return 되니까 css 적용이 된다)
	--> false (css 적용이 안된다)

${(props)=>{
	return props.aaa || {color:'red', backgroundColor:'blue'}
}}
	--> true (css 적용이 안된다)
	--> {color:'red', backgroundColor:'blue'} (객체가 return 되니까 css 적용이 된다)


그래서, 프론트엔드 개발자들은
props가 참일때 적용시켜야할 css가 있다면
props.add && {};

props가 거짓일때 적용시켜야할 css가 있다면
props.ddd || {};

01conditional.js

// 조건부 렌더링

import styled from "@emotion/styled";
import { Button } from "@mui/material";

const ConditionalPage = ()=>{
    return (
        <>  {![](https://velog.velcdn.com/images/dev-april/post/05c818ba-9f96-43f3-a066-8d17c0f07988/image.png)
/*여러개 넣을꺼니까 fragment로 감싸주고 */}
            <h1 abc="금요일" id="April" className="err">조건부 렌더링</h1>
            <MyDiv abc="1번" id="April" className="err">div1입니다</MyDiv>   
            <MyDiv abc="2번" id="April" className="err">div2입니다</MyDiv>   
            <Div2 qqq='1번'>div3입니다</Div2>
            <Div2 qqq='2번'>div4입니다</Div2>
            <Div3 bbb='1번'>div5입니다</Div3>
            <Div3 bbb='2번'>div5입니다</Div3>
            <Div4 isErr={true}>빨간색 div</Div4>
            <Div4 isErr={false}>초록색 div</Div4>
            <Div4>isErr이 없는데?</Div4> {/* 'undefined'는 false로 적용된다 */}
            <Div5 isErr>div7입니다</Div5> {/*  isErr={true} 생략 가능 */}
            <Div5>div8입니다</Div5>
            <MyBtn>일반 버튼</MyBtn>
            <MyBtn textBtn>텍스트 버튼</MyBtn>
            <MyBtn elevatedBtn>엘리베이티드 버튼</MyBtn>
            <br/>
            <Button>일반버튼</Button>
            <Button variant="outlined">outlined 버튼</Button>
            <Button variant="conatained">conatained 버튼</Button>
        </>
    );
}

// 삼항연산자보다 &&, ||을 더 많이 사용한다
const MyBtn = styled.button`
    cursor: pointer;
    ${(props)=>props.textBtn && {
        background: 'none',
        border: 'none',
        '&:hover': {backgroundColor: 'silver'},
    }}


    ${(props)=>
    props.elevatedBtn && {
        backgroundColor: 'skyblue',
        border : 'none',
        boxShadow: '2px 4px 12px',
        '&:active' : {
            boxShadow: 'none'
        }
    }   
}
`;

// isErr이 true면 hover되었을 때 red
// 아니라면 hover되었을 때 blue

const Div5 = styled.div`
    border: 3px solid black;
    width: 200px;

    /* &:hover{
        background-color: ${props => props.isErr ? 'red' : 'blue'};
    } */

    /* 보통은 이렇게까진 쓰이지 않는다 */
    ${props=>{
        return props.isErr ?
        {'&:hover' : {backgroundColor : 'red'}} :   // 객체로 선택자 적용 가능
        {'&:hover' : {backgroundColor : 'blue'}};
    }}
`;


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

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


const Div2 = styled.div`
    border: 3px solid black;
    width: 200px;
    background-color: ${a => a.qqq === '1번' ? 'pink' : 'skyblue'};
`;

const MyDiv = styled.div`
    border: 3px solid black;
    width: 200px;
    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;