코딩연습장

const [state, setState] = useState(initialState); useState라는 함수가 배열을 반환하고, 이것을 구조분해문법으로 꺼내놓은 모습. state를 변수로, setState로 state를 수정할수 있음. state가 원시데이터타입이 아닌 객체 데이터타입일 시 불변성을 유지해주어야함. 기존에 우리는 setState를 사용해서 값을 변경했다. setState(num +1) 하지만 이 안에 함수형으로 집어 넣을 수도 있다. setState((currentNum)=> {return currentNum +1) }; 뭐가다른데? 먼저 말하자면 일반업데이트방식은 batch로 처리되고, 함수형 업데이트 방식은 순차적으로 처리된다. // src/App.js import { useSt..

styled-components의 GlobalStyles 이란 무엇이고, 어떻게 사용해야 할까? 1강에서 사용한 styled컴포넌트는 특정 컴포넌트에서 사용하는 스타일에만 적용하는 방식이었다. // BlogPost.js import styled from "styled-components"; function BlogPost({ title, children }) { return ( {title} {children} ); } const Title = styled.h2` font-family: "Helvetica", "Arial", sans-serif; line-height: 1.5; font-size: 1.5rem; margin: 0; margin-bottom: 8px; `; const Content = st..

여태까지 css를 넣기위해 css-in-JS방식을 사용했다. css-in-JS란 자바스크립트 코드로 CSS코드를 작성하여 컴포넌트를 꾸미는 방식이다. 컴포넌트를 만들고 컴포넌트를 꾸미기위해 css파일을 만들고 import하고... tag마다 className을 넣어 CSS코드를 반복 작성해야하는 불편함이 있었다. 이번에는 styled-component 패키지를 사용하여 CSS-in0JS방식으로 컴포넌트를 꾸밀수 있게 할 것이다. VScode 플러그인, 패키지 설치 yarn add styled-components styled-components 사용하기 // src/App.js import React from "react"; // styled-components에서 styled 라는 키워드를 import ..