퀴즈관련된 로직을 만들던 중 한글 초성 맞추기 관련 로직을 찾아보게되었습니다.
흔히 쓰지 않는 로직이지만 이참에 정리해 두려고 합니다.
한글의 초성을 추출하기 위해서는 각 한글 문자를 유니코드로 변환한 후, 해당 유니코드에서 특정 값을 빼서 초성의 유니코드를 얻어야 합니다. 그리고 그 유니코드를 다시 문자로 변환하여 초성을 얻을 수 있습니다.
const [extractInput, setExtractInput] = useState("");
const [extractChar, setExtractChar] = useState("");
const getInitials = (e) => {
setExtractInput(e.target.value);
const str = e.target.value;
const cho = ["ㄱ", "ㄲ", "ㄴ", "ㄷ", "ㄸ", "ㄹ", "ㅁ", "ㅂ", "ㅃ", "ㅅ", "ㅆ", "ㅇ", "ㅈ", "ㅉ", "ㅊ", "ㅋ", "ㅌ", "ㅍ", "ㅎ"];
let result = "";
for (let i = 0; i < str.length; i++) {
const charCode = str.charCodeAt(i);
if (charCode >= 0xAC00 && charCode <= 0xD7A3) {
const uni = charCode - 0xAC00;
const choIdx = Math.floor(uni / (21 * 28));
result += cho[choIdx];
} else {
result += str[i];
}
}
setExtractChar(result);
}
return(
<div>
<input type="text" value={extractInput} onChange={getInitials} style={{border: "1px solid lightgrey"}} />
<br/>
<span>range value: {extractChar}</span>
</div>
)
입력된 문자열의 각 문자에 대해 유니코드를 계산하여 초성을 추출하고, 그 결과를 state에 업데이트 해주면됩니다.
charCode >= 0xAC00 && charCode <= 0xD7A3 이 부분은 한글 유니코드의 범위를 체크하는 조건입니다.
0xAC00은 '가'의 유니코드 값으로, 이는 한글 음절의 시작점이며, 초성이 'ㄱ', 중성이 'ㅏ', 종성이 없는 경우를 나타냅니다.
0xD7A3은 '힣'의 유니코드 값입니다. 이는 한글 음절의 끝점이며, 초성이 'ㅎ', 중성이 'ㅣ', 종성이 'ㅎ'인 경우를 나타냅니다.
즉, charCode >= 0xAC00 && charCode <= 0xD7A3 이 조건은 주어진 문자가 한글 음절인지를 확인합니다.
이 조건이 true이면, 해당 문자는 '가'부터 '힣' 사이의 한글 음절이라는 것을 알 수 있습니다.
이 범위 내의 문자에 대해서만 초성을 추출하는 로직을 적용합니다. 만약 문자가 이 범위 밖에 있다면, 그 문자는 한글 음절이 아니므로 초성 추출 로직을 적용하지 않고, 원래 문자를 그대로 반환합니다.
만약 한글이 아닌 다른 글자가 들어가는경우 그대로 return 하게 됩니다.
'React' 카테고리의 다른 글
커스텀 hook 만들기 (0) | 2025.01.31 |
---|---|
React에서 clipboard에 copy&paste 하기 (0) | 2023.10.09 |
react에서 실시간 window 사이즈 가져오기 feat. 반응형 (0) | 2023.10.09 |
데이터 없이 숫자까지 map 돌리기 , 배열 map 나머지 채우기 (0) | 2023.09.16 |
react에서 실시간 검색 만들기 (0) | 2023.09.11 |