TIL_React_useEffect 사용

1. mock data를 활용하여 여러 개의 댓글 구현

• 기존에 UI 만들었던 json 파일 가져오기, 댓글이랑 피드
• 피드 데이터를 메인페이지에 가져와서 출력을 해야함.

function Main() {
  	const { feeds, setFeeds } = useState([]) // 피드 데이터 안에 있는 배열의 갯수 만큼 가져와야함. 
    
  useEffect(() => {  //데이터는 보통 첫 렌더링 이후에 가져옴
    fetch("/data/feeds.json")
    .then((res) => res.json())
    .then(data)
    // console.log(data) //신나서 그냥 data받아올 수 있음 그러나 여기서  console.log(typeOf data) 찍어보면 알겠지만 data는 객체임
    따라서 배열로 받아올 수 있게 data.feedData로 가져와야함.
    setFeeds(data.feedData);
    

• 배열의 형태를 가진 것을 map 함수를 돌려서 출력 (여기까지하면 피드 배열 갯수에 맞게 피드가 3개가 뜰 것임)

<div className ="contents-wrapper">
 { feeds.map((map)=> { //map 함수 돌릴 때 key가 필요
  return <Feed key {feed.feedId} />

• 피드에 있는 데이터 넘겨줘야함. 지금까지는 피드 갯수만 가져옴.

<div className ="contents-wrapper">
 { feeds.map((map)=> { 
  return <Feed key {feed.feedId} feedData={feed} /> //feedData의 이름으로 feed를 넘겨줌.

• Feed.js에 가서 피드를 각각 어떻게 받아오는 지 확인. (각각 데이터 받아오는 걸 확인할 수 있음)

function Feed({ feedData }) { 
//여기서 급하면 배열 없이 가져올 수 있음. 그러면 또 객체 형태로 받아오게 됨. 이렇게 되면 밑에 아이디에 feedData.feedData.username으로 적고 console.log도 console.log(feedData.feedData)를 해야 제대로 찍힐 것임,
그런데 이러면 너무 복잡하니까 배열로 잘 가져오기.

// console.log(feedData)
  const [comment, setComment] = useState();

• 이제 피드 사진이랑 피드 내용을 각각 피드에 맞게 가져오기

 return (
    <div className="feed-container">
     <div className="feed-header">
      <div className="vertical-center">
        <img alt="이미지" /> {feedData.username} //아이디
      </div>
      <div>...</div>
     </div>
     <div className="feed-image">
      <img className="feed-my-img" src={feedData.feedImages[0].imageUrl} /> //이미지. 이때 {feedData.feedImages}만 가져오면 안됨. 피드 이미지 안에 배열이 있고 (이미지가 2개씩 있음), 그 안에 url이 있기 때문. 따라서 하나하나씩 접근을 해줘야함.
      </div>
      <div>{feedData.content}</div> //피드 내용

2. mock data를 활용하여 여러 개의 피드 구현

• useEffect로 정보 받아오기

const [commentArray, setCommentArray] = useState([])// 아래 참고
useEffect(() => {
  fetch("/data/comments.json)
  .then((res) => res.json();
  .then((data) => setCommentArray(data.comments))
  //=> console.log(data) //이때 에러가 뜨는데 map 함수 돌릴게 없다고 뜸. 왜냐하면 map 돌리는 commentArray에 아무것도 없으니까.
  따라서 여기에 배열[] 넣어주기 (or 조건부 렌더링)