Programming/React

[ React ] ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ react-icons, styled-components ๋ชจ๋“ˆ ์„ค์น˜

seulye 2022. 8. 3. 11:10

1. ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ · GitBook (vlpt.us)

 

1. ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ · GitBook

1. ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ์˜ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๊ธฐ ์ „์—, ์šฐ๋ฆฌ ํ”„๋กœ์ ํŠธ์—์„œ ํ•„์š”ํ•œ ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๋“ค์˜ UI ๋ฅผ ๋ฏธ๋ฆฌ ๋งŒ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์šฐ์„  create-react-app ์„ ์‚ฌ์šฉํ•˜์—ฌ ์ƒˆ๋กœ์šด ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค์–ด

react.vlpt.us

 

์ด ๊ธ€์„ ์ฐธ๊ณ ํ•˜์—ฌ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ๋กœ ํˆฌ๋‘๋ฆฌ์ŠคํŠธ๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

ํ•ด๋‹น ๊ธ€์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ค€์ด์—ฌ์„œ ๊ทธ๋Œ€๋กœ ๋”ฐ๋ผํ•˜๋ฉด ์•ˆ ๋œ๋‹ค. 

react-icons ์„ค์น˜๋ถ€ํ„ฐ ๋‹ฌ๋ผ์„œ ๋ง‰ํ˜€๋ฒ„๋ฆฐ ๊น€์—, ๊ธฐ๋กํ•˜๋ฉด์„œ ํ•ด๋ณธ๋‹ค.

 

โ›… react-icons, styled-components ์„ค์น˜

https://www.npmjs.com/package/styled-components

 

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress. Latest version: 5.3.5, last published: 4 months ago. Start using styled-components in your project by running `npm i styled-components`. There are

www.npmjs.com

https://yarnpkg.com/package/react-icons

 

https://yarnpkg.com/package/react-icons

Fast, reliable, and secure dependency management.

yarnpkg.com

https://ko-de-dev-green.tistory.com/74?category=865864 

 

Typescript์™€ React npm ๋ชจ๋“ˆ ์„ค์น˜๊ด€๋ จ ์ •๋ณด.

Typescript์™€ React npm ๋ชจ๋“ˆ ์„ค์น˜ ๊ด€๋ จ ์ •๋ณด. ๊ฐœ๋ฐœ์ž์— ๊ด€ํ•œ ๊ด€์‹ฌ์ด ๋งŽ์•„์ง€๋ฉด์„œ, ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์ฝ”๋”ฉ์„ ์ ‘ํ•˜๋Š” ๋ถ„๋“ค์ด ๋งŽ์•„์ง€๊ณ , ํ”„๋ŸฐํŠธ์—”๋“œ์— ํ•„์š”ํ•œ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ํ˜น์€ ํ”„๋ ˆ์ž„์›Œํฌ

ko-de-dev-green.tistory.com

ํŒจํ‚ค์ง€ ์„ค์น˜ํ•  ๋•Œ๋Š” ์—ฌ๊ธฐ์„œ ๊ฒ€์ƒ‰ํ•ด๋ณด๊ณ , ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ์— ๋งž๋Š” ๋ช…๋ น์–ด๋ฅผ ์ฃผ๋Š”๊ฒŒ ๋งˆ์Œ ํŽธํ•˜๋‹ค. 

์„ค์น˜ํ•  ๋•Œ ๋ณด๋ฉด DT, TS ๋ผ๊ณ  ์ ํ˜€์žˆ๋Š” ๋ถ€๋ถ„์ด ์žˆ๋‹ค. 

TS : ๊ณง๋ฐ”๋กœ ์„ค์น˜ ๊ฐ€๋Šฅ

DT : ์ถ”๊ฐ€ ์„ค์น˜ ํ•„์š”

 

yarn add react-icons

yarn add styled-components
yarn add @types/styled-components

 

๊ฒฐ๊ณผ์ ์œผ๋กœ  react-icons(TS), styled-components(DT)๋Š”  ์ด๋ ‡๊ฒŒ ์„ค์น˜ํ•˜๋ฉด ๋œ๋‹ค.

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

[ React ] aggrid ์†Œ๊ณ„, ํ•ฉ๊ณ„ row ์ถ”๊ฐ€ํ•˜๊ธฐ  (0) 2022.08.22
[ React ] Uncaught Error: useRoutes() may be used only in the context of a <Router> component. ์—๋Ÿฌ์™€ Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') ์—๋Ÿฌ  (0) 2022.08.15
[ React ] any[] ํ˜•์‹ length๊ฐ€ undefined๋กœ ๋œจ๋Š” ํ˜„์ƒ ํ•ด๊ฒฐ  (0) 2022.07.22
[ React ] ๋ฌธ์ž์—ด ์น˜ํ™˜ ์—ฌ๋Ÿฌ ๊ฐœ (replace ํ•จ์ˆ˜)  (0) 2022.07.19
[ React ] ๊ทธ๋ฆฌ๋“œ ๋ฐ์ดํ„ฐ์…‹์—์„œ ํŠน์ • ์นผ๋Ÿผ ๊ฐ’ ์ฐพ๊ธฐ (find ํ•จ์ˆ˜ / lookup๊ฐ™์€ ํ•จ์ˆ˜)  (0) 2022.07.19

'Programming/React'์˜ ๋‹ค๋ฅธ๊ธ€

  • ํ˜„์žฌ๊ธ€[ React ] ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ react-icons, styled-components ๋ชจ๋“ˆ ์„ค์น˜

๊ด€๋ จ๊ธ€

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