axios 요청시 콘솔창에 출력만 안되는 문제

function File(){
  let data;
  axios.get("https://jsonplaceholder.typicode.com/photos?_start=0&_end=1")
  .then(function(res){
    data = [...res.data]
  })
  console.log(data);
 
  return(
    <>
    <h3></h3>
    </img>
    </>
  )
}

jsonplaceholder api 받아와서 

axios.get 으로 요청한데이터 받와서 data 변수에 담아서

data.title 쓰고싶은데 분명 .then((res)=> console.log(res.data) 하면 받아온promise 객체의

data 에들어있는 오브젝트 자료가 찍히기는하는데

그걸 전역변수 data 에 집어넣으려고하니까 undefinde 가 콘솔에찍히네요 . .

ㅠㅠ 뭐가잘못됬나요 . .