custom hook으로 서버에서 이름을 가져오는 부분 질문

[신지민]

hooks/username.js

import { useState, useEffect } from "react";
import axios from "axios";

export function useUserName(){
let [userName, setUserName] = useState('');
useEffect(()=>{
axios.get('/username.json')
 .then((r)=>{
console.log('Fetched data:', r.data); // 데이터 형식 확인
setUserName(r.data)
 })
 .catch(()=>{console.log('데이터 요청 실패')})
 }, []);

return userName;
}
작성하고
Detail.js에서

let [userName] = useUserName();

return (
<div>사용자 {userName}</div>
)

이렇게 적었는데 username.json 데이터 "Kim" 중 첫글자인 K만 가져와집니다...
콘솔에는 Fetched data: Kim 로 데이터가 잘 찍히는데 첫글자만 가져와지는 이유를 잘 모르겠어요.

[codingapple]

let [userName] = useUserName(); 하면 등호 오른쪽에 있던 array에서 자료 뽑아서 userName에 담으라는 소리인데
등호 오른쪽은 문자같습니다

[글쓴이]

글