리액트 배열안 오브젝트 출력 질문

안녕하세요.

받아온 데이터를 출력이 안되서 질문드립니다.

아래가 리액트 코드입니다

let [글, 글변경] = useState(null);

    useEffect(() => {
        axios
          .get("/show")
          .then((res) => {
            글변경([...res.data]);
            console.log("성공");
          })
          .catch(() => {
            console.log("실패");
          });
    }, []);

서버요청은 잘되고 데이터도 받아오는데

불러올경우 콘솔에 [{},{},{}] 배열에 담겨서 나오고있습니다.

화면에 출력하기위해

{글[0].글내용} 이렇게 작성하였는데 오류가 나서 무엇때문인지 질문드립니다.

하지만 아래와 같이

app.js 에서 map 함수를 돌리고

컴포넌트로 state 값을 전송해서 props 로 받아와 출력해보면 잘 나오고있습니다. 무었때문일까요 ㅠㅠ

<Add 글 = {글[i]} 글변경 = {글변경} />

컴포넌트에 state를 줄때 [i] 라는 배열에 감싸서 보내면 나오는거같은데 이것말고는 방법이없는걸까요