[react, Css-in-JS]modal창 구현, styled 사용법, cursor, ×

1. modal 창 구현하기

결과화면 (storybook 이용)

알게 된 것

1. styled-components 활용하기

-리액트의 한 컴포넌트 안에서 스타일을 적용시킬 수 있다. 깔끔하게

- styled-components을 사용하기 위해서는 맨 위에

import styled from 'styled-components'; 를 써준다.

-기본적인 형태는 다음과 같다. 첫줄과 마지막 줄이 가장 기본의 형태이고,

적용할 속성은 다음과 같이 들어가면 된다.

-

형태인 modalBtn의 변수에 스타일을 할당해준 것.

export const ModalBtn = styled.button`
  background-color: #4000c7;
  text-decoration: none;
  border: none;
  padding: 20px;
  color: white;
  border-radius: 30px;
  cursor: grab;
`;

2. css 속성중 cursor

cursor에는 grab과 pointer 속성이 있다.

3. ×

모달창에 창닫기 버튼 표시인 x를 표시할 수 있다.

4. 모달창 구현 연습 코드

export const Modal = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleModal = () => {
    setIsOpen(!isOpen)
  };

  return (
    <>
    <ModalContainer>
    <ModalBtn onClick={handleModal}>
    {isOpen === false ? "Open Modal" : "Opened"}
    </ModalBtn>

    {isOpen ===false ?
      null
    : <ModalBackdrop onClick={handleModal}>
    <ModalView>
      <div className="close-btn" onClick={handleModal}>&times;</div>
      <div className="desc">HELLO WORLD!</div>
    </ModalView>
  </ModalBackdrop>
    }

    </ModalContainer>
    </>
  );
};

삼항 연산자를 통해 false이면 창이 null상태이고, true면 모달 창이 열리게 된다.