스페이스 대신 /u00A0 || 커서 효과 추가 후 글 흔들림 방지 꿀템

커서가 깜빡이는 효과를 구현했는데 커서 (|) 가 생겼다 없어질 때마다 글자가 좌우로 살짝 움직이는 현상이 생김.
이유는 커서가 표시될 때 공간을 차지하고, 사라질때 "" (빈 문자열)이라 해당 공간이 없어지면서 생기는 흔들림이다.

이럴때 "" 대신 /u00A0 (non-breaking space)를 넣으면 문제를 깔끔하게 해결할 수 있다.

<span>{showCursor ? "|" : "\u00A0"}</span>

\u00A0 는 눈에는 안보이지만, 공간을 차지하는 특수 공백 문자로 커서가 없어도 자리를 유지하게 해줌

before

after