하얀 코딩

styled-reset은 리액트 애플리케이션에서 사용되는 스타일 라이브러리인 "styled-components"와 함께 사용되는 패키지 중 하나입니다. 스타일드 컴포넌트는 CSS를 컴포넌트 기반으로 작성할 수 있게 해주는 라이브러리이며, styled-reset은 초기 CSS 스타일을 재설정하여 브라우저 간의 일관된 스타일링을 적용하는 데 도움을 줍니다. 설치 npm install styled-reset 적용 예시 import { createGlobalStyle } from 'styled-components'; import reset from 'styled-reset'; const GlobalStyle = createGlobalStyle` ${reset} /* 이곳에 추가적인 전역 스타일을 설정할 수 있습..

createGlobalStyle은 styled-components 라이브러리에서 제공하는 컴포넌트 중 하나로, 전역 스타일을 정의하고 적용할 수 있게 해주는 기능입니다. 리액트 애플리케이션에서 전역적으로 적용되는 스타일을 설정하는 데 사용됩니다. 일반적으로 웹 애플리케이션에서 각각의 컴포넌트에 스타일을 지정하는 것은 좋은 방법이지만, 때로는 모든 컴포넌트에서 공통적으로 사용되는 스타일이 필요할 때가 있습니다. 이때 createGlobalStyle을 사용하여 전역 스타일을 정의하고 해당 스타일이 모든 컴포넌트에 적용되도록 할 수 있습니다. import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` ..

&기호는 styled-components에서 사용되는 특별한 문법 중 하나입니다. &를 사용하여 현재 스타일링 중인 컴포넌트를 참조할 수 있습니다. 이를 통해 CSS 선택자와 유사한 방식으로 스타일을 적용할 수 있습니다. import styled from 'styled-components'; const Button = styled.button` padding: 10px 20px; border-radius: 4px; font-size: 16px; cursor: pointer; /* 기본 상태 스타일 */ background-color: #fca311; color: #ffffff; border: none; &:hover { /* 호버 상태 스타일 */ background-color: #ffba08; } &:..

ThemeProvider는 styled-components 패키지에서 제공하는 컴포넌트 중 하나로, 테마(theme)를 애플리케이션 전역에서 사용할 수 있도록 해줍니다. ThemeProvider를 사용하면 컴포넌트 계층 구조 어디에서나 일관된 테마를 사용할 수 있습니다. ThemeProvider를 사용하려면 다음과 같이 styled-components와 함께 ThemeProvider 컴포넌트를 임포트하고 사용할 컴포넌트 계층 구조 내에 포함시키면 됩니다. import React from 'react'; import { ThemeProvider } from 'styled-components'; const theme = { colors: { primary: '#fca311', secondary: '#ffba..

styled-components에서 keyframes 함수를 사용하여 CSS 애니메이션을 정의할 수 있습니다. keyframes 함수를 사용하면 애니메이션의 이름과 애니메이션 키프레임을 정의할 수 있습니다. import styled, { keyframes } from 'styled-components'; // keyframes로 회전 애니메이션 정의 const rotateAnimation = keyframes` 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } `; // 애니메이션을 적용할 컴포넌트 const AnimatedDiv = styled.div` width: 100px; height: 100px; background-colo..

styled-components의 attrs 함수를 사용하면 스타일 컴포넌트에 속성(attribute)을 추가할 수 있습니다. 이를 통해 스타일 컴포넌트에 동적인 속성을 전달하고, 해당 속성에 기반한 스타일을 정의할 수 있습니다. attrs 함수는 첫 번째 매개변수로 속성을 포함한 객체를 받습니다. 각 속성은 이름과 값을 가지며, 해당 속성을 스타일 컴포넌트에 전달할 때 사용됩니다. import styled from 'styled-components'; const Input = styled.input.attrs( { type: 'text', placeholder: "Enter text" } )` padding: 10px; border: 1px solid #ccc; `; const App = () => {..

활용하기 1 Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있습니다. 내려준 props 값에 따라서 컴포넌트를 렌더링 하는 것도 가능합니다. Styled Components는 템플릿 리터럴 문법(${ })을 사용하여 JavaScript 코드를 사용할 수 있습니다. props를 받아오려면 props를 인자로 받는 함수를 만들어 사용하면 됩니다. 활용하기 2 Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를 내려줄 수 있습니다. 내려준 props 값에 따라서 컴포넌트를 렌더링 하는 것도 가능합니다. 위 코드의 경우는 삼항 연산자를 활용해 컴포넌트에 skyblue라는 props가 있는지 확인하고, 있으면 배경색으로 skyblue..

CSS 코드를 다룰 때 다음과 같은 불편함을 느껴보신 적 있으신가요? class, id 이름을 짓느라 고민한 적이 있다. CSS 파일 안에서 내가 원하는 부분을 찾기 힘들었다. CSS 파일이 너무 길어져서 파일을 쪼개서 관리해 본 적이 있다. 스타일 속성이 겹쳐서 내가 원하는 결과가 나오지 않은 적이 있다. 이 외에도 여러 가지 어려움이 있을 수 있는데요. 이런 불편함을 CSS를 컴포넌트화 시킴으로써 해결해 주는 라이브러리가 있습니다. 바로 React 환경에서 사용 가능한 Styled Components라는 라이브러리입니다. Styled Components는 앞서 배운 CSS in JS라는 개념이 대두되면서 나온 라이브러리입니다. 기존에 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, Reac..