[wecode] React - mock 데이터 활용 과제

신혜린·2023년 2월 2일

wecode42

목록 보기

19/32

2023.02.02(목) Foundation-2 > 프론트엔드 세션 > [React] Data활용

💎 westagram mock 데이터 활용 과제를 구현하는 과정에서 아리송했던 부분들을 기록.

Mock Data란?

가짜데이터, 샘플 데이터를 의미. 실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터를 말한다.
프론트엔드 개발자가 개발을 하는 과정에서 API를 받아와야할 일이 생기기 마련인데 아직 백엔드 개발자가 API를 전달해주지 않은 상황에서 임시로 사용하는 샘플 데이터를 뜻함.

🚨 과제 기능 구현 중 발생한 문제 상황

각각의 피드 속 게시글들을 컴포넌트화한 Feed.js 파일 내에서 직접 각각의 태그마다 map함수를 사용하고 키값을 불러왔더니, 의도한대로 mock data 속 객체 수만큼 피드가 늘어난 게 아니라 하나의 피드 속에 mock data 들이 전부 다 불러와지는 사태가 일어남.

🔑 해결 방법

Main.js

// Main.js
const Main = () => {
  const [feed, setFeed] = useState([]);
  useEffect(() => {
    fetch('data/feedData.json')
      .then(res => res.json())
      .then(data => setFeed(data));
  }, []);
  return (
    <div className="westagram">
      <Nav />
      <main className="main">
        <div className="mainContainer">
          {feed.map(list => (
            <Feed key={list.id} list={list} />
          ))}
        </div>
        <Aside />
      </main>
    </div>
  );
};

✔️ 맨 위에서부터 뜯어서 보자.

const [feed, setFeed] = useState([]);
  useEffect(() => {
    fetch('data/feedData.json')
      .then(res => res.json())
      .then(data => setFeed(data));
  }, []);

useState([])를 활용하여 feed의 초기 상태를 []로 설정.
useEffect() 안에 넣어준 이유는...? -> useEffect의 인자로 전달된 콜백 함수는 곧바로 호출되는 것이 아니라 모든 렌더링이 완료된 후에 호출됨. 렌더링 될 때마다 fetch로 db의 data를 불러오는 것은 비효율적이기 때문에 side effect인 fetch함수는 특정 시기에만 작동되도록 묶어놓는 것.
fetch 함수를 이용해서 임의적으로 만들어준 feedData.json 파일을 불러온다.
- feedData.json파일은 public > data 폴더 안에 생성해놓음.
첫 번째 .then : 응답 받은(res) json 데이터를 javascript화 시켜줌.(res.json()) (.json 메소드 역할 검색해보기)
두 번째 .then : setFeed문을 호출해서 초기의 []상태였던 feed안에 받아온 data의 배열을 담아줌

✔️ return문 이후

<div className="mainContainer">
          {feed.map(list => (
            <Feed key={list.id} list={list} />
          ))}
        </div>

참고: 각각의 피드를 나타내는 Feed.js 컴포넌트를 <Feed />로 끼워넣어준 상태

feed.map()을 이용해 변수 list 안에 feedData.json 각각의 데이터를 담아서 돌려준다.
고유한 값을 나타내는 key를 feedData.json 안에 존재하는 id 번호로 불러와서 부여해준다.
보통 feed에 담은 data 배열들을 전부 다 불러올 경우, list={list}로 불러와서 props를 전달해준다.
- list={list} 모습

// feedData.json 참고
[
  {
    "id": 1,
    "profileImage": "images/heylynnShin/heylynn_profile.jpg",
    "profileId": "heylynn",
    "feedImage": "images/heylynnShin/westagram-feed.png"
  },
  {
    "id": 2,
    "profileImage": "images/heylynnShin/kimnamgil.png",
    "profileId": "namgil",
    "feedImage": "images/heylynnShin/rickandmorty.jpeg"
  },
  {
    "id": 3,
    "profileImage": "images/heylynnShin/kimyujeong.jpeg",
    "profileId": "yujeong",
    "feedImage": "images/heylynnShin/palmtree.jpeg"
  }
]

list={list} 를 통해 feedData.json 각각의 데이터를 담아놓은 list를 list의 값에 할당해줌.

Feed.js

// Feed.js
const Feed = ({ list }) => {
  const [input, setInput] = useState('');
  const [commentList, setCommentList] = useState([]);
  const onChangeInput = e => {
    setInput(e.target.value);
    console.log(input);
  };
  const onClickComment = e => {
    e.preventDefault();
    setCommentList([...commentList, input]);
    setInput('');
  };

🫥 ⁉️ 짚고 넘어갈 부분

💬 위 부분은 사실 이전에 댓글 기능을 컴포넌트화해서 구현해낼 때 사용했던 코드이다.
수정하기 전에는 const Feed = ({ list }) => {} 가 아니라 const Feed = props => {}였다. 댓글 기능을 구현할 때 외의 props들을 불러오기 위해 수현님이 {list}로 수정해주셨는데 작동함... 원리를 잘 이해하지 못해서 내일 정일님께 여쭤봐야 할 것 같다.

✔️ return문 이후

// ...
<p className="id">{list.profileId}</p>
// ...
<img src={list.feedImage} alt="feed pic" className="feedImage" />
// 이하 생략

각각 불러올 데이터들을 Main.js에서 map함수를 쓸 때 설정해놓은 변수명인 list를 이용하여 .을 통해 데이터의 키값을 불러와준다.

💭 당장 기록하지 않으면 휘발해버릴 것 같은 개념들이라 기능 구현 성공하자마자 적어보는 회고록.

컴포넌트 안에서 props를 불러오기 위해서는 컴포넌트 상위에 있는 js 파일 내 컴포넌트 태그 안에서 map함수를 우선 불러온 뒤, 할당해준 변수명을 이용해 컴포넌트js 내에서 {}로 불러온다.

컴포넌트js 내에서 일일이 map함수를 불러오면 하나의 컴포넌트 속에서 map함수로 불러온 모든 데이터들이 불러와진다.

🔴 map함수가 작동하는 원리에 대한 개념이 상당히 부족한 상태!

🔴 useEffect에 대한 개념 정리도 다시 한번 하기!