0727 Styled Components 환경설정 / useInput

# Styled Components 환경설정

# 새로고침할때마다 css 가 풀리는걸 방지해보자

# /pages / _document.jsx 생성

import Document from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage;

    try {
      // sheet을 사용해 정의된 모든 스타일을 수집
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />),
        });

      // Documents의 initial props
      const initialProps = await Document.getInitialProps(ctx);

      // props와 styles를 반환
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        ),
      };
    } finally {
      sheet.seal();
    }
  }
}

안에 내용은 그냥 외우려고 하지 말고 받아들이기

# /front /.babelrc 라는 파일을 생성해줘야 한다.

{
    "presets":["next/babel"],
    "plugins":[["styled-components",{"ssr":true}]]
}

 

# npm install -D babel-plugin-styled-components

만약 잘 안된다면 

.next 파일 지우고

npm install next 로 다시 깔아야 한다.

그 다음 npm run dev

-----------------------------------------------------

 

# styled component 의 장점

props 값을 던질 수 있다 - 값에 따라 css 를 바꿀 수 있음

/* display : ${(props)=>{(props.flag ? '' : '')}}; */

------------------------------------------------

# input 관리

[

import {useState} from 'react'

const useInput = (defaultValue) => {
    const [value,setValue] = useState(defaultValue)
    const onChange = e => {
        const {value} = {...e.target}
        setValue(value)
    }

    return {
        value,
        onChange
    }
}

export default useInput