styled-components5 [react] 예제로 따라하는 리액트 훅(hook) - useState useState 간단한 예시를 통해서 리액트 훅의 useState을 살펴보겠습니다. 위의 사진들처럼 화면 아래쪽에 3개의 동그란 버튼을 누르면, 화면 중앙의 정사각형이 해당하는 버튼의 색으로 변경되는 예입니다. 프로젝트 설치단계부터 하나씩 진행하겠습니다. 리액트에 처음 입문하시는 분들도 천천히 따라 해보시길 바랍니다. create-react-app으로 프로젝트를 설치합니다. npx create-react-app hooks-react 저는 에디터로 Visual Studio code를 사용하겠습니다. code 명령어로 프로젝트를 실행합니다. code hooks-react 기본화면을 지우기 위해 src폴더에서 App.js와 index.js를 제외한 모든 파일을 지워줍니다. 스타일 작업을 위해 styled-co.. 2019. 8. 2. [react] styled components에서 global style(전역 스타일) 적용하기 Global style styled-components는 컴포넌트 스코프 뿐만 아니라 전역 스타일을 적용하는 기능도 제공합니다. 전역 스타일은 애플리케이션의 모든 컴포넌트에 영향을 미치는 CSS 규칙입니다. 이를 통해 폰트, 색상, 마진 등과 같은 기본적인 스타일을 일관되게 설정할 수 있습니다. 1. createGlobalStyle을 사용하여 전역 스타일을 정의하는 컴포넌트를 생성합니다. import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; background-color:.. 2019. 7. 30. [react] styled components에서 animation 및 keyframes사용하기 Animation과 keyframes styled-components는 CSS의 @keyframes 규칙을 javascript 구문으로 통합하여 애니메이션을 적용할 수 있게 해 줍니다. 또한 keyframes를 생성하다 보면 비슷한 이름으로 중복되는 경우가 많은데요. styled-components에서는 css의 @keyframes와 달리 컴포넌트 파일별로 네임스페이스가 구분되어 중복될 걱정 없이 keyframes를 생성할 수 있습니다. import React from "react"; import styled, { keyframes } from "styled-components"; const App = () => ; const bounce = keyframes` 0% { transform: scale(1.. 2019. 7. 30. [react] styled components에서 style확장(재사용)하기 style 재사용 styled-components로 생성한 컴포넌트는 일반 React 컴포넌트처럼 상속이 가능합니다. 중복된 스타일을 가지거나 특정 스타일을 확장하고 싶을 때 컴포넌트를 확장하여 사용할 수 있습니다. Button을 만들고 GreenButton과 BlueButton에서 Button을 확장하여 각각 스타일을 적용해 보겠습니다. import React from "react"; import styled from "styled-components"; const App = () => ( 버튼 초록버튼 파란버튼 ); const Container = styled.div` display: flex; `; const Button = styled.button` outline: none; border: non.. 2019. 7. 30. [react] 스타일드 컴포넌트(styled components) 1. Styled-components? styled-components는 react와 react-native에서 스타일을 적용하는 데 사용되는 라이브러리입니다. styled-components 없이 전통적인 CSS 방식(css 혹은 scss 임포트)으로 애플리케이션에 스타일을 적용하면 코드의 일관성을 유지하기 어렵고, 의존성과 글로벌 네임스페이스의 관리가 복잡해집니다. styled-components는 이러한 문제를 해결하기 위해 등장했으며 컴포넌트 단위로 스타일을 캡슐화하여 모듈화 및 재사용성을 높여줍니다. 2. 전통 CSS와 다른 점 2-1. CSS-in-JS styled-component는 CSS-in-JS 방식으로 작동합니다. CSS-in-JS는 CSS를 JavaScript 파일 내에 작성하는 패.. 2019. 7. 30. 이전 1 다음
