server에서 client로 보내온 res 화면에 출력하기

server쪽에서 text에 글을 넣어 res로 client단에 출력하려고 합니다.

 

server 코드

 

  app.post("/api/test", (req, res) => {

    res.status(200).json({ success: true, text: "server 응답 출력" });

  });

 

 

 

client 코드

 

server단에서 보내준 res 데이터를 관리하기 위해

react훅인 useState를 세팅해주고 

res의 응답 값을 로그에 찍어서 확인해봅니다.

 

  const List = (props) => {

 

    const [text, setText] = useState("");

 

    useEffect(() => {

      //list component 실행시 한번만 실행

      axios

        .post("/api/test")

        .then((res) => {

          //요청 성공 후

         console.log(response);

        })

        .catch((error) => {

          console.log(error);

        });

    }, []);

    return (

      <>

        <h2>리스트 컴포넌트</h2>

        {text}

        {props.contentList.map((list, i) => {

          return <div key={i}>{list}</div>;

        })}

      </>

    );

  };

 

 

 

 

 

data 부분을 클릭해보면 text안에 server단에서 보내준 정보가 들어있습니다.

 

 

 

 

위에서 선언한 setText에 res.data.text로 경로 찾아서 넣어주면

통신이 끝난 뒤에 페이지에 렌더링 되는 것을 확인할 수 있습니다.

 

   axios

      .post("/api/test")

      .then((res) => {

        //요청 성공 후

        setText(res.data.text);

      })

      .catch((error) => {

        console.log(error);

      });