Angular, React, Svelte 그리고 Vue로 스타일링 해볼까?

Angular, React, Svelte, Vue Styling

2022.02.04수정

featured image thumbnail for post Angular, React, Svelte 그리고 Vue로 스타일링 해볼까?

Prologue

이번 글에서는 Angular, React, Svelte, 그리고 Vue에서는 어떻게 스타일링 코드를 작성해야하는지, CSS 파일은 어떻게 작성해야하는지 알려드립니다.

이 글은 원래 지난 글에 통합할 예정이었는데 생각보다 지난 글 내용이 너무 길어져서 분리했습니다.

이 글은 지난 글과 마찬가지로 포스타입에 올렸던 글을 통합한 글이며, 스타일과 CSS로 각각 분리되어있던 내용을 하나로 합친 글입니다.

Inline 방식

If, HTML

<p style="color: hotpink; font-size: 1rem">헬로 월드</p>

If, Angular

위 HTML 방식처럼 style="..." 방식을 사용할 수도 있고, 아래와 같이 class형을 사용할 수도 있습니다.

@Component({
  selector: 'app-hello',
  template: '<p [style.color]="color" [style.fontSize]="fontSize">헬로 월드</p>',
  styles: [],
})
export class HelloWorldComponent implements OnInit {
  color: string = 'hotpink';
  fontSize: string = '1rem';
}

If, React

방식 #1.

function HelloWorldComponent() {
  return <div style={{ color: 'hotpink', fontSize: '1rem' }}>헬로 월드</div>
}

방식 #2.

const styleObject = {
  color: 'hotpink',
  fontSize: '1rem',
};

function HelloWorldComponent() {
  return <div style={styleObject}>헬로 월드</div>
}

If, Svelte

Svelte도 Angular처럼 HTML 예제와 같은 방식으로 인라인 스타일을 구현할 수 있습니다. 참고하세요.

방식 #1.

<!-- Parent Component -->
<script>
  import Styling from './Styling.svelte';
</script>

<Styling color="hotpink" fontSize="1rem" />

<!-- Styling Component -->
<script>
  export let color;
  export let fontSize;
</script>

<p style="color: {color}; font-size: {fontSize}">
  헬로 월드
</p>

방식 #2.

<!-- Parent Component -->
<script>
  import StyleObject from './StyleObject.svelte';
</script>

<StyleObject ref="hotpink" />

<style>
  :global([ref=hotpink]) {
    color: hotpink;
    font-size: 1rem;
  }
</style>

<!-- StyleObject Component -->
<script>
  export let ref;
</script>

<p {ref}>
  헬로 월드
</p>

If, Vue

방식 #1.

<div v-bind:style="{ color: color, fontSize: fontSize + 'rem' }">헬로 월드</div>
<script>
  data: {
    color: 'hotpink',
    fontSize: 1
  }
</script>

방식 2.

<div v-bind:style="styleObject">헬로 월드</div>
<script>
  data: {
    styleObject: {
      color: 'hotpink',
      fontSize: '1rem'
    }
  }
</script>

emotion 사용하기

If, React

형태는 inline과 비슷한데 차이점이라면 변수 자체가 태그처럼 사용된다는 점입니다.

const HelloWorld = styled.div({
  fontSize: '1rem',
  color: 'hotpink',
})

function Home() {
  return <HelloWorld>헬로 월드</HelloWorld>
}

export default Home

If, Svelte

Svelte에서는 React와 다르게 변수 형태로 사용 가능합니다.

그리고 React에서는 emotion을 위 예제처럼 return하는 파일에 포함해서 작성이 가능하지만 Svelte에서는 따로 .js 파일로 분리해야한다는 점이 존재합니다.

또한 styled.tag({})가 아니라 css 형태로만 작성이 가능합니다.

// styles.js

const { css } = emotion;

export const helloWorld = css`
  font-size: 1rem;
  color: hotpink
`;

<script>
  import { helloWorld } from './styles.js';
</script>

<div class="{helloWorld}">헬로 월드</div>

emotion이 class 이름 형태로 사용되기 때문에 class를 2개 이상 사용하여 조합이 가능합니다.

// styles.js

const { css } = emotion;

export const hello = css`
  font-size: 1rem
`;

export const world = css`
  color: hotpink
`;

<script>
  import { hello, world } from './styles.js';
</script>

<div class="{hello} {world}">헬로 월드</div>

Global CSS

React와 Next.js에서는 대개 global.css라는 파일명을 사용합니다. 따로 설정이 필요하지 않습니다.

Sass 사용시 global.sass 파일명을 사용하면 됩니다. 다만, React에서 Sass 사용시 추가로 import 해야하는 패키지가 있습니다.

이 패키지에 대해서는 아래 Sass 설명 부분을 참고하세요.

.hello-world {
  font-size: 1rem;
  color: hotpink;
}

Svelte에서는 .css 파일을 따로 사용하지 않고 .svelte 내부에서 :global(선택자) 형태로 작성됩니다. (Vue 동일)

<style>
  :global(.hello-world) {
    font-size: 1rem;
    color: hotpink
  }
</style>

CSS 사용하기

React에서는 Global CSS가 아닌 CSS 즉, CSS Module이 아니어도 CSS 파일 import가 가능합니다. 이렇게 했을 때는 className이 중복 사용되어 유지보수가 힘들어지는 부분을 간과하면 안됩니다.

Next.js는 Global CSS가 아닌 이상은 CSS Module 형태로만 사용이 가능합니다.

// className={componentName.camelCase} 또는 className={componentName['kabob-case']}
import styles from './HelloWorld.module.css'

function Home() {
  return <div className={styles['hello-world']}>헬로 월드</div>
}

export default Home

주석으로 설명했지만 하이픈(-)을 사용할 게 아니라면 componentName.camelCase 형태도 가능하지만 하이픈을 사용할 거라면 반드시 componentName['kabob-case'] 형태를 사용해야 합니다.

다음은 2개 이상의 className을 사용하는 예제입니다.

import styles from './HelloWorld.module.css'

function Home() {
  return <div className={`${styles.hello} ${styles.world}`}>헬로 월드</div>
}

export default Home

Svelte에서는 Global이 아닌 CSS 형태의 코드는 알아서 CSS Module 형태로 동작합니다. 단, class="..." 형태가 아닌 class:... 형태로 불러와야 합니다.

<style>
  .hello-world {
    font-size: 1rem;
    color: hotpink
  }
</style>

<div class:hello-world>헬로 월드</div>

class를 여러개 쓰기 위해서는 class:name1 name2라던가 class:name1+name2, class:name1,name2가 아닌 class:name1 class:name2처럼 써야 합니다.

<style>
  .hello {
    font-size: 1rem;
  }
  .world {
    color: hotpink;
  }
</style>

<div class:hello class:world>헬로 월드</div>

Sass 사용하기

React는 sass 패키지가 필요합니다.

파일을 불러올 때는 .css가 아닌 .sass 파일을 import 해야 합니다.

## npm
$ npm i -D sass

## Yarn
$ yarn add -D sass

Svelte에서는 sass가 아닌 node-sass를 씁니다.

## npm
$ npm i -D svelte-preprocess node-sass

## Yarn
$ yarn add -D svelte-preprocess node-sass

React와 Next.js에서는 sass관련해서 최신 버전이라면 따로 추가 세팅이 필요 없는데 Svelte에서는 svelte-preprocess 패키지를 활용해야 하므로 추가 세팅이 필수입니다.

// rollup.config.js

// 상단에 추가
import autoPreprocess from 'svelte-preprocess';

// plugins preprocess 추가
export default {
  plugins: [
    svelte({
      preprocess: autoPreprocess(),
      ...
    })
  ]
}

Svelte는 .sass파일을 import해서 사용하는 게 아니라 inline 형태로 불러와야 하기 때문에 type 세팅이 들어가야 합니다.

<style type="text/sass">
  .hello-world
    font-size: 1rem
    color: hotpink
</style>

<div class:hello-world>헬로 월드</div>

style 내부의 코드는 기존의 Sass와 동일하고, class명 불러오는 것은 위에서 CSS 코드를 썼던 것과 같이 class:className 형태로 불러오면 됩니다.

emotion, CSS, Sass의 예제는 React와 Svelte 둘만 설명했습니다.

Epilogue

이번 글은 지난 글과 마찬가지로 너무 노잼이었죠?

죄송합니다! (사실은 하나도 안 미안해!)

다음 글은 4개의 프레임워크들을 베이스로 한 일종의 확정 프레임워크인 Angular Universal, Next.js, SvelteKit, Nuxt에 대해서 다뤄보겠습니다.

많은 관심 부탁드려요! (솔직히 별로 기대 안되지?)

글이 재미없는 건 내가 유교걸이라서... 거 미안하게 됐수다.

FIN!