[React] Component Styling

 

 

react logo

 

Component Styling

Component Styling(컴포넌트 스타일)

컴포넌트에 스타일을 입히는 방식은 4가지 방식이 있습니다. 먼저, 일반적인 CSS 방식(외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 시트)를 사용하는 방식이 있습니다. 그 외에 SASS(Syntactically Awesome Style Sheet) 방식, CSS 모듈 방식, styled-component 방식을 주로 사용합니다.

 

조금 더 자세히 살펴보겠습니다. 일반적인 CSS 방식은 Html 문서에서 사용하는 Css방식과 동일한 방식으로 외부에 Css파일을 만들어서 참조하거나 인라인 스타일을 지정하거나 변수로 스타일을 지정해서 넘길 수도 있습니다.

 

일반적인 SASS 방식

다음으로, SASS 방식에는 CSS 전처리기가 복잡한 스타일 시트 작업을 쉽게 처리해주고 스타일 코드의 재사용성을 높여줍니다. 코드의 가독성이 일반적인 Css방식보다 좋습니다. 이 방식은 또한 확장자가 .sass, .scss인 파일을 지원하며, CSS, SASS, SCSS는 모두 조금씩 문법이 다릅니다. 마지막으로, sass 설치는 다음과 같이 터미널에서 명령어를 통해 수행합니다.

//터미널에서 입력(각 프로젝트별로 별도 진행)
npm install sass

 

Css 모듈 방식

Css 파일을 불러와서 클래스를 지정할 때 클래스 이름을 고유한 값으로 지정해주는 방식입니다. 프로그램이 해시값을 자동으로 설정하게 되며, [파일명]_[클래스명]_[해시값]의 형태로 클래스 이름을 정해줍니다. 클래스명을 유일하게 만들어주고 클래스명의 중첩을 방지할 수 있으며 스타일을 동일하게 사용할 수 있어 유용합니다. 또한, Css 모듈로 사용할 파일의 파일명은 파일명.module.css로 지정합니다.

 

파일명 해시값으로 지정

위에서 보는 것처럼 클래스 이름이 CssModule_wrapper_c9xu0(해시값) 이렇게 설정된 것을 확인할 수 있습니다. 코드는 아래와 같습니다.  여기서 지정한 wrapper 클래스와 파일명인 CssModule.js가 잘 결합되어 자동으로 해시값과 결합해서 생성된 클래스 명입니다.

    <div className={`${styles.wrapper}`}>
        CssModule
    </div>

 

 

Styled-Component 방식

styled-components 라이브러리에서 제공하는 기능으로 백틱(``)을 이용해서 태그와 스타일까지 한 번에 정의된 컴포넌트를 생성해줍니다. 태그와 스타일까지 한 번에 지정하는 탬플릿 리터럴을 tagged 탬플릿 리터럴이라고 합니다. 원활하게 사용하기 위해서는, styled-components 설치를 해줘야 합니다. 아래 코드는 각 프로젝트마다 입력해주면 됩니다.

npm install styled-components