July 08, 2020
Vue๊ณต๋ถ์ค, Component๋ถ๋ถ์์ ๋ถ๋ชจ์ ์์Component๊ฐ์ ์ํต์ ๋ณด๊ณ ์์๋ค.
React๋ฅผ ์ด๋ฏธ ์๊ณ ์์๊ธฐ ๋๋ฌธ์ ์์ฑ์ ์ ๋ฌํ๊ณ , ์์ฑ์ผ๋ก ์ ๋ฌ๋ ๋ถ๋ชจ์ ์ด๋ฒคํธ๋ฅผ ํธ์ถํ๋ ๊ตฌ์กฐ๋ ๋น์ทํ๊ฒ ๊ฐ์ ๋ฌธ์ ๋ ์์๋ค.
๊ทธ๋ฐ๋ฐ.. dispatchEvent๋ผ๋ ๋ฉ์๋๋ฅผ ์ฒ์๋ณด๊ฒ๋์๋ค.
Redux์ํ๊ด๋ฆฌ๋ฅผ ํ ๋, ์ ๊ณต๋๋ dispatch๋ฉ์๋๋ฅผ ํ์ฉํ์ฌ state์ ๋ณ๊ฒฝ์์ผฐ๋๋ฐ ๋น์ทํ๊ฑด๊ฐ?
์คํ์์
<div class="event1">๋๊ฐ ๋์ ์คํํด์ค</div>
<button class="support">๋์ ์คํ</button>
const event = new CustomEvent('test', {
detail: '์ฌ์ฉ์ ์ง์ ์ด๋ฒคํธ ์
๋๋ค.',
// ์ปค์คํ
์ด๋ฒคํธ ๋ฑ๋ก ๋ฐ, ๋๋ฒ์งธ ์ธ์๋ก data ์ค์ ๊ฐ๋ฅ
})
const support = document.querySelector('.support')
const elem1 = document.querySelector('.event1')
elem1.addEventListener('test', e => {
alert(e.detail)
// elem1์ ์ปค์คํ
์ด๋ฒคํธ 'event' ๋ฑ๋ก
})
support.addEventListener('click', () => {
elem1.dispatchEvent(event)
// elem1์ ๋ฑ๋ก๋์ด์๋ ์ปค์คํ
์ด๋ฒคํธ 'event'๋ฅผ ์คํ์์ผ์ค
})
new CustomEvent()
๋ฅผ ์ฌ์ฉํ์ฌ, ์ฌ์ฉ์์ง์ ์ด๋ฒคํธ๋ฅผ ๋ง๋ค ์ ์์ผ๋ฉฐ, ๋ฐ์ดํฐ๊ฐ๋ ๋ฃ์ด์ค ์ ์๋ค.์๋ฆฌ๋จผํธ.dispatchEvent(์ด๋ฒคํธ๋ช
)
๋ฅผ ํตํด, ์คํ์ํฌ ์ ์๋ค.