🌞 2/7 내배캠 React 71일차

[ Next.js, Typescript, Firebase CR , Modal 구현 ]

---

Next.js +Typescript의 Modal 구현

interface ModalDefaultType {
  onClickToggleModal: () => void;
}

const Modal = ({ onClickToggleModal }: PropsWithChildren<ModalDefaultType>) => {
  return (
    <ModalContainer>
      <StDialogBox open>
        <PostForm />
      </StDialogBox>
      <Backdrop
        onClick={(e) => {
          e.preventDefault();

          if (onClickToggleModal) {
            onClickToggleModal();
          }
        }}
      ></Backdrop>
    </ModalContainer>
  );
};

일단 interface로 onClickToggleModal 의 type을 설정해주고, 

Modal이 불러왔을 때, dialoge테그로 PostForm이라는 컴포넌트를 open할 수 있게 만들고, 뒷 배경으로 Backdrop이라는 styled-components를 적용했다.

여기서 궁금했던 점!

 

만약 PostForm이 Backdrop의 뒤에 있어도 Backdrop에만 onclick이 적용이 될까??

 

정답은 Backdrop에만 적용이 된다이다!

그럼 왜 그렇게 적용이 되는 것일까? 원래 HTML 특성상 순서에 따라 레이어 앞뒤가 바뀌기 때문에 onClick함수의 적용범위가 변경되어야 하는데 HTML순서에 상관없이 Backdrop에만 onClick함수가 적용되었다.

그 이유는 PostForm 컴포넌트는 dialog테그인 StDialogBox로 감싸여 있기 때문이다.

dialog테그는 순서에 상관없이 Backdrop은 fixed되어 있다면 위와 같은 화면이 뜨고, onClick함수가 적용되는 것이다.

const StDialogBox = styled.dialog`
  width: 600px;
  height: 400px;
  flex-direction: column;
  align-items: center;

  border: none;
  border-radius: 3px;
  box-shadow: 0 0 30px rgba(30, 30, 30 0.185);
  box-sizing: border-box;
  background-color: white;
  z-index: 10000;
`;

const Backdrop = styled.div`
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.2);
`;

 

---

 

Next.js 새로고침 시 styled-components 적용 에러 

 

에러

Next.js에 styled-components를 쓰게 되면 브라우저 로딩이 끝나야 css가 적용되거나 새로고침을 하게 되면 CSS가 적용이 안되는 에러를 만났다.

이유

Next가 먼저 정적으로 생성된 HTML을 렌더후 나머지 JS파일을 로드하게 된다.

JS에 의해 동적으로 CSS가 생성되는 CSS-In-Js 방식인 styled-components는 위와 같은 과정에서 생성되는 HTML에 우리의 코드가 함께 빌드 되지않는다.

 

또 다른 에러

className did not match라는 에러가 떴다.

 

이유

서버에서 받은 해시+클래스명과 새로고침후 클라이언트에서 받은 해시+클래스명이 달라서 발생하는 문제다.

 

해결법

1. 바벨 플러그인 설치

npm i babel-plugin-styled-components

2. .babelrc설정

.babelrc를 생성후 아래 코드 작성

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

그리고, 서버를 끄고 다시 실행한다!!! Next.js는 서버를 불러올때 build라는 과정이 있기 때문에 이런 수정 사항이 있을 땐 꼭 서버를 끄고 다시 불러와보자!!

 

위에 내용은 https://velog.io/@hongdol/Next.js-TS-%EB%A6%AC%EB%A0%8C%EB%8D%94%EB%A7%81%EC%8B%9C-Styled-Components-%EC%A0%81%EC%9A%A9-%EC%95%88%EB%90%98%EB%8A%94-%EC%97%90%EB%9F%AC 블로그를 참고하였다.