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 파일의 스타일 선언하고 사용하는 방법에 대하여 알아보았습니다.