Design-loving front-end engineer
Ryong
Design-loving front-end engineer
์ „์ฒด ๋ฐฉ๋ฌธ์ž
์˜ค๋Š˜
์–ด์ œ
    • Framework
    • React
      • Concept
      • Library
      • Hook
      • Component
      • Test
    • NodeJS
    • Android
      • Concept
      • Code
      • Sunflower
      • Etc
    • Flutter
      • Concept
      • Package
    • Web
    • Web
    • CSS
    • Language
    • JavaScript
    • TypeScript
    • Kotlin
    • Dart
    • Algorithm
    • Data Structure
    • Programmers
    • Management
    • Git
    • Editor
    • VSCode
    • Knowledge
    • Voice
Design-loving front-end engineer

Ryong

React/Library

[ React ] classnames

2022. 8. 4. 09:18

๐Ÿ”ด  Introduction

โšช  html์—์„œ๋Š” class๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํŽธํ•˜๊ฒŒ css๋ฅผ ์“ธ์ˆ˜ ์žˆ์ง€๋งŒ React์—์„œ๋Š” class๊ฐ€ ์˜ˆ์•ฝ์–ด๋กœ ์‚ฌ์šฉ์ค‘์ด๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋‚˜์˜จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

 

๐ŸŸ   Official

 

classnames

A simple utility for conditionally joining classNames together. Latest version: 2.3.1, last published: a year ago. Start using classnames in your project by running `npm i classnames`. There are 35414 other projects in the npm registry using classnames.

www.npmjs.com

 

๐ŸŸก  Install

 
npm i classnames

 

๐ŸŸข  Usage

 
// object value์— boolean ๊ฐ’์„ ํŒ๋ณ„ํ•˜๋Š” ์‹์„ ๋„ฃ์–ด์„œ ์‘์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

 

 

์ €์ž‘์žํ‘œ์‹œ (์ƒˆ์ฐฝ์—ด๋ฆผ)

'React > Library' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[ React ] react-beautiful-dnd  (0) 2022.08.08
[ React ] react-hook-form  (0) 2022.08.04
[ React ] redux  (0) 2022.08.02
[ React ] react-router-dom  (0) 2022.07.31
[ React ] react-helmet  (0) 2022.07.30
    'React/Library' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
    • [ React ] react-beautiful-dnd
    • [ React ] react-hook-form
    • [ React ] redux
    • [ React ] react-router-dom
    Design-loving front-end engineer
    Design-loving front-end engineer
    ๋””์ž์ธ์— ๊ด€์‹ฌ์ด ๋งŽ์€ ๋ชจ๋ฐ”์ผ ์•ฑ ์—”์ง€๋‹ˆ์–ด Ryong์ž…๋‹ˆ๋‹ค.

    ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”