๐ŸŒˆ React UI Design

๊น€์ฒ ์ค€ยท2022๋…„ 4์›” 3์ผ
0

REACT

๋ชฉ๋ก ๋ณด๊ธฐ
22/33

UI&Component Design

์š”์ฆ˜ ๋ธ”๋กœ๊ทธ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๊ณ  ์žˆ๋‹ค.
ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉฐ ๋ฆฌํŒฉํ† ๋ง์„ ํ•˜๋‹ค๋ณด๋‹ˆ UI๋ฅผ ์ฒ˜์Œ๋ถ€ํ„ฐ ๋””์ž์ธ ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ๋‚ด ๋‚˜๋ฆ„๋Œ€๋กœ ์ •ํ•ด๋†“์œผ๋ฉด ๋‚˜์ค‘์— ๋ฆฌํŒฉํ† ๋งํ•  ์ผ์ด ์ค„์–ด๋“ค๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ•˜์˜€๋‹ค.

๊ทธ๋ž˜์„œ UI Component๋ฅผ Designํ•  ๋•Œ ๊ณ ๋ คํ•ด์•ผํ•  ์‚ฌํ•ญ์„ ๋‚ด ๋‚˜๋ฆ„๋Œ€๋กœ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค.

1. ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ ์ ˆํ•˜๊ฒŒ ๊ตฌ๋ถ„ํ•˜์˜€๋Š”๊ฐ€

2. ์ปดํฌ๋„ŒํŠธ์˜ ๊ฐ element๋“ค์ด ์ ์ ˆํ•˜๊ฒŒ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋Š”๊ฐ€?

3. styling์€ ์–ด๋–ค ๋„๊ตฌ๋ฅผ ์„ ํƒํ•  ๊ฒƒ์ธ๊ฐ€?

4. styled-component๋ฅผ ๊ตฌ๋ถ„ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์ง€ ์•Š์„๊นŒ?

5. UI๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” component๊ฐ€ ๊น”๋”ํ•˜๊ฒŒ ์œ ์ง€๋˜๊ณ  ์žˆ๋Š”๊ฐ€?


1. ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ ์ ˆํ•˜๊ฒŒ ๊ตฌ๋ถ„ํ•˜์˜€๋Š”๊ฐ€?

์ฒ˜์Œ UI์„ค๊ณ„์‹œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ ์ ˆํ•˜๊ฒŒ ๊ตฌ๋ถ„ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค๊ณ  ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. ์ด๊ฒƒ์€ ๋ฆฌ์•กํŠธ ์ปดํฌ๋„ŒํŠธ์˜ ๊ธฐ๋ณธ ์‚ฌํ•ญ์ด๋‹ˆ UI๋ฅผ ์„ค๊ณ„ํ•  ๋•Œ ํ•ญ์ƒ ๊ณ ๋ คํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌ์„ฑํ•ด์•ผ๊ฒ ๋‹ค.

๋˜ํ•œ redux๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค๋ฉด ํ•„์š”์— ๋”ฐ๋ผ Container Component(์ƒํƒœ๊ด€๋ฆฌ๋ฅผ ํ•ด์ฃผ๋Š” ์ปดํฌ๋„ŒํŠธ)๋ฅผ ๋งŒ๋“ค์–ด์ฃผ์ž.


2. ์ปดํฌ๋„ŒํŠธ์˜ ๊ฐ element๋“ค์ด ์ ์ ˆํ•˜๊ฒŒ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋Š”๊ฐ€?

์—ฌ๋Ÿฌ ์ปดํฌ๋„ŒํŠธ๋กœ ์„ค๊ณ„๋ฅผ ํ•œ ๋’ค์— ๊ฐ ์ปดํฌ๋„ŒํŠธ์˜ element๋“ค์„ ์–ด๋–ป๊ฒŒ ๊ตฌ์„ฑํ•  ๊ฒƒ์ธ์ง€๋„ ์ค‘์š”ํ•œ ๊ฒƒ ๊ฐ™๋‹ค.

๋ถˆํ•„์š”ํ•˜๊ฒŒ element๋“ค์ด ์žˆ์ง€ ์•Š์€์ง€, ๋˜ํ•œ ํ•„์š”ํ•œ element๋“ค์ด ์—†๋Š”์ง€ ์ด๋Ÿฌํ•œ ๋ถ€๋ถ„๋“ค์€ ์‚ฌ์ „์— ์ƒ๊ฐํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•œ ๊ฒƒ ๊ฐ™๋‹ค.

๋ฌผ๋ก  ๋‚˜์ค‘์— ๋ฆฌํŒฉํ† ๋งํ•  ๋•Œ ์ˆ˜์ •ํ•˜๋ฉด ๋˜๊ฒ ์ง€๋งŒ ์ฒ˜์Œ ๊ตฌ์„ฑํ•  ๋•Œ๋„ ์ƒ๊ฐ์„ ํ•˜๊ณ  ์„ค๊ณ„ํ•˜๋ฉด ์ถ”ํ›„์— ๋ฆฌํŒฉํ† ๋ง์„ ํ•  ๋•Œ์— ํŽธํ•  ๊ฒƒ ๊ฐ™๋‹ค.


3. styling์€ ์–ด๋–ค ๋„๊ตฌ๋ฅผ ์„ ํƒํ•  ๊ฒƒ์ธ๊ฐ€?

์ปดํฌ๋„ŒํŠธ๋ฅผ stylingํ•  ๋•Œ, ์—ฌ๋Ÿฌ ๊ฐ€์ง€ styling ๋ฐฉ๋ฒ•์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค.
originalํ•˜๊ฒŒ css๋กœ ํ•ด๋„ ๋˜๋ฉฐ, sass,styled-component๋ฅผ ์‚ฌ์šฉํ•ด๋„ ๋œ๋‹ค.

๋ฐฉ๋ฒ•์€ ์—ฌ๋Ÿฌ ๊ฐ€์ง€๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ ํ˜„์žฌ๊นŒ์ง€๋Š” ๋‚˜๋Š” styled-Component๋ฅผ ์„ ํ˜ธํ•˜๋Š” ํŽธ์ด๋‹ค.

์ด์œ ๋Š” ์ปดํฌ๋„ŒํŠธ์˜ element์— className์ด ๋•์ง€๋•์ง€ ๋ถ™์–ด์žˆ๋Š” ๊ฒƒ์ด ๊น”๋”ํ•ด ๋ณด์ด์ง€ ์•Š๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

๋˜ํ•œ styled-Component๋Š” ๊ฐ™๊ฑฐ๋‚˜ ๋น„์Šทํ•œ ์Šคํƒ€์ผ๋ง ์š”์†Œ๋“ค์„ ์ ์ ˆํžˆ ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด ์ ์ด ์žฅ์ ์ด๋ผ๊ณ  ์ƒ๊ฐํ•œ๋‹ค.

๋ฌผ๋ก  ์ด๊ฑด ์•„์ง๊นŒ์ง€ ๋‚ด ์ทจํ–ฅ์ด๊ธฐ๋•Œ๋ฌธ์— ์ถ”ํ›„์—๋Š” ์–ด๋–จ์ง€ ๋ชจ๋ฅด๊ฒ ๋‹ค.
์–ด์จ‹๋“  ์ง€๊ธˆ์€ styling ๋ฐฉ๋ฒ•์œผ๋กœ styled-component๋ฅผ ์„ ํ˜ธํ•˜๊ณ  ์žˆ๋‹ค.


4. styled-component๋ฅผ ๊ตฌ๋ถ„ํ•˜๋Š” ๊ฒƒ์ด ์ข‹์ง€ ์•Š์„๊นŒ?

๋ฆฌํŒฉํ† ๋งํ•  ๋•Œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ณด๋‹ˆ styled-component๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋ฉด ํ•˜๋‚˜์˜ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌ์„ฑํ•  ๋•Œ ์ฝ”๋“œ๊ฐ€ ๊ต‰์žฅํžˆ ๋ฒˆ์žกํ•ด๋ณด์ด๋Š” ๊ฒƒ์„ ๋ฐœ๊ฒฌํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.

๋ณด๋Š” ์ด์— ๋”ฐ๋ผ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ ๋‚˜๋Š” ์ด๋ฅผ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ๋” ์œ ์ง€๋ณด์ˆ˜์ธก๋ฉด๊ณผ ๊ฐ€๋…์„ฑ์— ์ข‹๋‹ค๊ณ  ์ƒ๊ฐ์ด ๋“ค์–ด ๊ฐ ์ปดํฌ๋„ŒํŠธ๋ณ„๋กœ styling ํŒŒ์ผ์„ ๊ตฌ๋ถ„์ง€์–ด ๋†“๋Š” ๊ฒƒ์ด ์ข‹์€ ๋ฐฉ๋ฒ•์ผ ๊ฒƒ์ด๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.


5. UI๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” component๊ฐ€ ๊น”๋”ํ•˜๊ฒŒ ์œ ์ง€๋˜๊ณ  ์žˆ๋Š”๊ฐ€?

์ด ์‚ฌํ•ญ์€ redux์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•  ๋•Œ ํŠนํžˆ ๊ณ ๋ คํ•  ์‚ฌํ•ญ์ด๋ผ๊ณ  ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.
redux๋ฅผ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ ๋ณดํ†ต UI Component(UI๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ์ปดํฌ๋„ŒํŠธ)์™€ Container component(์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ)๋กœ ๋‚˜๋ˆˆ๋‹ค.

์ด ๋•Œ UI ์ปดํฌ๋„ŒํŠธ๋Š” ์ตœ๋Œ€ํ•œ ๊น”๋”ํ•˜๊ฒŒ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค. ๋•Œ๋ฌธ์— ํ•  ์ˆ˜ ์žˆ๋Š” ์ž‘์—…๋“ค์„ Container component์—์„œ ๊ตฌํ˜„ํ•ด์„œ UI Component๋กœ ๋„˜๊ฒจ์ฃผ๋Š” ๊ฒƒ์ด ์ข‹๋‹ค๊ณ  ์ƒ๊ฐํ•œ๋‹ค.


์ •๋ฆฌ

์œ„ ์‚ฌํ•ญ๋“ค์€ ๋‚ด๊ฐ€ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค๋ฉฐ ๊ณ ๋ คํ•ด์•ผํ•  ์‚ฌํ•ญ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์—ฌ ์ •๋ฆฌํ•ด๋†“์€ ๊ฒƒ์ด๊ณ  ๋‚˜์˜ ์ทจํ–ฅ์ด๋ฏ€๋กœ ๋งž๋Š” ๋ฐฉ๋ฒ•์ด ์•„๋‹ ์ˆ˜๋„ ์žˆ๊ฒ ์ง€๋งŒ ์ถ”ํ›„์— UI๋ฅผ ์„ค๊ณ„ํ•  ๋•Œ ๋‹ค์‹œ ๋˜์ƒˆ๊ฒจ๋ณด๋ฉฐ ๋ณธ ํฌ์ŠคํŒ…์„ ์ฐธ์กฐํ•˜์—ฌ ๋””์ž์ธ์„ ํ•ด๋ด์•ผ๊ฒ ๋‹ค.

์œ„ ์‚ฌํ•ญ๋“ค์ด ๋งž๋Š” ๋ฐฉ๋ฒ•์€ ์•„๋‹ ์ˆ˜ ์žˆ๊ฒ ์ง€๋งŒ ์ผ๋‹จ ํ”„๋กœ์ ํŠธ๋ฅผ ์ฒ˜์Œ ๋””์ž์ธํ•  ๋•Œ ๋ฌด์ž‘์ • ์ฝ”๋“œ๋ถ€ํ„ฐ ์ž‘์„ฑํ•˜๋‹ค๊ธฐ๋ณด๋‹ค๋Š” ๋‚˜๋ฆ„์˜ ์„ค๊ณ„๋ฅผ ํ•˜์—ฌ UI, Component ๋“ฑ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์‚ฌํ•ญ์„ ์ •๋ฆฌํ•˜์—ฌ ์„ค๊ณ„ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€