์์๋ค๋ง๋ค ์ผ์ผ์ด ์ค๋ณต ์๋๋ id๋ class๋ฅผ ์ง์ ์ํด๋ ๋๋ค.
๐ https://react.vlpt.us/styling/02-css-module.html ์ฌ์ดํธ์์ ๋๋คํ ํด๋์ค ์ด๋ฆ์ ์ ์ฉ์ฑ์ ๋ํด์ ์์์ต๋๋ค.
ํด๋์ค ์ด๋ฆ์ ๋ํ์ฌ ๊ณ ์ ํ ์ด๋ฆ๋ค์ด ๋ง๋ค์ด์ง๊ธฐ ๋๋ฌธ์, ์ค์๋ก CSS ํด๋์ค ์ด๋ฆ์ด ๋ค๋ฅธ ๊ด๊ณ ์๋ ๊ณณ์์ ์ฌ์ฉํ CSS ํด๋์ค ์ด๋ฆ๊ณผ ์ค๋ณต๋๋ ์ผ์ ๋ํ์ฌ ๊ฑฑ์ ํ ํ์๊ฐ ์์ต๋๋ค.
์ด ๊ธฐ์ ์ ๋ค์๊ณผ ๊ฐ์ ์ํฉ์ ์ฌ์ฉํ๋ฉด ์ ์ฉํฉ๋๋ค.
๋ ๊ฑฐ์ ํ๋ก์ ํธ์ ๋ฆฌ์กํธ๋ฅผ ๋์
ํ ๋ (๊ธฐ์กด ํ๋ก์ ํธ์ ์๋ CSS ํด๋์ค์ ์ด๋ฆ์ด ์ค๋ณต๋์ด๋ ์คํ์ผ์ด ๊ผฌ์ด์ง ์๊ฒ ํด์ค๋๋ค.)
CSS ํด๋์ค๋ฅผ ์ค๋ณต๋์ง ์๊ฒ ์์ฑํ๊ธฐ ์ํ์ฌ CSS ํด๋์ค ๋ค์ด๋ฐ ๊ท์น์ ๋ง๋ค๊ธฐ ๊ท์ฐฎ์ ๋
๋ฆฌ์กํธ ์ปดํฌ๋ํธ๋ฅผ ์ํ ํด๋์ค๋ฅผ ์์ฑ ํ ๋ ์ ๊ฐ ์์ฃผ ์ฌ์ฉํ๋ CSS ํด๋์ค ๋ค์ด๋ฐ ๊ท์น์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
์ปดํฌ๋ํธ์ ์ด๋ฆ์ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ ์ค๋ณต๋์ง ์๊ฒ ํ๋ค.
์ปดํฌ๋ํธ์ ์ต์๋จ CSS ํด๋์ค๋ ์ปดํฌ๋ํธ์ ์ด๋ฆ๊ณผ ์ผ์น์ํจ๋ค. (์: .Button
์ปดํฌ๋ํธ ๋ด๋ถ์์ ๋ณด์ฌ์ง๋ CSS ํด๋์ค๋ CSS Selector ๋ฅผ ์ ํ์ฉํ๋ค. (์: .MyForm .my-input)
์ค๋ณต ๊ฑฑ์ ์ด ์๋ค!
ํ์ผ ๋ณ๋ก ๊ด๋ฆฌํ ์ ์๊ฒ ๋๊ฒ(import, export)๋ NodeJS ํ๊ฒฝ์ด๋ผ์ ๊ฐ๋ฅํ๋ค.