[React] styled-component/ 컴포넌트 값 전달/ 조건부 렌더링

styled-components

글로벌 스타일

특정 컴포넌트가 아니라 전역에 스타일을 추가하고 싶을 때 사용한다.

import { createGlobalStyle } from 'styled-components';

상단에 위의 코드를 추가하고 사용한다.

 

import { createGlobalStyle } from 'styled-components';

const AppBackground = createGlobalStyle`
  body {
    background: #ddd;
  }
`;

function App() {
  return (
    <>
     <AppBackground>
     </AppBackground>
    </>
  );
}

Appbackground라는 변수는 #ddd라는 색상이 body에 적용되었고,

사용 시 return 안에서 변수명을 태그로 사용한다.

 

 

자기 자신 선택: &

&문자를 사용하면 Sass처럼 자기 자신을 선택할 수 있다.

const TodoItemBlock = styled.div`
  display: flex;
  align-items: center;
  &:hover {
    ${Remove} {
      display: block;
    }
  }
`;

&:hover = 나 자신 즉, TodoItemBlock을 hover하면 이하 코드를 실행한다.

 

---

다른 컴포넌트에 값 전달

값을 전달하는 데에는 두가지 방법이 있다.

props
비구조화 할당

 

props

//app.js
import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

부모 컨포넌트에 있는 값을 파라미터에 props를 기입해 연결시키고(=전달),

props는 객체로 전달되기 때문에 props.name으로 사용한다.

 

 

비구조화 할당

//list.js
function ListBox () {
    return (
        <ListBoxStyle> 
            <ItemBox text='리액트 공부하기' done={true}></ItemBox>
        </ListBoxStyle>
    )
}

//item.js
function ItemBox ({id, done, text}) {
    return (
        <ItemBoxStyle>
            <Check done={done}>{done && <GoCheck/>}</Check>
            <Text done={done}>{text}</Text>
            <Remove>{<GoX/>}</Remove>
        </ItemBoxStyle>
    )
}

비구조화 할당은 porps를 쓰지 않고도 값을 받아올 수 있다.

list.js의 text와 done이라는 값을 item.js에서

파라미터 안에서 {값}으로 받아오고, 태그 안에서 사용할 때도 {값}으로 사용한다.

 

 

children

컴포넌트 태그 사이에 넣은 값을 가져오고 싶을 때 사용한다.

//app.js
function App() {
  return (
    <>
      <AppBackground />
      <Whitebox>
        <LogoBox />
        <ListBox />
        <InputBox />
      </Whitebox>
    </>
  );
}

//white.js
function Whitebox({ children }) {
  return <WhiteBoxStyle>{children}</WhiteBoxStyle>;
}

<Whitebox> 태그 안에 있는 모든 값

즉, <LogoBox>,<ListBox>,<InputBox>의 값이 children을 통해 전달되어 보여진다.

 

---

조건부 렌더링

조건부 렌더링은 2가지로 표현할 수 있다.

&&

조건이 true일 경우에는 && 이후에 위치한 expression을 반환하고, false일 경우 expression을 반환하지 않고 무시한다.

{
조건식(or값) &&
값이 true일 때 실행되는 코드
}

import styled, {css} from 'styled-components';

const Text = styled.div`
    font-size: 18px;
    flex: 1;
    ${props =>
        props.done &&
        css`
            color: red;
        `}
`

props.done이 true면 css의 color를 red로 바꾼다. (false면 아무일도 일어나지 않음)

조건부 렌더링을 할때는 css 를 추가로 import 하고, 조건부 렌더링 하의 스타일은 css로 감싸 주어 사용해야 한다.

 

 

삼항연산자

{
조건식(or값)
? 값이 ture면 실행되는 코드
: 값이 false면 실행되는 코드
}

const StyledTitle = styled.h1`
  ${props => props.type === 'fruit' 
  ? css `
    font-size: 15px;
    color: yellow;
  ` 
  : css `
    font-size: 12px; 
    color: red;
  `
  }
`;

스타일드 컴포넌트에 속성 전달 + 삼항연산자 예시

 

{
    modal === true //modal 만 써도 무방
    ? <Modal modalTitle={title} modalClick={click}></Modal>
    : null
}

위 코드에선 조건식의 결과가 불린(boolean)이기 때문에 값인 modal만 써도 된다.

 

 

 

---

순서의 중요성

//BoxStyle이랑 Remove의 순서도 중요함
const Remove = styled.div`
    display: flex;
    font-size: 24px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: none;
    &:hover {
        color: rgb(209, 44, 44);
    }
`

const ItemBoxStyle = styled.div`
    display: flex;
    padding-left: 30px;
    padding-right: 30px;
    margin-top: 21px;
    &:hover {
        ${Remove} {
            display: block;
        }
    }
`;

ItemBoxStyle이 순서로 위에 올라가면 안 되는 이유:

hover했을 때 Remove 보여줘야하는데 위에 있으면 Remove가 밑에 위치하고 있어서 오류가 난다.

순서를 지키자!