Jieunny의 블로그

styled-component Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 CSS-in-JS 라이브러리. React 프레임워크를 주요 대상으로 한다. import styled from 'styled-components' render( Hello World! ); const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section`` padding: 4em; background: papayawhip; `;​ const 컴포넌트명 = styled.태그명``; //컴포넌트 이름은 대문자로 시작 스타일을 지정해주기 위해서 ``를 사용한다. 스타일을 ..

@font-face { font-family: 'pb'; src: url('/static/css/pbBold.ttf') } body { padding: 0; background-color: rgb(177,164,210); margin: 0; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: pb; } h1 { margin: 0; font-size: 72px; margin-bottom: 0.1em; color: rgb(177,164,210); color: transparent; background: rgb(177,164,210); -webkit-background-clip: text; backgro..

SASS : CSS 내 반복되는 내용을 줄이고 효율적으로 스타일시트 관리 SASS는 전처리기 : CSS가 만들어지기 전에 이런저런 일을 먼저 해준다 (개발자-브라우저 중간에 껴서) SCSS : SASS 3버전에서 좀 더 CSS 구문과 호환되도록 만듦 (SASS는 SCSS 구문을 사용하는 것을 말함) CSS 에서는 쓸 수 없는 변수, 반복문, 조건문 등을 쓸 수 있다. 컴파일 : SCSS를 브라우저가 읽을 수 있는 코드(CSS)로 바꾸기 npm(패키지 관리해주는 매니저) 로 sass 컴파일러 설치 터미널에서 sass 입력 sass style.scss style.css css 구문으로 된 style.css 파일 생성 SASS watch 옵션 --watch 플래그를 넣어 sass가 해당 파일을 감시 ( 폴더감..

import { useEffect, useState } from "react"; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if(toDo === ""){ return; } setToDos(currentArray => [toDo, ...toDos]) //function(currentArray)와 같은 것 setToDo(""); }; console.log(toDos); return ( M..

component 가 destroyed 될때를 알고 싶으면 생성해주는 함수에서 return 해줘야 한다. import { useEffect, useState } from "react"; function Hello(){ useEffect(() => { console.log("Created :)"); return () => console.log("destroyed :("); }, []) return Hello } function App() { const [showing, setShowing] = useState(false); const onClick = () => setShowing((prev) => !prev); return ( {showing ? : null} {showing ? "HIDE" : "SHO..

state가 변경되면 모든 코드가 re-render된다. state가 변경되도 re-render 하고 싶지 않은 코드가 있다면? useEffect useEffect(iRunOnlyOnce, []); 첫번째 argument : 한번만 실행되게 하고 싶은 코드 (iRunOnlyOnce 는 function). 두번째 argument : 이 state가 변화될때만 첫번째 argument 코드가 re-render 됨 ([]로 비워두면 처음 한번만 실행됨). function App() { const [counter, setCounter] = useState(0); const [keyword, setKeyword] = useState(""); const onClick = () => setCounter((prev) =..