[styled-components] within a component and outside of the render

 

 

  이번에는 Styled-components를 사용하는 위치에 대해서 알아보고자 한다. 이 부분의 경우 응용 프로그램에 특성과 상황에 따라 잘 고려돼야 할 부분이기 때문에 중요한 영역이다. 

 

• Styled-Components가 컴포넌트에서 작동하는 경우  

  스타일이 지정된 컴포넌트는 JS 코드에서 직접 CSS 스타일을 정의하고 사용할 수 있도록 하여 컴포넌트 내에서 작동한다. styled-components를 사용하면 styled 함수를 호출하고 태그 이름이나 컴포넌트를 전달하여 스타일이 지정된 컴포넌트를 정의할 수 있다. styled 함수는 지정된 스타일을 포함하는 새 컴포넌트를 반환한다.

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

const Title = styled.h1`
  font-size: 32px;
  color: red;
`

function MyComponent() {
  return (
    <div>
      <Title>Hello world</Title>
    </div>
  )
}

export default MyComponent;

이 예에서 h1 태그 이름으로 styled 함수를 호출하여 Title 스타일 컴포넌트를 정의한다. 그런 다음 탬플릿 리터럴을 사용하여 Title 컴포넌트에 대한 일부 CSS 스타일을 지정한다.

  다른 컴포넌트와 마찬가지로 MyComponent 컴포넌트 내에서 Title 컴포넌트를 사용할 수 있다. Title 컴포넌트가 렌더링되면 지정된 CSS 스타일이 포함된다.

  컴포넌트 내에서 styled-components를 사용하는 한 가지 이점은 특정 HTML 태그의 모든 인스턴스에 스타일을 전체적으로 적용하는 대신 해당 컴포넌트에 특정한 스타일을 정의할 수 있다는 것이다. 이렇게 하면 해당 컴포넌트의 특정 인스턴스를 사용자 지정할 수 있으면서도 응용 프로그램 전체에서 일관되게 보이는 재사용 가능한 컴포넌트를 쉽게 만들 수 있다.

 

• 스타일이 컴포넌트 외부에서 정의되어 불러서 사용하는 경우

  styled-component에서 별도의 파일을 만들고 스타일이 지정된 컴포넌트를 export하고, 특정 컴포넌트에서 외부의 스타일이 지정된 컴포넌트를 import해서 렌더링할 수 있다. 이를 통해 코드를 보다 체계적이고 모듈식으로 유지할 수 있고, 앱의 여러 부분에서 스타일이 지정된 컴포넌트를 더 쉽게 재사용할 수 있다.

// Button.js

import styled from 'styled-components';

export const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px;
  margin: 10px;
`

이 예제는 앱 전체에서 사용할 수 있는 Button 스타일 컴포넌트를 정의한다. 응용 프로그램의 다른 부분에서 가져와 사용할 수 있도록 export한다.

 

// MyComponent.js

import React from 'react';
import { Button } from './Button';

function MyComponent() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}

이 예에서 Button.js 파일에서 Button 컴포넌트를 가져와 MyComponent 컴포넌트 내에서 사용한다. 외부에서 스타일을 지정하고 컴포넌트를 import하여 렌더링하는 방법은 특히나 응용 프로그램이 복잡해질수록 코드를 더 모듈화하기 좋고 유지 관리하기 쉽게 만들어 준다.