React 및 styled-components 시작하기

안녕하세요 여러분!

내 친구는 Frontend Mentor이라는 멋진 웹사이트를 보여줬습니다. 이 웹사이트는 CSS 프로젝트에서 작업하여 복제하려는 미리 설계된 과제를 사용하여 CSS 기술을 향상시킬 수 있습니다. 나는 CSS와 사랑/혐오 관계가 있다는 것을 감안할 때 아이디어를 좋아했습니다.

시도해 볼 생각이었지만 CSS를 향상시키면서 새로운 기술을 배우기 위해 React와 함께 스타일이 지정된 구성 요소를 구현해 보고 싶다는 생각도 했습니다.

인턴십에서 styled-components를 약간 사용했지만 그것을 구현하는 React 프로젝트를 시작한 적이 없습니다. 저는 개인적으로 styled-components 뒤에 있는 사고 과정을 좋아하고 CSS 구성 요소를 자주 재사용할 수 있는 대규모 프로젝트에서 매우 유용하다고 생각합니다.

따라서 관심이 있는 경우 React에서 styled-components를 사용하는 방법에 대한 약간의 자습서가 있습니다. 그리고 더 관심이 있으시면 지금까지의 도전과제 진행 상황을 볼 수 있습니다here.

단계별로

React 앱 만들기

그냥 good 'ol을 사용하시면 됩니다. create-react-app

npx create-react-app my-new-app

또는 React 앱을 만들고 싶습니다. 당신은 태그나 당신이 좋아하는 무엇이든 자유롭게 사용할 수 있습니다. 저도 그것을 더 잘하려고 노력하면서 우연히 제 타입스크립트를 추가했습니다.

스타일 구성 요소 설치

나는 원사의 열렬한 팬이지만 원하는 것을 사용하십시오!

yarn add styled-components

또는

npm i styled-components

구성 요소 생성

모든 설치가 완료되면 재미있는 부분으로 넘어가서 구성 요소를 만들 수 있습니다!

따라서 styled-components가 작동하는 방식은 본질적으로 다양한 구조가 될 수 있는 명명된 구성 요소를 만드는 것입니다.

그것들은 일반적인 기능 또는 클래스 구성 요소 내에 보관되며 해당 구성 요소 이름을 사용하여 호출 및 표시됩니다.

다음은 내 카드 클래스 중 하나의 요약된 예입니다.

import React from 'react';
import styled from 'styled-components';

const Background = styled.div`
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  width: 100%;
  border: 1px solid grey;
  margin: auto;
  padding: 50px 20px;
  border-radius: 20px;
  border: 1px solid #f2f2f2;
  box-shadow: 1px 1px 1px 1px #f2f2f2;
`;

class CardOne extends React.Component {
    render() {
        return (
        <Background>
            <LeftImage>
            <RightText>
        </Background>
        )
    }
}

export default CardOne;

위에서 보면 CardOne 클래스의 렌더링 및 반환 내에서 Background 구성 요소가 표시되는 것을 볼 수 있습니다.

그리고 위에서 우리는 Background를 styled.div로 선언했습니다. 이는 본질적으로 스타일이 지정된 구성 요소에 액세스하는 div입니다. styled를 사용하여 버튼(styled.button), 단락(styled.p)을 만들 수 있습니다.

그리고 선언된 배경 변수 내에서 구성 요소 내부의 모든 CSS를 포함합니다.

따라서 div 내부에 있는 각 부분을 분류하고 개별적으로 또는 부모를 통해 모두 스타일을 지정할 수 있는 좋은 방법입니다.

멋져지다

styled-components를 사용하여 아주 멋진 것을 얻을 수도 있고 CSS 내부에 로직을 작성할 수도 있습니다. 예를 들어 다음과 같을 수 있습니다.

const StyledTextField = styled.input`
  color: ${(props) =>
    props.isEmpty ? "none" : props.active ? "purple" : "blue"};
`;

따라와 주셔서 감사합니다. 이 튜토리얼이 styled-component로 시작하는 모든 사람에게 도움이 되기를 바랍니다. 즐거운 코딩 여러분!

자원

styled-components documentation

스타일 구성 요소 사용에 대한 Smashing Magazinepost이 있어야 합니다

.