$$config title: [Project] react에 mysql 데이터 불러오기 keywords: - IT - ... $$ # Hook_useEffect [useEffect](https://www.youtube.com/watch?v=6DuHBXICspM) [useEffect deps](https://www.youtube.com/watch?v=-L3ZJEEZbUs) API 호출이 변경될 때마다 많은 데이터가 계속 불러온다 그럼 계속 새로고침이 된다. 한번 호출하고 그 데이터를 이용하면 된다. useEffect( 함수, deps) - useEffect( () => {}, []); 빈 배열을 넣게 되면 한번만 실행 배열 안은 값이 변경될 때 실행하고 싶다면 배열 안에 쓰기 [db에서 데이터 조회](https://www.youtube.com/watch?v=ARH0s7eU-P0) [Tailwind daisyui](https://daisyui.com/components/table/) ```js import { useState, useEffect } from "react"; import axios from "axios"; import MemberList from "./component/MemberList"; function App() { const [error, setError] = useState(null); const [members, setMembers] = useState([]); useEffect(() => { const getData = async () => { try { const data = await axios({ url: `http://localhost:4000/member`, method: "GET", }); setMembers(data.data); } catch (e) { setError(e); } }; getData(); }, []); return (); export default App; ``` `npm install classnames` ```js return (

{/* */}

	id	이름	나이	성별	거주지	연락처	이메일	가입일

); ``` # node_git 저장 [express git](https://github.com/hyelim3/express_information) [react git](https://github.com/hyelim3/react_infromation) github , new -> 파일을 만들기 vscode -> 새 파일 .gitignore -> node_modules package-lock.json -> git init -> git status -> git add . -> git commit -m "express db 세팅" -> git remote add origin https://github.com/hyelim3/express_information -> git remote -v -> git push origin master # component_MemberList.jsx ```js import React from "react"; import MemberListItem from "./MemberListItem"; const MemberList = ({ members }) => { //members를 받아야함 return ( {/* thead 밑에 tbody */} {members.map((member, index) => ( //li대신 ListItem을 렌더링, tbody 밑에 tr, th, td ))} ); }; export default MemberList; ```
return을 쓸려면! `{members.map((member, index) => { return ; })}` # component_MemberListItem.jsx ```js import React from "react"; const MemberListItem = ({ member, index }) => { return ( {/* {index + 1} */} {member.id} {member.이름} {member.나이} {member.성별} {member.거주지} {member.연락처} {member.이메일} {member.가입일} ); }; export default MemberListItem; ```