styled-components

들어가기
insta-reactJS에서 design에 사용할 styled-components를 간략하게 알아보고,
복습해 보는 POST

1. props사용방법!!

import { useState } from 'react'
import styled, { css } from 'styled-components'
import { isLoggedInVar } from '../apollo'

const Title = styled.h1`
  color: ${(props) => (props.potato ? 'blue' : 'tomato')};
  ///6. return부분에서 보낸 potato={potato}값을 받아서 true면 'blue' false면 
  /// 'tamato' 값을 받게 설정함.
  
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  ${(props) =>
    props.potato
      ? css`
          font-size: 50px;
        `
      : css`
          text-decoration: underline;
        `}
   ///7.  6번처럼도 가능하고 props를 바로 받아서 css로 디자인하는 것도 가능함..
`
const Container = styled.div``

const TogglePotato = styled.button`
  color: red;
`

const Login = () => {
  const [potato, setPotato] = useState(false)
  ///1. potato, setPotato를 useState로 만듬. default값은 false로.
  
  const togglePotato = () => setPotato((current) => !current)
  ///2. potato 값을 true, false로 변경할 수 있는 togglePotato fn을 만듬.
  
  return (
    <Container>
      <Title potato={potato}>Login</Title>
      ///5. 웨에서 styled-components로 만든 Title components에 
      ///potato={potato}로 potato값을 보내줌, potato는 true/false값을 가짐.
      
      <button onClick={() => isLoggedInVar(false)}>Log in now</button>
      <TogglePotato onClick={togglePotato}>TogglePotato</TogglePotato>
      ///3. togglePotato fn을 실행시킬 button을 만듬.
      ///4. TogglePotato는 위헤서 styled-componets로 button속성으로 만들었음.
      
    </Container>
  )
}

export default Login

2. GlobalStyles, ThemeProvider

src/styles.js, App.js

styled-components를 사용하는데 있어서 모든 page에 적용 혹은 사용할 수 있게함.

styles.js

import { createGlobalStyle } from 'styled-components'
import reset from 'styled-reset'

export const lightTheme = {
  fontColor: '#2c2c2c',
  bgColor: 'lightgray',
}
export const darkTheme = {
  fontColor: 'lightgray',
  bgColor: '#2c2c2c',
}

export const GlobalStyles = createGlobalStyle`
${reset}
///reset은 어전에 적용되었던 css를 reset시킨다는 뜻임.

body{
  background-color: ${(props) => props.theme.bgColor}  
}
///반드시 사용하려는 곳(body, footer등등)을 적어주어야 함.
///body 전체에 theme이 무엇인가(darkmode, lightmode)인가에 따라 
///backgroundColor 값이 전제 page에 적용됨.
///theme 설정은 App.js에서 확인할 것.
    
`

App.js

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { darkModeVar, isLoggedInVar } from './apollo'
import Home from './screens/Home'
import Login from './screens/Login'
import { useReactiveVar } from '@apollo/client'
import Nomad from './screens/Nomad'
import { ThemeProvider } from 'styled-components'
import { darkTheme, GlobalStyles, lightTheme } from './styles'

function App() {
  const isLoggedIn = useReactiveVar(isLoggedInVar)
  const darkMode = useReactiveVar(darkModeVar)

  return (
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
    	///darkDode의 true, false의 값에 따라 적용되는 darkTheme/lightTheme설정.
        //darkTheme와 lightTheme의 설정은 styles.js에서 설정하고 설정되어 있음.
    
      <GlobalStyles />
      	///이하의 모든 page에 styles.js에서 만든 GlobalStyles 값이 적용됨
      
      <Router>
        <Routes>
          <Route path="/" element={isLoggedIn ? <Login /> : <Home />} />
          <Route path="/nomad" element={<Nomad />} />
        </Routes>
      </Router>
    </ThemeProvider>
  )
}

export default App

3. themeProvider 사용

src/screens/Home.js

import styled from 'styled-components'
import { darkModeVar, isLoggedInVar } from '../apollo'

const Title = styled.h1`
  color: ${(props) => props.theme.fontColor};
`
///darkMode의 값에 따라 theme의 값이 styles.js안에 있는 
///darkTheme 값 혹은 lightTheme 값이 적용됨

const Container = styled.div`
  background-color: ${(props) => props.theme.bgColor};
`
///darkMode의 값에 따라 theme의 값이 styles.js안에 있는 
///darkTheme 값 혹은 lightTheme 값이 적용됨

const Home = () => {
  return (
    <Container>
      <Title>Home</Title>
      <button onClick={() => isLoggedInVar(true)}>Log in now</button>
      <button onClick={() => darkModeVar(true)}>darkMode</button>
      <button onClick={() => darkModeVar(false)}>whiteMode</button>
    </Container>
  )
}

export default Home