react, node.js, mysql 연결[db 연결내용은 숫자도 문자열로 전달]

환경조성

 

backend folder

 

backend 이동후

 

npm init -y

 

npm install mysql express cors nodemon

 

---

backend 상위폴더로 나온 후,

 

npx create-react-app 폴더명(frontend)

---

scripts에 객체명령어를 추가해서 더욱 명령어 입력을 쉽게 만들 수 있다.

---

db 내용 json으로 띄워보기

 

db의 정보를 입력한 후, db를 만들던지, 아니면 기존 db를 시험적으로 select 문으로 불러와본다.(서버 실행 잊지말고)

const express = require('express')

const cors = require('cors')

const mysql = require('mysql')

const app = express();

const db = mysql.createConnection({

  host: "localhost",

  user: "root",

  password: "1234",

  database: "class"

})

app.listen(8081, () => {

  console.log("Listening...")

})

app.get("/student", (req, res) => {

  const sql = "SELECT * FROM fun"

  db.query(sql, (err, data) => {

    if(err) return res.json("Error")

    return res.json(data)

  })

})

 

코드 입력 후, 명령어 server.js가 있는 폴더에서 실행.

 

잘 나온다. 이제 이 데이터를 react에서 출력해보자.

---

단축키를 통해 더 쉬운 app.js 시작 가능.

 

import React from 'react'

function App() {

  return (

    <div>

     

    </div>

  )

}

export default App

 

---

data의 구조를 고려하여 출력 및, data를 setData()에 보냄.

import React, { useEffect, useState } from 'react'

function App() {

  const [data, setData] = useState([])

  useEffect(() => {

    fetch('http://localhost:8081/student')

    .then(res => res.json())

    .then(data => setData(data))

    .catch(err => console.log(err))

  }, [])

  return (

    <div>

      {data.map((item, index) => (

        <p key={index}>{item.title}</p> // 각 타이틀을 별도의 <p> 태그로 감싸고 고유 key를 제공

      ))}

    </div>

  )

}

export default App

---

 

key 값

위의 코드 작성 후, 다음 날에 배웟는데 map을 돌면서 index를 사용하는 것은 최대한 지양되야 한다고 함.

 

map을 사용하여 배열을 렌더링할 때 index를 key로 사용하는 것은 지양되어야 하는 몇 가지 중요한 이유가 있다:

1. 리스트 아이템의 안정성이 보장되지 않음: React는 key를 사용하여 DOM 엘리먼트가 어떻게 변경되었는지를 판단합니다. 만약 리스트의 아이템이 재배치되거나 중간에 아이템이 추가되거나 삭제되면, index 기반의 key는 더 이상 고유하지 않게 되며, 이는 잘못된 렌더링과 성능 저하를 초래할 수 있습니다.
2. 컴포넌트 상태 문제: 만약 리스트 아이템이 자체 상태를 가지고 있다면, key가 index일 때 아이템의 순서가 변경되면 잘못된 아이템에 상태가 연결될 수 있습니다. 이는 예측하기 어려운 버그를 유발할 수 있습니다.

따라서, 가능한 한 각 아이템이 가지고 있는 고유한 값을 key로 사용하는 것이 좋습니다. 예를 들어, item 객체에 고유한 id 속성이 있다면, 이를 key로 사용하는 것이 이상적입니다.

 

---

Key의 역할

리스트 또는 배열을 렌더링할 때, React는 각 요소를 구별할 수 있는 방법이 필요합니다. 여기서 key가 중요한 역할을 합니다. key는 각 요소가 고유함을 나타내며, React가 어떤 요소가 변경, 추가, 또는 삭제되었는지 식별하는 데 도움을 줍니다.

복잡도 감소

이론적으로, 리스트의 아이템이 변경될 때마다 모든 요소를 확인하여 변경 사항을 파악하는 것은 O(n^3)의 시간 복잡도를 가질 수 있습니다. 여기서 n은 리스트 아이템의 수입니다. 하지만, 고유한 key를 사용함으로써 React는 각 요소를 효율적으로 식별하고, 변경된 요소만을 정확하게 파악할 수 있습니다. 이는 비교 알고리즘의 효율성을 크게 향상시켜 복잡도를 O(n)으로 줄일 수 있게 합니다.

결론

key를 사용하는 것은 React가 효율적으로 가상 DOM의 변경사항을 실제 DOM에 반영할 수 있도록 해줍니다. 이는 애플리케이션의 성능을 향상시키며, 특히 큰 리스트나 복잡한 UI를 다룰 때 중요합니다. key가 없거나 불규칙하게 할당되면, React는 변경사항을 효과적으로 추적할 수 없어 불필요한 DOM 조작이 발생하고, 결과적으로 성능 저하로 이어질 수 있습니다.

---

 

 

아래가 수정사항 반영코드

import React, { useEffect, useState } from 'react'

function App() {

  const [data, setData] = useState([])

  useEffect(() => {

    fetch('http://localhost:8081/student')

    .then(res => res.json())

    .then(data => setData(data))

    .catch(err => console.log(err))

  }, [])

 

  return (

    <div>

      {data.map(item => (

        <p key={item.id}>{item.title}</p> // 각 item의 고유 id를 key로 사용

      ))}

    </div>

  )

}

export default App

---

백엔드 서버 실행상태. db에서 받은 데이터를 그대로 출력 중

---

db정보를 백엔드로 서버(8081)로부터 받아와서 3000포트(리액트 본거지)에서 출력

1. HTTP 요청 보내기: fetch 함수에 URL을 전달하여 서버에 HTTP 요청을 보냅니다. 예를 들어, fetch('http://localhost:8081/students')는 localhost의 8081번 포트에서 실행 중인 서버에 /students 경로로 요청을 보냅니다.
2. 응답 받기: 서버는 이 요청을 처리하고 응답을 보냅니다. 이 응답은 보통 JSON 형식의 데이터를 포함합니다.
3. 응답 처리: 클라이언트에서는 서버로부터 받은 응답을 처리합니다. 예를 들어, .then(res => res.json())은 서버로부터 받은 응답을 JSON 형식으로 변환합니다.
4. 데이터 활용: 변환된 데이터는 React 컴포넌트의 상태(useState를 사용하여 정의된 상태)에 저장되고, 이 데이터를 사용하여 UI를 업데이트합니다.

fetch 함수는 웹 개발에서 API 호출을 하고, 서버로부터 데이터를 가져오는 데 널리 사용됩니다. 이를 통해 클라이언트와 서버 간의 데이터 교환을 할 수 있으며, 이는 웹 애플리케이션에서 중요한 기능 중 하나입니다.

---

DB는 숫자들의 모임도 문자열로 전달

const db = mysql.createConnection({

  host: "localhost",

  user: "root",

  password: "1231",

  database: "class"

})

 

MySQL 데이터베이스에 연결할 때, password 옵션은 문자열로 제공되어야 합니다. mysql.createConnection 함수를 사용할 때, 데이터베이스에 접속하기 위한 설정 정보를 객체 형태로 전달하는데, 여기에는 호스트명, 사용자 이름, 비밀번호, 사용할 데이터베이스 이름 등이 포함됩니다.

---

https://www.youtube.com/watch?v=FM76sRlgUxA