so woon!

학습일 : 2023. 03. 27 중복된 css 중 일부분만 바꾸고 싶은 경우가 많은데, 이런 경우 코드를 복붙하기에는 너무 비효율적이라 생각이 많이 들었었다. 어떻게 하면 기존에 있는 컴포넌트를 스타일을 효율적으로 확장할 수 있는지 알아보자! 여기에 Box 컴포넌트가 똑같은게 두개가 생성되어 있다고 치자. 지금은 두개 모두 빨간색인 상태이다. import styled from "styled-components"; const Father = styled.div` display: flex; `; const Box = styled.div` background-color: red; width: 100px; height: 100px; `; function App() { return ( ); } export de..

학습일 : 2023. 03. 27 어떤 특정 컴포넌트가 어떻게 생겼는지 알려면 일일히 style 속성을 뜯어 봐야 하는데 이 불편함은 styled components를 이용하면 해결 할 수 있다. styled components를 사용하려면 먼저 import를 해주고 import styled from "styled-components"; 컴포넌트를 만들어야 하는데 만드는 방법은 아래와 같다. Father 이라는 이름의 컴포넌트를 만든다고 가정해보자. const Father = styled.div` // 백틱 display: flex; `; 이렇게 컴포넌트를 생성하고 사용은 이런식으로 하면 된다. function App() { return ( ); } 여기서 문제가 하나 있는데 백틱 안에 스타일 속성들을 ..

학습일 : 2023. 03. 27 새로운 리액트 프로젝트를 생성하며 이번에는 Styled-component 를 사용해보고자 한다. 시작! cmd 창에 npx create-react-app 만들프로젝트명 입력 (만약 이미 만들어진 폴더 안에서 cra를 설치해주고 싶다면 터미널에 바로 npx create-react-app . 명령어를 실행하면 된다) 생성된 프로젝트 폴더를 찾고 VSC에서 열어줌 F1 -> gitclone 클릭 -> 깃허브에 미리 만들어 놓은 repo 클릭해서 연동 App.js, index.js 빼고 파일을 다 지워준다 (src 폴더 내에 있는 파일만) 파일 속 필요없는 코드를 지워 주면 아래와 같다. import React from 'react'; import ReactDOM from 'r..