4월 1일 TIL

리액트에서 조건부로 이벤트 주기

<div onClick={menuOpen ? handleMenu : undefined}>

조건부 렌더링 사용하듯이 코드 작성하고 false값은 undefined로 작성.

undefined가 아닐경우 아래와 같은 에러 발생

 

styled-reset

브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지

styled-component를 설치해야만 사용할 수 있음

styled-components와 연결되어, 여러 브라우저마다 기본적으로 설치되어 있는 스타일을 지워주는 Node.js 패키지

normalize.css와 동일한 역할

 

설치

npm i styled-reset

 

import는 이렇게

import reset from "styled-reset";

 

createGlobalStyle로 전역 스타일 생성하고 거기에 넣어줌

// 글로벌 스타일 만들기 위한 createGlobalStyle 불러오기
import { createGlobalStyle } from "styled-components";
// 스타일 초기화를 위한 reset 불러오기
import reset from "styled-reset";
// 글로벌 스타일 만들기, reset 사용해서 스타일 초기화하기
const GlobalStyles = createGlobalStyle`
    ${reset}
// 이 이후로는 내가 원하는 스타일 작성하기 
    body {
        background-color: red;
    }
`;

 

styled-component ThemeProvider

공통되는 속성들을 테마로 묶어서 객체형태의 테마로 export한다

각 컴포넌트에서 {theme} 형태로 불러와서 props로 가져와서 사용할수있는듯

사용방법은 조금 헷갈려서 더 찾아보기로 함