React : 렌더 함수 밖에서작성된 styled-components 로 동적으로 변경되는상태를 props 로전달하기

렌더 함수 밖에서작성된 styled-components 로 동적으로 변경되는상태를 props 로 전달하기

import React from ‘react’

import styled from ‘styled-components’

const Head = styled.div`

display:flex;

width:100%;

height:80px;

background-color: ${ ({isDark}) => isDark ? “#000” : “#FFF”} ;

color: ${ ({isDark}) => isDark ? “#FFF” : “#000”} ;

justify-content: center;

align-items: center;

font-size:2rem;

function Header({isDark})

{

return (

Welcome 홍길동

</Head>

)

}

export default Header;

$( ({isDark}) 객체로받아 값만 취한다.( true or false)

${ (props) => props.isDark

ㆍ ${({isDark})} = true or false 값만 리턴
ㆍ ${props.isDark} = true or false 값만 리턴
ㆍ${isDark} = { isDark : true or false} 객체 리턴

★렌더링되는 function Header() 안에서 ,
styled-component 를 작성해야 동적으로 변경되는 isDark의 값을 이용할 수 있지만 렌더링 함수 내부에서 styled-component 작성시 warning 이 발생한다.

그래서,
★★ styled-component 로 만든 컴포넌트 Head (<Head><Head>) 의 props 로 전달해주면, 렌더링안되는 밖에서 작성된 styled-component 에서도 props 를 전달 받을 수있다.

Published by pluginn