backend로 데이터 받아 useEffect 사용하기

1. 폴더 생성

먼저 실전 실습을 하기 위해 폴더와 파일을 먼저 생성해보자.

1.Component폴더에 데이터를 받아 사용할 UseEffectFetch.jsx 폴더 생성
2.backend폴더도 하나 생성해 server.js라는 파일 생성
3.props로 받아올 ProfileComponent.jsx파일도 생성

---

2. beckend 처리

express를 server로 변수화, listen으로 서버 포트 확인 연결

const express = require('express');
const cors = require('cors');

const PORT = 4000;
const server = express();

server.listen(PORT, () => {
  console.log('통신 시작');
});

pororoObjArr로 배열 넣어주기

const express = require('express');
const cors = require('cors');

const PORT = 4000;
const server = express();

server.use(cors());

server.get('/', (req, res) => {
  const pororoObjArr = [
    {
      name: '뽀로로',
      age: '5',
      nickName: '사고뭉치',
    },
    {
      name: '루피',
      age: '4',
      nickName: '공주님',
    },
    {
      name: '크롱이',
      age: '5',
      nickName: '장난꾸러기',
    },
  ];
  res.status(200).send(JSON.stringify(pororoObjArr));
});

server.listen(PORT, () => {
  console.log('통신 시작');
});

---

3.UseEffectFetch.jsx에서 백엔드 데이터 받아오기

fetchData 함수를 선언해 백엔드 데이터를 받아온다.

export default function UseEffectFetch() {
  async function fetchData() {
    const resFetch = await fetch('http://localhost:4000', {
      method: 'GET',
      headers: {
        'Content-type': 'application/json',
      },
    });
    console.log(resFetch);
    if (resFetch.status !== 200) return '안됨';
    const data = await resFetch.json();
    console.log(data);
    setDataArr((cur) => data);
  }

  return (
    <>
      
    </>
  );
}

---

4. ProfileComponent에서 props 사용하기

pororoObjArr 담긴 키값을 좀 더 직관적으로 전달하기 위해
구조분해 할당을 이용해 객체에 name,age.nickName을 넣어준다.

ProfileComponent({ name, age, nickName })

import React from 'react';

export default function ProfileComponent({ name, age, nickName }) {
  
  return (
    <div>
      <h1>이름 : {name}</h1>
      <h2>나이 : {age}</h2>
      <h2>별명 : {nickName}</h2>
    </div>
  );
}

---

5.이제 UseEffectFetch에서 ProfileComponent import 후 작업 처리

리턴문 안에 ProfileComponent 객체 가져오고
useEffect,useState import 시키기

import React, { useEffect, useState } from 'react';
import ProfileComponent from './ProfileComponent';

const [dataArr, setDataArr] = useState([]); //useState 추가

map을 이용해서 작업해보겠다.

return (
    <>
  {dataArr.map((el,idx)={
  return(
  <ProfileComponent name={el.name} age={el.age} nickName={el.nickName} key={inx}/>}    
    </>)
  );

전체 코드

import React, { useEffect, useState } from 'react';
import ProfileComponent from './ProfileComponent';

export default function UseEffectFetch() {
  const [dataArr, setDataArr] = useState([]);

  async function fetchData() {
    const resFetch = await fetch('http://localhost:4000', {
      method: 'GET',
      headers: {
        'Content-type': 'application/json',
      },
    });
    console.log(resFetch);
    if (resFetch.status !== 200) return '안됨';
    const data = await resFetch.json();
    console.log(data);
    setDataArr((cur) => data);
  }

  return (
    <>
      {dataArr.map((el, idx) => {
        return (
          <ProfileComponent
            name={el.name}
            age={el.age}
            nickName={el.nickName}
            key={idx}
          />
        );
      })}
    </>
  );
}

6.useEffect 사용하기

최초 렌더링 할 때만 실행하도록 []선언

useEffect(() => {
    fetchData();
  }, []);

전체코드

import React, { useEffect, useState } from 'react';
import ProfileComponent from './ProfileComponent';

export default function UseEffectFetch() {
  const [dataArr, setDataArr] = useState([]);

  async function fetchData() {
    const resFetch = await fetch('http://localhost:4000', {
      method: 'GET',
      headers: {
        'Content-type': 'application/json',
      },
    });
    console.log(resFetch);
    if (resFetch.status !== 200) return '안됨';
    const data = await resFetch.json();
    console.log(data);
    setDataArr((cur) => data);
  }

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <>
      {dataArr.map((el, idx) => {
        return (
          <ProfileComponent
            name={el.name}
            age={el.age}
            nickName={el.nickName}
            key={idx}
          />
        );
      })}
    </>
  );
}

nodemon으로 server.js실행후 react실행

백엔드에 server.js에 있던 데이터를 잘 가져와 출력되고 있다.

콘솔창에도 잘 출력 된다 . 굿