var Component=(()=>{var o=Object.create;var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var g=(l,n)=>()=>(n||l((n={exports:{}}).exports,n),n.exports),u=(l,n)=>{for(var e in n)c(l,e,{get:n[e],enumerable:!0})},h=(l,n,e,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let a of p(n))!j.call(l,a)&&a!==e&&c(l,a,{get:()=>n[a],enumerable:!(r=m(n,a))||r.enumerable});return l};var f=(l,n,e)=>(e=l!=null?o(N(l)):{},h(n||!l||!l.__esModule?c(e,"default",{value:l,enumerable:!0}):e,l)),y=l=>h(c({},"__esModule",{value:!0}),l);var d=g((E,i)=>{i.exports=_jsx_runtime});var _={};u(_,{default:()=>w,frontmatter:()=>k});var s=f(d()),k={title:"\uC2E4\uC2DC\uAC04 \uCC44\uD305 \uC2A4\uD06C\uB864 UX \uCD5C\uC801\uD654",date:new Date(16651872e5),summary:"\uC790\uC5F0\uC2A4\uB7EC\uC6B4 \uC2E4\uC2DC\uAC04 \uCC44\uD305 UX\uB97C \uC704\uD574\uC120 \uC5B4\uB5A4 \uC791\uC5C5\uC744 \uD574\uC57C\uD560\uAE4C?",tags:["react","socket.io"]};function t(l){let n=Object.assign({h1:"h1",a:"a",span:"span",ul:"ul",li:"li",pre:"pre",code:"code",h2:"h2",ol:"ol",em:"em",strong:"strong"},l.components);return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsxs)(n.h1,{id:"\uCC44\uD305-\uAD6C\uD604-\uC9C1\uD6C4",children:[(0,s.jsx)(n.a,{className:"anchor",href:"#\uCC44\uD305-\uAD6C\uD604-\uC9C1\uD6C4",children:(0,s.jsx)(n.span,{className:"icon icon-link"})}),"\uCC44\uD305 \uAD6C\uD604 \uC9C1\uD6C4"]}),` `,(0,s.jsxs)(n.ul,{children:[` `,(0,s.jsxs)(n.li,{children:["\uC6B0\uC120 \uCC44\uD305 \uB0B4\uC6A9\uC774 \uB2F4\uAE34 \uBC30\uC5F4\uC744 map \uBA54\uC11C\uB4DC\uB97C \uC0AC\uC6A9\uD558\uC5EC \uB80C\uB354\uB9C1\uD588\uC2B5\uB2C8\uB2E4.",` `,(0,s.jsx)(n.pre,{children:(0,s.jsxs)(n.code,{className:"hljs language-jsx",children:[(0,s.jsx)(n.span,{className:"hljs-comment",children:"//chatBox.js"}),` `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," ",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"chatBox"})," = (",(0,s.jsx)(n.span,{className:"hljs-params",children:"{ chatArr }"}),`) => { `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,s.jsxs)(n.span,{className:"xml",children:[(0,s.jsxs)(n.span,{className:"hljs-tag",children:["<",(0,s.jsx)(n.span,{className:"hljs-name",children:"div"}),">"]}),` {chatArr.map((chat) => ( `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:["<",(0,s.jsx)(n.span,{className:"hljs-name",children:"div"})," ",(0,s.jsx)(n.span,{className:"hljs-attr",children:"key"}),"=",(0,s.jsx)(n.span,{className:"hljs-string",children:"{chat.key}"}),">"]}),"{chat.message}",(0,s.jsxs)(n.span,{className:"hljs-tag",children:[""]}),` ))} ; `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:[""]})]}),` ); }; `]})}),` `]}),` `]}),` `,(0,s.jsxs)(n.h1,{id:"\uCCAB\uBC88\uC9F8-\uCD5C\uC801\uD654-\uC790\uB3D9\uC73C\uB85C-\uC2A4\uD06C\uB864\uC744-\uAC00\uC7A5-\uC544\uB798\uB85C",children:[(0,s.jsx)(n.a,{className:"anchor",href:"#\uCCAB\uBC88\uC9F8-\uCD5C\uC801\uD654-\uC790\uB3D9\uC73C\uB85C-\uC2A4\uD06C\uB864\uC744-\uAC00\uC7A5-\uC544\uB798\uB85C",children:(0,s.jsx)(n.span,{className:"icon icon-link"})}),"\uCCAB\uBC88\uC9F8 \uCD5C\uC801\uD654 (\uC790\uB3D9\uC73C\uB85C \uC2A4\uD06C\uB864\uC744 \uAC00\uC7A5 \uC544\uB798\uB85C)"]}),` `,(0,s.jsxs)(n.h2,{id:"\uBB38\uC81C",children:[(0,s.jsx)(n.a,{className:"anchor",href:"#\uBB38\uC81C",children:(0,s.jsx)(n.span,{className:"icon icon-link"})}),"\uBB38\uC81C"]}),` `,(0,s.jsxs)(n.ul,{children:[` `,(0,s.jsx)(n.li,{children:"\uCC44\uD305\uBC29\uC744 \uC7A0\uC2DC \uB098\uAC14\uB2E4 \uB4E4\uC5B4\uC624\uBA74 \uAC00\uC7A5 \uB9C8\uC9C0\uB9C9\uC5D0 \uC628 \uBA54\uC138\uC9C0\uAC00 \uBCF4\uC774\uC9C0 \uC54A\uACE0 \uAC00\uC7A5 \uC624\uB798\uB41C \uBA54\uC138\uC9C0\uAC00 \uBA3C\uC800 \uBCF4\uC600\uC2B5\uB2C8\uB2E4."}),` `,(0,s.jsx)(n.li,{children:"\uADF8\uB9AC\uACE0 \uC0C8\uB85C\uC6B4 \uBA54\uC138\uC9C0\uAC00 \uC640\uB3C4 \uC2A4\uD06C\uB864\uC774 \uC790\uB3D9\uC73C\uB85C \uB0B4\uB824\uAC00\uC9C0 \uC54A\uACE0, \uC0AC\uC6A9\uC790\uAC00 \uC9C1\uC811 \uB0B4\uB824\uC57C\uB9CC \uBA54\uC138\uC9C0\uB97C \uBCFC\uC218 \uC788\uC2B5\uB2C8\uB2E4."}),` `,(0,s.jsx)(n.li,{children:"\uCC44\uD305\uBC29\uC774 \uC774\uB7F0\uC2DD\uC73C\uB85C \uC791\uB3D9\uD558\uBA74 \uC548\uB41C\uB2E4\uACE0 \uC0DD\uAC01\uD588\uC2B5\uB2C8\uB2E4."}),` `]}),` `,(0,s.jsxs)(n.h2,{id:"\uD574\uACB0",children:[(0,s.jsx)(n.a,{className:"anchor",href:"#\uD574\uACB0",children:(0,s.jsx)(n.span,{className:"icon icon-link"})}),"\uD574\uACB0"]}),` `,(0,s.jsx)(n.pre,{children:(0,s.jsxs)(n.code,{className:"hljs language-jsx",children:[(0,s.jsx)(n.span,{className:"hljs-comment",children:"//chatBox.js"}),` `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," ",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"chatBox"})," = (",(0,s.jsx)(n.span,{className:"hljs-params",children:"{ chatArr }"}),`) => { `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," scrollRef = ",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"useRef"}),`(); `,(0,s.jsx)(n.span,{className:"hljs-title function_",children:"useEffect"}),"(",(0,s.jsx)(n.span,{className:"hljs-function",children:"() =>"}),` { scrollRef.`,(0,s.jsx)(n.span,{className:"hljs-property",children:"current"}),".",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"scrollIntoView"}),`(); }, [chatArr]); `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,s.jsxs)(n.span,{className:"xml",children:[(0,s.jsxs)(n.span,{className:"hljs-tag",children:["<",(0,s.jsx)(n.span,{className:"hljs-name",children:"div"}),">"]}),` {chatArr.map((chat) => ( `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:["<",(0,s.jsx)(n.span,{className:"hljs-name",children:"div"})," ",(0,s.jsx)(n.span,{className:"hljs-attr",children:"key"}),"=",(0,s.jsx)(n.span,{className:"hljs-string",children:"{chat.key}"}),">"]}),"{chat.message}",(0,s.jsxs)(n.span,{className:"hljs-tag",children:[""]}),` ))} ; `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:["<",(0,s.jsx)(n.span,{className:"hljs-name",children:"div"})," ",(0,s.jsx)(n.span,{className:"hljs-attr",children:"ref"}),"=",(0,s.jsx)(n.span,{className:"hljs-string",children:"{scrollRef}"})," />"]}),` `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:[""]})]}),` ); }; `]})}),` `,(0,s.jsxs)(n.ol,{children:[` `,(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"useRef"})," \uB97C \uC0DD\uC131\uD558\uACE0, \uCC44\uD305 \uB0B4\uC6A9\uC774 \uB2F4\uAE34 \uBC30\uC5F4 \uC544\uB798\uC5D0 \uBE48 ",(0,s.jsx)(n.code,{children:"div"}),"\uB97C \uB9CC\uB4E4\uC5B4\uC90D\uB2C8\uB2E4."]}),` `,(0,s.jsxs)(n.li,{children:["\uADF8\uB9AC\uACE0 \uBE48 ",(0,s.jsx)(n.code,{children:"div"}),"\uC5D0 \uB9CC\uB4E0 ",(0,s.jsx)(n.code,{children:"ref"}),"\uB97C \uB2EC\uC544\uC90D\uB2C8\uB2E4."]}),` `,(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"useEffect"})," \uC5D0 \uC124\uC815\uD55C \uC694\uC18C ",(0,s.jsx)(n.em,{children:"(\uC5EC\uAE30\uC120 ref\uB97C \uB2EC\uC544\uB454 div\uC785\uB2C8\uB2E4)"})," \uB85C \uD654\uBA74 \uC2A4\uD06C\uB864\uC744 \uC774\uB3D9\uD558\uB294 ",(0,s.jsx)(n.code,{children:"scrollIntoView()"})," \uB85C\uC9C1\uC744 \uCD94\uAC00\uD569\uB2C8\uB2E4."]}),` `,(0,s.jsxs)(n.li,{children:["\uADF8\uB9AC\uACE0 \uC758\uC874\uC131 \uBC30\uC5F4\uC5D0 ",(0,s.jsx)(n.code,{children:"chatArr"})," \uB97C \uB123\uC5B4 \uC0C8\uB85C\uC6B4 \uCC44\uD305\uC774 \uC62C\uB54C\uB9C8\uB2E4 ",(0,s.jsx)(n.code,{children:"scrollIntoView()"})," \uD568\uC218\uAC00 \uC791\uB3D9\uD558\uAC8C \uD569\uB2C8\uB2E4."]}),` `,(0,s.jsx)(n.li,{children:"\uC774\uC81C \uC0C8\uB85C\uC6B4 \uBA54\uC138\uC9C0\uAC00 \uC624\uBA74 \uC790\uB3D9\uC73C\uB85C \uC2A4\uD06C\uB864\uC774 \uB0B4\uB824\uAC00\uAC8C \uB429\uB2C8\uB2E4."}),` `]}),` `,(0,s.jsxs)(n.h1,{id:"\uB450\uBC88\uC9F8-\uCD5C\uC801\uD654-\uC870\uAC74\uBD80\uB85C-\uC2A4\uD06C\uB864-\uC790\uB3D9-\uC774\uB3D9",children:[(0,s.jsx)(n.a,{className:"anchor",href:"#\uB450\uBC88\uC9F8-\uCD5C\uC801\uD654-\uC870\uAC74\uBD80\uB85C-\uC2A4\uD06C\uB864-\uC790\uB3D9-\uC774\uB3D9",children:(0,s.jsx)(n.span,{className:"icon icon-link"})}),"\uB450\uBC88\uC9F8 \uCD5C\uC801\uD654 (\uC870\uAC74\uBD80\uB85C \uC2A4\uD06C\uB864 \uC790\uB3D9 \uC774\uB3D9)"]}),` `,(0,s.jsxs)(n.h2,{id:"\uBB38\uC81C-1",children:[(0,s.jsx)(n.a,{className:"anchor",href:"#\uBB38\uC81C-1",children:(0,s.jsx)(n.span,{className:"icon icon-link"})}),"\uBB38\uC81C"]}),` `,(0,s.jsxs)(n.ul,{children:[` `,(0,s.jsx)(n.li,{children:"\uC774\uC81C \uCC44\uD305\uBC29\uC5D0 \uC785\uC7A5\uD558\uAC70\uB098 \uC0C8\uB85C\uC6B4 \uBA54\uC138\uC9C0\uAC00 \uC628\uB2E4\uBA74 \uC2A4\uD06C\uB864\uC774 \uC790\uB3D9\uC73C\uB85C \uCD5C\uC2E0 \uBA54\uC138\uC9C0\uB97C \uBCF4\uC5EC\uC8FC\uAC8C \uB429\uB2C8\uB2E4."}),` `,(0,s.jsx)(n.li,{children:"\uD558\uC9C0\uB9CC \uC720\uC800A\uAC00 \uC774\uC804\uC758 \uCC44\uD305\uB4E4\uC744 \uC77D\uC5B4\uBCF4\uB358 \uC911, \uC720\uC800B\uAC00 \uC0C8\uB85C\uC6B4 \uBA54\uC138\uC9C0\uB97C \uBCF4\uB0B4\uC790 \uC720\uC800A\uC758 \uC2A4\uD06C\uB864\uB3C4 \uC790\uB3D9\uC73C\uB85C \uB0B4\uB824\uAC00\uAC8C \uB429\uB2C8\uB2E4."}),` `,(0,s.jsx)(n.li,{children:"\uC774\uC804\uC758 \uCC44\uD305\uC744 \uC77D\uB358 \uC720\uC800A\uB294 \uC790\uB3D9\uC73C\uB85C \uB0B4\uB824\uAC00\uB294 \uC2A4\uD06C\uB864\uC774 \uB2F5\uB2F5\uD55C \uB098\uBA38\uC9C0, \uC0AC\uC774\uD2B8\uB97C \uAEBC\uBC84\uB9AC\uAC8C \uB429\uB2C8\uB2E4....\uD751\uD751"}),` `]}),` `,(0,s.jsxs)(n.h2,{id:"\uD574\uACB0\uBC29\uC548",children:[(0,s.jsx)(n.a,{className:"anchor",href:"#\uD574\uACB0\uBC29\uC548",children:(0,s.jsx)(n.span,{className:"icon icon-link"})}),"\uD574\uACB0\uBC29\uC548"]}),` `,(0,s.jsxs)(n.ul,{children:[` `,(0,s.jsx)(n.li,{children:"\uC2A4\uD06C\uB864\uC774 \uAC00\uC7A5 \uC544\uB798\uC5D0 \uC704\uCE58\uD588\uC744 \uB54C\uB9CC, \uC2A4\uD06C\uB864\uC774 \uC790\uB3D9\uC73C\uB85C \uB0B4\uB824\uAC00\uACE0 \uC774\uC804\uC758 \uCC44\uD305\uC744 \uC77D\uACE0 \uC788\uB2E4\uBA74 \uC2A4\uD06C\uB864\uC774 \uC790\uB3D9\uC73C\uB85C \uC6C0\uC9C1\uC774\uC9C0 \uC54A\uAC8C \uD574\uC57C\uD569\uB2C8\uB2E4."}),` `]}),` `,(0,s.jsxs)(n.h2,{id:"\uD574\uACB0-1",children:[(0,s.jsx)(n.a,{className:"anchor",href:"#\uD574\uACB0-1",children:(0,s.jsx)(n.span,{className:"icon icon-link"})}),"\uD574\uACB0"]}),` `,(0,s.jsx)(n.pre,{children:(0,s.jsxs)(n.code,{className:"hljs language-jsx",children:[(0,s.jsx)(n.span,{className:"hljs-comment",children:"//chatBox.js"}),` `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"import"})," _ ",(0,s.jsx)(n.span,{className:"hljs-keyword",children:"from"})," ",(0,s.jsx)(n.span,{className:"hljs-string",children:"'lodash'"}),`; `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," ",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"chatBox"})," = (",(0,s.jsx)(n.span,{className:"hljs-params",children:"{ chatArr }"}),`) => { `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," scrollRef = ",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"useRef"}),`(); `,(0,s.jsx)(n.span,{className:"hljs-comment",children:"//1\uBC88 \uB0B4\uC6A9"}),` `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," [scrollState, setScrollState] = ",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"useState"}),"(",(0,s.jsx)(n.span,{className:"hljs-literal",children:"true"}),`); `,(0,s.jsx)(n.span,{className:"hljs-comment",children:"//2\uBC88 \uB0B4\uC6A9"}),` `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," scrollEvent = _.",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"debounce"}),"(",(0,s.jsxs)(n.span,{className:"hljs-function",children:["(",(0,s.jsx)(n.span,{className:"hljs-params",children:"event"}),") =>"]}),` { `,(0,s.jsx)(n.span,{className:"hljs-comment",children:"//3\uBC88 \uB0B4\uC6A9"}),` `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," totalHeight = ",(0,s.jsx)(n.span,{className:"hljs-variable language_",children:"document"}),".",(0,s.jsx)(n.span,{className:"hljs-property",children:"documentElement"}),".",(0,s.jsx)(n.span,{className:"hljs-property",children:"scrollHeight"}),`; `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," innerHeight = ",(0,s.jsx)(n.span,{className:"hljs-variable language_",children:"window"}),".",(0,s.jsx)(n.span,{className:"hljs-property",children:"innerHeight"}),`; `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," myHeight = event.",(0,s.jsx)(n.span,{className:"hljs-property",children:"srcElement"}),".",(0,s.jsx)(n.span,{className:"hljs-property",children:"scrollingElement"}),".",(0,s.jsx)(n.span,{className:"hljs-property",children:"scrollTop"}),`; `,(0,s.jsx)(n.span,{className:"hljs-title function_",children:"setScrollState"}),"(totalHeight <= innerHeight + myHeight + ",(0,s.jsx)(n.span,{className:"hljs-number",children:"500"}),`); }, `,(0,s.jsx)(n.span,{className:"hljs-number",children:"200"}),`); `,(0,s.jsx)(n.span,{className:"hljs-comment",children:"//4\uBC88 \uB0B4\uC6A9"}),` `,(0,s.jsx)(n.span,{className:"hljs-title function_",children:"useEffect"}),"(",(0,s.jsx)(n.span,{className:"hljs-function",children:"() =>"}),` { `,(0,s.jsx)(n.span,{className:"hljs-variable language_",children:"window"}),".",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"addEventListener"}),"(",(0,s.jsx)(n.span,{className:"hljs-string",children:"'scroll'"}),`, scrollEvent); }, [scrollEvent]); `,(0,s.jsx)(n.span,{className:"hljs-comment",children:"//5\uBC88 \uB0B4\uC6A9"}),` `,(0,s.jsx)(n.span,{className:"hljs-title function_",children:"useEffect"}),"(",(0,s.jsx)(n.span,{className:"hljs-function",children:"() =>"}),` { `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"if"})," (!scrollState) ",(0,s.jsx)(n.span,{className:"hljs-keyword",children:"return"}),`; scrollRef.`,(0,s.jsx)(n.span,{className:"hljs-property",children:"current"}),".",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"scrollIntoView"}),`(); }, [chatArr, scrollState]); `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,s.jsxs)(n.span,{className:"xml",children:[(0,s.jsxs)(n.span,{className:"hljs-tag",children:["<",(0,s.jsx)(n.span,{className:"hljs-name",children:"div"}),">"]}),` {chatArr.map((chat) => ( `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:["<",(0,s.jsx)(n.span,{className:"hljs-name",children:"div"})," ",(0,s.jsx)(n.span,{className:"hljs-attr",children:"key"}),"=",(0,s.jsx)(n.span,{className:"hljs-string",children:"{chat.key}"}),">"]}),"{chat.message}",(0,s.jsxs)(n.span,{className:"hljs-tag",children:[""]}),` ))} ; `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:["<",(0,s.jsx)(n.span,{className:"hljs-name",children:"div"})," ",(0,s.jsx)(n.span,{className:"hljs-attr",children:"ref"}),"=",(0,s.jsx)(n.span,{className:"hljs-string",children:"{scrollRef}"})," />"]}),` `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:[""]})]}),` ); }; `]})}),` `,(0,s.jsxs)(n.ol,{children:[` `,(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"scrollState"}),"\uB77C\uB294 ",(0,s.jsx)(n.code,{children:"state"}),"\uB97C \uC0DD\uC131\uD569\uB2C8\uB2E4. ",(0,s.jsx)(n.code,{children:"scrollState"}),(0,s.jsx)(n.strong,{children:"\uB294 \uC720\uC800\uC758 \uC2A4\uD06C\uB864\uC774 \uAC00\uC7A5 \uC544\uB798\uC5D0 \uC788\uB2E4\uBA74"})," ",(0,s.jsx)(n.code,{children:"true"}),(0,s.jsx)(n.strong,{children:"\uB97C, \uC2A4\uD06C\uB864\uC774 \uAC00\uC7A5 \uC544\uB798\uAC00 \uC544\uB2C8\uB77C\uBA74"})," ",(0,s.jsx)(n.code,{children:"false"}),(0,s.jsx)(n.strong,{children:"\uB97C \uAC12\uC73C\uB85C \uAC16\uAC8C \uB429\uB2C8\uB2E4."})]}),` `,(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"scrollEvent"})," \uD568\uC218\uB97C \uC0DD\uC131\uD569\uB2C8\uB2E4."]}),` `,(0,s.jsxs)(n.li,{children:["\uC138\uAC00\uC9C0 \uBCC0\uC218\uB97C \uB9CC\uB4ED\uB2C8\uB2E4. ",(0,s.jsx)(n.code,{children:"totalHeight"}),"\uC5D0\uB294 html \uC804\uCCB4\uC758 \uB192\uC774 \uAC12\uC744 \uD560\uB2F9\uD569\uB2C8\uB2E4. ",(0,s.jsx)(n.code,{children:"innerHeight"}),"\uC5D0\uB294 \uD604\uC7AC \uCC3D\uC758 \uB192\uC774 \uAC12\uC744 \uD560\uB2F9\uD569\uB2C8\uB2E4. \uB9C8\uC9C0\uB9C9\uC73C\uB85C ",(0,s.jsx)(n.code,{children:"myHeight"}),"\uB294 \uD604\uC7AC \uC2A4\uD06C\uB864\uC758 \uB192\uC774 \uAC12\uC744 \uD560\uB2F9\uD569\uB2C8\uB2E4. ",(0,s.jsx)(n.strong,{children:"\uC2A4\uD06C\uB864\uC774 \uAC00\uC7A5 \uC544\uB798\uC5D0 \uC788\uC744 \uB54C"})," ",(0,s.jsx)(n.code,{children:"totalHeight"})," ",(0,s.jsx)(n.strong,{children:"=="})," ",(0,s.jsx)(n.code,{children:"innerHeight"})," ",(0,s.jsx)(n.strong,{children:"+"})," ",(0,s.jsx)(n.code,{children:"myHeight"})," ",(0,s.jsx)(n.strong,{children:"\uAC00 \uB429\uB2C8\uB2E4. \uADF8 \uC678\uC5D0\uB294"})," ",(0,s.jsx)(n.code,{children:"total Height"}),(0,s.jsx)(n.strong,{children:"\uAC00 \uD56D\uC0C1 \uD07D\uB2C8\uB2E4."})," \uB530\uB77C\uC11C \uC2A4\uD06C\uB864\uC774 \uAC00\uC7A5 \uC544\uB798\uC5D0 \uB0B4\uB824\uAC00\uC788\uB2E4\uBA74 ",(0,s.jsx)(n.code,{children:"scrollState"})," \uB294 ",(0,s.jsx)(n.code,{children:"true"}),` \uAC00 \uB418\uACE0, \uC790\uB3D9 \uC2A4\uD06C\uB864\uC774 \uD65C\uC131\uD654 \uB429\uB2C8\uB2E4. 3-1. `,(0,s.jsx)(n.em,{children:"\uC2A4\uD06C\uB864 \uC774\uBCA4\uD2B8\uAC00 \uB108\uBB34 \uC790\uC8FC \uC77C\uC5B4\uB098\uBA74 \uACFC\uBD80\uD558\uAC00 \uC77C\uC5B4\uB098\uBBC0\uB85C, lodash\uC758 debounce\uB85C \uD568\uC218\uB97C \uAC10\uC2F8\uC90D\uB2C8\uB2E4."}),` 3-2. `,(0,s.jsx)(n.strong,{children:"\uC774\uBD80\uBD84\uC740 \uCF58\uC194\uB85C \uC9C1\uC811 \uCC0D\uC5B4\uBCF4\uC2DC\uBA74 \uC5B4\uB5A4 \uAC12\uB4E4\uC778\uC9C0 \uBE60\uB974\uAC8C \uC54C \uC218 \uC788\uC2B5\uB2C8\uB2E4."})]}),` `,(0,s.jsxs)(n.li,{children:["\uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uB80C\uB354\uB9C1 \uB420\uB54C scroll \uC774\uBCA4\uD2B8\uB97C \uCD94\uAC00\uD574\uC8FC\uACE0, ",(0,s.jsx)(n.code,{children:"scrollEvent"})," \uD568\uC218\uB97C \uBD88\uB7EC\uC635\uB2C8\uB2E4."]}),` `,(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"scrollState"}),"\uAC00 ",(0,s.jsx)(n.code,{children:"false"}),"\uC77C \uB550 ",(0,s.jsx)(n.code,{children:"scrollIntoView()"})," \uD568\uC218\uAC00 \uC791\uB3D9\uD558\uC9C0 \uC54A\uB3C4\uB85D ",(0,s.jsx)(n.code,{children:"useEffect"}),"\uC5D0 ",(0,s.jsx)(n.code,{children:"return"}),"\uBB38\uC744 \uC791\uC131\uD574\uC90D\uB2C8\uB2E4."]}),` `]}),` `,(0,s.jsxs)(n.h1,{id:"\uB9C8\uC9C0\uB9C9-\uCD5C\uC801\uD654-\uB9C8\uC9C0\uB9C9-\uBA54\uC138\uC9C0\uB85C-\uAC00\uB294-\uBC84\uD2BC",children:[(0,s.jsx)(n.a,{className:"anchor",href:"#\uB9C8\uC9C0\uB9C9-\uCD5C\uC801\uD654-\uB9C8\uC9C0\uB9C9-\uBA54\uC138\uC9C0\uB85C-\uAC00\uB294-\uBC84\uD2BC",children:(0,s.jsx)(n.span,{className:"icon icon-link"})}),"\uB9C8\uC9C0\uB9C9 \uCD5C\uC801\uD654 (\uB9C8\uC9C0\uB9C9 \uBA54\uC138\uC9C0\uB85C \uAC00\uB294 \uBC84\uD2BC)"]}),` `,(0,s.jsxs)(n.h2,{id:"\uBB38\uC81C-2",children:[(0,s.jsx)(n.a,{className:"anchor",href:"#\uBB38\uC81C-2",children:(0,s.jsx)(n.span,{className:"icon icon-link"})}),"\uBB38\uC81C"]}),` `,(0,s.jsxs)(n.ul,{children:[` `,(0,s.jsx)(n.li,{children:"\uC774\uC81C \uC870\uAC74\uBD80\uB85C \uC2A4\uD06C\uB864\uC774 \uC798 \uC791\uB3D9\uD569\uB2C8\uB2E4. \uB9C8\uC9C0\uB9C9\uC73C\uB85C \uD558\uB098\uB9CC \uB354 \uCD94\uAC00\uD558\uACE0 \uC2F6\uC740 \uC695\uC2EC\uC774 \uB0A9\uB2C8\uB2E4. \uC720\uC800\uAC00 \uAE34 \uCC44\uD305\uB4E4\uC744 \uB2E4 \uC77D\uACE0 \uB09C \uD6C4\uC5D0 \uD55C \uBC88\uC5D0 \uAC00\uC7A5 \uC544\uB798\uB85C \uB0B4\uB824\uAC00\uACE0 \uC2F6\uC5B4\uD560\uAC83\uC744 \uC54C\uACE0 \uC788\uC2B5\uB2C8\uB2E4."}),` `]}),` `,(0,s.jsxs)(n.h2,{id:"\uD574\uACB0-2",children:[(0,s.jsx)(n.a,{className:"anchor",href:"#\uD574\uACB0-2",children:(0,s.jsx)(n.span,{className:"icon icon-link"})}),"\uD574\uACB0"]}),` `,(0,s.jsxs)(n.ul,{children:[` `,(0,s.jsxs)(n.li,{children:["\uB9C8\uC9C0\uB9C9 \uBA54\uC138\uC9C0\uB85C \uAC00\uB294 \uBC84\uD2BC\uC744 \uC0DD\uC131\uD569\uB2C8\uB2E4.",` `,(0,s.jsx)(n.pre,{children:(0,s.jsxs)(n.code,{className:"hljs language-jsx",children:[(0,s.jsx)(n.span,{className:"hljs-comment",children:"//chatBox.js"}),` `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"import"})," _ ",(0,s.jsx)(n.span,{className:"hljs-keyword",children:"from"})," ",(0,s.jsx)(n.span,{className:"hljs-string",children:"'lodash'"}),`; `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," ",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"chatBox"})," = (",(0,s.jsx)(n.span,{className:"hljs-params",children:"{ chatArr }"}),`) => { `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," scrollRef = ",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"useRef"}),`(); `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," [scrollState, setScrollState] = ",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"useState"}),"(",(0,s.jsx)(n.span,{className:"hljs-literal",children:"true"}),`); `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," scrollEvent = _.",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"debounce"}),"(",(0,s.jsxs)(n.span,{className:"hljs-function",children:["(",(0,s.jsx)(n.span,{className:"hljs-params",children:"event"}),") =>"]}),` { `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," totalHeight = ",(0,s.jsx)(n.span,{className:"hljs-variable language_",children:"document"}),".",(0,s.jsx)(n.span,{className:"hljs-property",children:"documentElement"}),".",(0,s.jsx)(n.span,{className:"hljs-property",children:"scrollHeight"}),`; `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," innerHeight = ",(0,s.jsx)(n.span,{className:"hljs-variable language_",children:"window"}),".",(0,s.jsx)(n.span,{className:"hljs-property",children:"innerHeight"}),`; `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"const"})," myHeight = event.",(0,s.jsx)(n.span,{className:"hljs-property",children:"srcElement"}),".",(0,s.jsx)(n.span,{className:"hljs-property",children:"scrollingElement"}),".",(0,s.jsx)(n.span,{className:"hljs-property",children:"scrollTop"}),`; `,(0,s.jsx)(n.span,{className:"hljs-title function_",children:"setScrollState"}),"(totalHeight <= innerHeight + myHeight + ",(0,s.jsx)(n.span,{className:"hljs-number",children:"500"}),`); }, `,(0,s.jsx)(n.span,{className:"hljs-number",children:"200"}),`); `,(0,s.jsx)(n.span,{className:"hljs-title function_",children:"useEffect"}),"(",(0,s.jsx)(n.span,{className:"hljs-function",children:"() =>"}),` { `,(0,s.jsx)(n.span,{className:"hljs-variable language_",children:"window"}),".",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"addEventListener"}),"(",(0,s.jsx)(n.span,{className:"hljs-string",children:"'scroll'"}),`, scrollEvent); }, [scrollEvent]); `,(0,s.jsx)(n.span,{className:"hljs-title function_",children:"useEffect"}),"(",(0,s.jsx)(n.span,{className:"hljs-function",children:"() =>"}),` { `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"if"})," (!scrollState) ",(0,s.jsx)(n.span,{className:"hljs-keyword",children:"return"}),`; scrollRef.`,(0,s.jsx)(n.span,{className:"hljs-property",children:"current"}),".",(0,s.jsx)(n.span,{className:"hljs-title function_",children:"scrollIntoView"}),`(); }, [chatArr, scrollState]); `,(0,s.jsx)(n.span,{className:"hljs-keyword",children:"return"}),` ( `,(0,s.jsxs)(n.span,{className:"xml",children:[(0,s.jsx)(n.span,{className:"hljs-tag",children:"<>"}),` {!scrollState && ( `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:["<",(0,s.jsx)(n.span,{className:"hljs-name",children:"div"})," ",(0,s.jsx)(n.span,{className:"hljs-attr",children:"onClick"}),"=",(0,s.jsx)(n.span,{className:"hljs-string",children:"{()"})," =>"]}),` scrollRef.current.scrollIntoView({ behavior: 'smooth' })}> \uB9C8\uC9C0\uB9C9 \uBA54\uC138\uC9C0 \uBCF4\uAE30 `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:[""]}),` )} `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:["<",(0,s.jsx)(n.span,{className:"hljs-name",children:"div"}),">"]}),` {chatArr.map((chat) => ( `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:["<",(0,s.jsx)(n.span,{className:"hljs-name",children:"div"})," ",(0,s.jsx)(n.span,{className:"hljs-attr",children:"key"}),"=",(0,s.jsx)(n.span,{className:"hljs-string",children:"{chat.key}"}),">"]}),"{chat.message}",(0,s.jsxs)(n.span,{className:"hljs-tag",children:[""]}),` ))} ; `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:["<",(0,s.jsx)(n.span,{className:"hljs-name",children:"div"})," ",(0,s.jsx)(n.span,{className:"hljs-attr",children:"ref"}),"=",(0,s.jsx)(n.span,{className:"hljs-string",children:"{scrollRef}"})," />"]}),` `,(0,s.jsxs)(n.span,{className:"hljs-tag",children:[""]}),` `,(0,s.jsx)(n.span,{className:"hljs-tag",children:""})]}),` ); }; `]})}),` `]}),` `]}),` `,(0,s.jsxs)(n.ol,{children:[` `,(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"scrollState"}),"\uAC00 ",(0,s.jsx)(n.code,{children:"false"}),"\uC77C \uB54C, \uC989 \uC2A4\uD06C\uB864\uC774 \uAC00\uC7A5 \uC544\uB798\uAC00 \uC544\uB2D0\uB54C \uB9C8\uC9C0\uB9C9 \uBA54\uC138\uC9C0\uB85C \uAC00\uB294 \uBC84\uD2BC\uC744 \uB80C\uB354\uB9C1\uD569\uB2C8\uB2E4."]}),` `,(0,s.jsxs)(n.li,{children:["\uBC84\uD2BC\uC5D0 onClick \uC774\uBCA4\uD2B8\uB97C \uC124\uC815\uD558\uACE0 \uC124\uC815\uD55C ",(0,s.jsx)(n.code,{children:"ref"}),"\uB85C \uC774\uB3D9\uD558\uAC8C \uD569\uB2C8\uB2E4. \uCD94\uAC00\uB85C ",(0,s.jsx)(n.code,{children:"{ behavior: smooth }"})," \uB97C \uC801\uC6A9\uD558\uBA74 \uC2A4\uD06C\uB864\uC774 \uBD80\uB4DC\uB7FD\uAC8C \uB0B4\uB824\uAC00\uAC8C \uB429\uB2C8\uB2E4."]}),` `]})]})}function v(l={}){let{wrapper:n}=l.components||{};return n?(0,s.jsx)(n,Object.assign({},l,{children:(0,s.jsx)(t,l)})):t(l)}var w=v;return y(_);})(); ;return Component;

socket.io

실시간 채팅 스크롤 UX 최적화