<div id="readability-page-1" class="page"><div id="entry-view">
            
            <main>
                <div>
                        <article id="mainContent">
                            <div>
                                <p><a href="/m/category/%EC%9D%B4%EB%A1%A0/Frontend"><span>이론/Frontend</span></a></p><h3>classname으로 스타일 간결하게 관리하기</h3>
                            </div>
                            <p><cite>유세지</cite>
                                <span> 2024. 3. 24. 23:59</span>
                            </p>
                            
            



            <div><figure data-ke-mobilestyle="widthOrigin" data-filename="Thumbnail (7).png" data-origin-width="1920" data-origin-height="1080"><span data-url="https://blog.kakaocdn.net/dn/cwqRD2/btsF1DEexVY/kCgvO8j4XYSuc1VKAsphT0/img.png" data-lightbox="lightbox"><img src="https://blog.kakaocdn.net/dn/cwqRD2/btsF1DEexVY/kCgvO8j4XYSuc1VKAsphT0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="Thumbnail (7).png" data-origin-width="1920" data-origin-height="1080"></span></figure>




<p data-ke-size="size16">React에서 CSS in JS를 사용하지 않으면, 다양한 스타일을 적용하기 위해 한 요소에 여러 클래스 네임들을 적용하게 되곤 합니다. 이렇게 여러 클래스 네임들이 중첩되면 보기 어려워지는 경우가 많아지는데, 이럴때 <a href="https://github.com/JedWatson/classnames" target="_blank" rel="noopener">classnames 라이브러리</a>를 사용하면 요소에 클래스 네임들을 간결하게 관리할 수 있는 라이브러리입니다.&nbsp;</p>


<h3 data-ke-size="size23"><b>설치</b></h3>
<pre id="code_1711291339533" data-ke-language="typescript" data-ke-type="codeblock"><code>// npm을 사용한다면,
npm install classnames

// yarn을 사용한다면,
yarn add classnames</code></pre>

<p data-ke-size="size16">먼저 사용하는 패키지 매니저를 통해 classnames 라이브러리를 설치합니다.</p>


<h3 data-ke-size="size23"><b>적용</b></h3>
<p data-ke-size="size16">이제 적용해볼텐데, 아래와 같은 상태의 리액트 컴포넌트가 있다고 가정해보겠습니다.</p>
<pre id="code_1711291566921" data-ke-language="typescript" data-ke-type="codeblock"><code>import * as styles form './style.css.ts';

export function Component() {
  return (
    &lt;div classnames={`${styles.MainContainer} ${styles.FlexCenter} ${styles.InnerPadding}`}&gt;
      &lt;p&gt;hello, world!&lt;/p&gt;
    &lt;/div&gt;
  )
}</code></pre>

<p data-ke-size="size16">세 가지 클래스 네임이 겹치면서 가독성을 해치고 있는데, classnames를 통해 간결하게 만들어보겠습니다.</p>

<pre id="code_1711291713799" data-ke-type="codeblock" data-ke-language="typescript"><code>import classNames from 'classnames';
import * as styles form './style.css.ts';

export function Component() {
  return (
    &lt;div classnames={classNames(styles.MainContainer, styles.FlexCenter, styles.InnerPadding)}&gt;
      &lt;p&gt;hello, world!&lt;/p&gt;
    &lt;/div&gt;
  )
}</code></pre>

<p data-ke-size="size16">백틱과 달러 기호가 사라져 한결 파악하기 편해진 모습입니다.</p>

<p data-ke-size="size16">하지만, classnames는 조건부 스타일을 주어야 할 때 훨씬 더 큰 힘을 발휘합니다.</p>
<p data-ke-size="size16">라이브러리 없이는 삼항 연산자를 통해 아래처럼 스타일을 주어야 했습니다.</p>

<pre id="code_1711291951588" data-ke-type="codeblock" data-ke-language="typescript"><code>import * as styles form './style.css.ts';

export function Component() {
  return (
    &lt;div classnames={`${styles.MainContainer} ${styles.FlexCenter} isPadding ? ${styles.InnerPadding} : ''`}&gt;
      &lt;p&gt;hello, world!&lt;/p&gt;
    &lt;/div&gt;
  )
}</code></pre>



<p data-ke-size="size16">라이브러리를 사용하면, boolean 값을 넘겨줌으로써 간편히 조건부 스타일을 줄 수 있습니다.</p>

<pre id="code_1711291888819" data-ke-type="codeblock" data-ke-language="typescript"><code>import classNames from 'classnames';
import * as styles form './style.css.ts';

export function Component() {
  return (
    &lt;div classnames={classNames(styles.MainContainer, styles.FlexCenter, { [styles.InnerPadding]: isPadding })}&gt;
      &lt;p&gt;hello, world!&lt;/p&gt;
    &lt;/div&gt;
  )
}</code></pre>



<p data-ke-size="size16">정말 간단한 라이브러리지만, 코드의 가독성을 한껏 올려주는 효과를 가져 짧게 정리해보았습니다.</p>
<p data-ke-size="size16">덕분에 감사하게 사용중이네요 :)</p>
</div>
            





<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="3250933968" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-VHBugUKpJ1qm98uW"></ins>




                            
                        </article>
                        
                            
                        
                        
                        
                        
                        
                            
                        

                        
                        

                        
                    </div>
            </main>
        </div></div>

개발의 올바르지 않은 용례

React에서 CSS in JS를 사용하지 않으면, 다양한 스타일을 적용하기 위해 한 요소에 여러 클래스 네임들을 적용하게 되곤 합니다. 이렇게 여러 클래스 네임들이 중첩되면 보기 어려워지는 경우가 많아지는데, 이럴때 classnames 라이브러리를 사용하면 요소에 클래스 네임들을 간결하게 관리할 수 있는 라이브러리입니다. 
 
 
설치
// npm을 사용한다면,
npm install classnames
// yarn을 사용한다면,
yarn add classnames
 
먼저 사용하는 패키지 매니저를 통해 classnames 라이브러리를 설치합니다.
 
 
적용
이제 적용해볼텐데, 아래와 같은 상태의 리액트 컴포넌트가 있다고 가정해보겠습니다.
import * as styles form './style.css.ts';
export function Component() {
  return (
    <div classnames={`${styles.MainContainer} ${styles.FlexCenter} ${styles.InnerPadding}`}>
      <p>hello, world!</p>
    </div>
  )
}
 
세 가지 클래스 네임이 겹치면서 가독성을 해치고 있는데, classnames를 통해 간결하게 만들어보겠습니다.
 
import classNames from 'classnames';
import * as styles form './style.css.ts';
export function Component() {
  return (
    <div classnames={classNames(styles.MainContainer, styles.FlexCenter, styles.InnerPadding)}>
      <p>hello, world!</p>
    </div>
  )
}
 
백틱과 달러 기호가 사라져 한결 파악하기 편해진 모습입니다.
 
하지만, classnames는 조건부 스타일을 주어야 할 때 훨씬 더 큰 힘을 발휘합니다.
라이브러리 없이는 삼항 연산자를 통해 아래처럼 스타일을 주어야 했습니다.
 
import * as styles form './style.css.ts';
export function Component() {
  return (
    <div classnames={`${styles.MainContainer} ${styles.FlexCenter} isPadding ? ${styles.InnerPadding} : ''`}>
      <p>hello, world!</p>
    </div>
  )
}
 
 
 
라이브러리를 사용하면, boolean 값을 넘겨줌으로써 간편히 조건부 스타일을 줄 수 있습니다.
 
import classNames from 'classnames';
import * as styles form './style.css.ts';
export function Component() {
  return (
    <div classnames={classNames(styles.MainContainer, styles.FlexCenter, { [styles.InnerPadding]: isPadding })}>
      <p>hello, world!</p>
    </div>
  )
}
 
 
 
정말 간단한 라이브러리지만, 코드의 가독성을 한껏 올려주는 효과를 가져 짧게 정리해보았습니다.
덕분에 감사하게 사용중이네요 :)

classname으로 스타일 간결하게 관리하기

댓글