๐Ÿ“ท ๋ฆฌ์•กํŠธ๋กœ ์ด๋ฏธ์ง€ ์‚ฝ์ž…ํ•˜๊ธฐ

๋ฆฌ์•กํŠธ ๊ฐ™์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์™ธ๋ถ€์—์„œ ๊ฐ„๋‹จํ•œ ๊ฒƒ ํ•˜๋‚˜๋ผ๋„ ๋ฐ›์•„์˜ค๊ธฐ ์œ„ํ•ด์„œ๋Š”

๊ณต์ • ๊ณผ์ •์ด ํ•„์š”ํ•œ๋ฐ, ๊ฐœ๋ฆฐ์ด์ธ ๋‚˜๋Š” ์•„์ง ์ด๋Ÿฐ๊ฑธ๋กœ ์‚ฝ์งˆ์„ ํ•œ๋‹ค (์ฃผ๋ฅต..)

์œ ํŠœ๋ธŒ ํด๋ก ์ฝ”๋”ฉ์„ ํ˜ผ์ž ์•ผ์‹ฌ์ฐจ๊ฒŒ ํ•ด๋ณด๊ฒ ๋‹ค๊ณ  ํŒ” ๊ฑท์–ด๋ถ€์ณค๋Š”๋ฐ

๊ฐ„๋‹จํ•œ ๋กœ๊ณ  ์ด๋ฏธ์ง€ ํ•˜๋‚˜ ์‚ฝ์ž…ํ•˜๋Š”๋ฐ 2์ผ ๊ฑธ๋ ธ๋‹ค๋‹ˆ (๋‚˜๊ฐ™์€ ํ‘์šฐ ๋˜์žˆ๋‚˜.. ์†?)

๊ทธ๋ƒฅ ๊ฒฝ๋กœ ๋•Œ๋ ค ๋ฐ•์œผ๋ฉด ๋˜๋Š”๊ฑฐ ์•„๋‹ˆ์•ผ?

์‘ ์•„๋‹ˆ์•ผ..

์ € ์กฐ๊ฐ๋‚œ ๋ฌธ์„œ๋ฅผ ๋ณด๊ธฐ์‹ซ์–ด์„œ ์–ผ๋งˆ๋‚˜ ์• ๋ฅผ ์ผ๋Š”์ง€

๊ตฌ๊ธ€๋ง ํ•ด๋ณด๊ณ , ์ฝ”๋”ฉ ์นดํŽ˜๋„ ์ฐพ์•„๋ณด๊ณ , ์Šฌ๋ž™๋„ ๋‹ค ๋’ค์กŒ๊ฑด๋งŒ

๋งˆ์ง€๋ง‰์œผ๋กœ ๊ณต์‹๋ฌธ์„œ ํ•œ๋ฒˆ ๋’ค์ ธ๋ณด์ž ํ•œ ๊ฒƒ์ด ํ•ด๊ฒฐ์ฑ…์„ ์ฃผ์—ˆ๋‹ค

(๊ณต์‹ ๋ฌธ์„œ๋ฅผ ๊ฐ€์žฅ ๋จผ์ € ๋ด์•ผํ–ˆ๋Š”๋ฐ... ์—Ž๋“œ๋ ค)

์•„์ฃผ ์นœ์ ˆํ•˜๊ฒŒ ์ฝ”๋“œ ์˜ˆ์‹œ๊นŒ์ง€ ๋‚˜์™€์žˆ์Œ ^^!

How to use

์ถ”๊ฐ€์ ์œผ๋กœ ์ฐพ์•„๋ณด๋‹ˆ ๋ณดํ†ต ์ด๋ฏธ์ง€ ์‚ฝ์ž… ๋ฐฉ๋ฒ•์ด 2๊ฐ€์ง€๊ฐ€ ์žˆ๋Š”๋ฐ

public ํด๋”์™€ src ํด๋”๋กœ ๊ทธ ๋ฐฉ๋ฒ•์ด ๋‚˜๋‰œ๋‹ค.


1. src ํด๋”์— ์ €์žฅํ•œ ์ด๋ฏธ์ง€ ์‚ฌ์šฉํ•˜๊ธฐ

src ํด๋”์— ์ด๋ฏธ์ง€๋ฅผ ์ž์ฒด์ ์œผ๋กœ ์ €์žฅํ•œ๋‹ค๋ฉด import ํ•˜์—ฌ ์ง€์ •ํ•œ ๊ฐ’์„ src ์†์„ฑ์— ๋„ฃ์–ด์ค€๋‹ค.

import ํ•  ๋•Œ์˜ ์ด๋ฆ„์€ class๋ช…์ฒ˜๋Ÿผ ์›ํ•˜๋Š”๋Œ€๋กœ ์ง€์ •ํ•ด์ค„ ์ˆ˜ ์žˆ๊ณ 

src ์†์„ฑ ๊ฐ’์œผ๋กœ๋Š” ์ค‘๊ด„ํ˜ธ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ž‘์„ฑํ•œ ๊ฐ’์„ ๋„ฃ์–ด์ฃผ๋ฉด ๋œ๋‹ค.

2. public ํด๋”์— ์ €์žฅํ•œ ์ด๋ฏธ์ง€ ์‚ฌ์šฉํ•˜๊ธฐ

public ํด๋”์— ์ €์žฅํ•œ ์ด๋ฏธ์ง€๋Š” ์ƒ๋Œ€๊ฒฝ๋กœ๋ฅผ ์ด์šฉํ•˜์—ฌ ๋ถˆ๋Ÿฌ์™€์•ผ ํ•œ๋‹ค.

import ๋Š” ๋”ฐ๋กœ ํ•„์š”ํ•˜์ง€ ์•Š๋‹ค.

<img className="icon-search" src="/search.png" alt="search" />

๐Ÿ’ก ๋ฐฐ์šด์ 

์ฒ˜์Œ ์ด๋ฏธ์ง€๊ฐ€ ๊นจ์กŒ์„ ๋•Œ๋Š” src ํด๋”์— ์ด๋ฏธ์ง€๊ฐ€ ๋“ค์–ด์žˆ์—ˆ๊ณ 

์ด๋ฏธ์ง€์˜ src ์†์„ฑ๊ฐ’์„ ์ƒ๋Œ€๊ฒฝ๋กœ๋กœ ์žก์•„๋‘” ์ƒํƒœ์˜€๋‹ค.

๊ทธ ๋•Œ ์ด๋ฏธ์ง€๊ฐ€ ์ •์ƒ ์ถœ๋ ฅ๋˜๋ ค๋ฉด public ํด๋”๋กœ ์ด๋ฏธ์ง€ ๊ฒฝ๋กœ๋ฅผ ์ˆ˜์ •ํ•˜๊ฑฐ๋‚˜ ์ด๋ฏธ์ง€๋ฅผ import ํ–ˆ์–ด์•ผ ํ–ˆ๋‹ค.


์ฐพ์•„๋ณด๋‹ˆ ์ƒํ™ฉ์— ๋”ฐ๋ผ public ํด๋”์™€ src ํด๋”๋กœ ์ด๋ฏธ์ง€๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฒ•์ด ๋‹ค๋ฅธ ๊ฑธ ์•Œ์ˆ˜ ์žˆ์—ˆ๋‹ค.

์ด ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ ๋‹ค์Œ์— ๋‹ค์‹œ ๋‹ค๋ค„๋ด์•ผ๊ฒ ๋‹ค.

์‚ฝ์งˆ ๋! ๐Ÿ˜ฌ

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ