웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > react

react 앱 jsx 파일 내부에 css style 컴포넌트 및 전역으로 선언하기

Last Modified : 2020-07-15 / Created : 2020-07-12
6,223
View Count
React 앱에서 css를 선언하여 사용하는 방법에 대하여 알아보려고 합니다.




# React 앱에서 css 스타일 선언 및 사용하기


스타일을 선언하고 사용하는 방법은 크게 두 가지로 구분됩니다. 하나는 모듈 형태로 추가하여 사용하는 방법이고 다른 하나는 jsx 파일 내부에 style 태그를 추가하여 사용하는 방법입니다.

둘 다 사용되는 방법이지만 여기서는 jsx 파일 내부에 style 태그를 인라인으로 추가하는 방법을 알아보고자 합니다.

jsx에 style 태그로 추가하는 방법



! jsx에 inline 태그 형식으로 추가하는 방법

jsx 타입의 경우 내부에 렌더링 할 태그 요소를 직접 입력할 수 있습니다. 이 때 style 태그 요소 역시 추가할 수 있습니다. 이 경우 전역 스타일(global style)과 컴포넌트 스타일(component style)을 각각 아래처럼 구분하여 선언할 수 있죠.
// 컴포넌트 형태로 추가하기
<style jsx />

// 전역 스타일로 스타일 추가하기
<style jsx global />

둘 다 원하는 방식으로 선택하여 사용하면 됩니다. 전역 스타일의 경우 전체 페이지에 추가되므로 전역 방식의 스타일 추가시 중복될 여지가 없는지 잘 확인할 필요가 있겠죠.

아래는 각각 컴포넌트 스타일과 전역 스타일을 jsx 파일 내부에서 선언한 코드입니다.

@ componentStyle.jsx
import React from 'react';

export default () => {
  return (
    <>
      <style jsx>{`
        .text-color { color: red; }
      `}</style>
    </>
  )
};

위 코드를 살펴보면 컴포넌트 내부에 <style jsx>를 사용하여 스타일을 추가했습니다. 이 때 주의할 점은 <style jsx> 바로 뒤에 {` `} 기호를 사용하여 css 스타일을 랩핑해주었다는 점입니다. 이렇게 하지 않으면 에러가 발생하므로 반드시 css 스타일을 작성하기 전에 추가해주어야 컴파일 에러가 나타나지 않습니다.

아래의 빨간색 텍스트 {` 스타일... `}처럼 작성해야 합니다.
<style jsx>{`
.text-color { color: red; }
`}</style>

이제 전역 스타일 선언 방법입니다.


! jsx 파일 내부에 전역 스타일 선언하여 사용하기


위의 Component 방식과 동일합니다. 다만 <style jsx>가 아닌 global을 추가하여 사용합니다. <style jsx global>이 되어야 하죠. 아래를 봐주세요.

@ GlobalStyle.jsx
export default () => (
  <>
    <style jsx global>{`
      body {
        background: red
      }
    `}</style>
  </>
)

위의 작성된 코드처럼 <style jsx global>로 표기해야 합니다. 또한 스타일 작성 이전에 {` `} 기호를 사용하여 랩핑하는 것도 반드시 필요합니다.


! 외부 css 파일을 로드하는 방법


스타일 코드를 jsx 내부가 아닌 외부 css를 만들어 불러오는 것도 가능합니다. 아래와 같이 @import를 사용하여 불러올 수 있습니다.
import React from 'react';

export default () => {
  return (
    <>
      <style jsx global>{`
        @import '/static/styles/page/login.css';
      `}</style>
    </>
  )
};

여기까지 jsx 파일의 스타일 선언하고 사용하는 방법에 대하여 알아보았습니다.

Previous

[React] 리스트 타입 데이터 map() 메소드로 jsx에서 렌더링, 출력하기

Previous

[React] antd 라이브러리 checkbox, radio 사용방법 및 예제