회고 리스트

아래 사이트를 axios 통신하여, 테이블을 그리시오. 삭제 버튼도 구현 하여 삭제도 되도록 하시오.

https://sample.bmaster.kro.kr/contacts?pageno=3&pagesize=10

AxiosClient.jsx

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

const AxiosClient = () => {
  const [contacts, setContacts] = useState(null); // 데이터를 저장할 상태

  useEffect(() => {
    // 버튼 안 눌러도 바로 데이터 받아옴
    handleClick()
  }, [])

  const handleClick = () => {
    axios.get('https://sample.bmaster.kro.kr/contacts?pageno=3&pagesize=10')
      .then((response) => {
        //통신이 성공 했을때
        console.log(response)
        setContacts(response.data.contacts)
      })
      .catch(function (error) {
        //에러가 났을때 실행
        console.log(error)
      })
      .then(() => {
        // try catch finally 에서 finally 부분에 해당
        console.log('에러가 나든 안나든 무조건 실행')
      })
  }

  const removeClick = (event) => {
    let no = event.target.name
    console.log(event)
    console.log(no)
    console.log(event.target.value)

    setContacts(contacts.filter((contact) => contact.no != no))
    // 다른 애가 true라 다른 애들만 그림
  }

  return (
    <div className='text-center mt-5'>
      <h2>클라이언트 테이블 받아오기 연습</h2>
      <button onClick={handleClick}>클라이언트 데이터</button>
      <hr />
      <div className='d-flex justify-content-center'>
        <table border="1">
          <tr>
            <td>번호</td>
            <td>이름</td>
            <td>전화번호</td>
            <td>주소</td>
            <td>사진</td>
            <td>삭제</td>
          </tr>
          {
            contacts && contacts.map((contact, index) => (
                <tr key={index}>
                    <td>{contact.no}</td>
                    <td>{contact.name}</td>
                    <td>{contact.tel}</td>
                    <td>{contact.address}</td>
                    <td><img src={contact.photo} alt="" /></td>
                    <td><input type="button" name = {contact.no} onClick={removeClick} value="삭제" /></td>
                </tr>
            )
          )}
        </table>
      </div> 
    </div>
  );
};

export default AxiosClient;

---

Routes.jsx

import AxiosClient from "../pages/AxiosClient"
import HomePage from "../pages/HomePage"


//React Routes, Route 사용시 배열로 관리하기
const routes = [
    {
      path: '/',
      element: <HomePage/>,
      title : 'Home',
    },
    {
      path: '/axiosclient',
      element: <AxiosClient/>,
      title: 'axios-client',
    },
]
export default routes
  

---

React Hook이란?

React Hook은 함수형 컴포넌트에서도 클래스형 컴포넌트처럼 상태 관리와 라이프사이클 기능을 사용할 수 있게 해주는 함수이다.
React 16.8 버전부터 도입됐고 use로 시작하는 이름을 가진다.

React Hook 종류와 설명

useState (상태 관리 Hook)

컴포넌트의 상태 값을 저장하고 업데이트하는 기능을 제공한다.
상태 값이 변경되면 컴포넌트가 자동으로 다시 렌더링된다.
배열 구조로 [state, setState]를 반환하며 setState를 호출하면 상태가 업데이트된다.
State는 직접 수정할 수 없고 직접 수정 시 갱신이 되지 않고 setState를 통해 수정해야 한다.

useEffect (부수 효과 관리 Hook)

컴포넌트가 렌더링될 때마다 실행되는 코드(부수 효과)를 관리한다.
예시로 API 호출, 구독(subscribe), DOM 업데이트 등이 있다.
두 번째 매개변수인 의존성 배열에 따라 실행 시점이 달라진다.

• [] 빈 배열: 처음 렌더링 될 때만 즉 마운트 시 1번만 실행된다.
  컴포넌트가 재렌더링된 이후 실행된다.
• [value] : 배열에 값이 있으면 해당 값이 바뀔 때마다 실행된다.
• 배열이 없으면 컴포넌트가 매번 렌더링될 때마다 실행된다.

useRef (참조 관리 Hook)

변화를 감지해야 하지만 렌더링 하고 싶지 않을 때 사용된다.
DOM 요소나 컴포넌트의 값을 직접 참조할 때 사용된다.
값이 변경돼도 렌더링을 발생시키지 않는다.
예시로 포커스 설정, 애니메이션, 이전 상태 저장, 타이머 ID 관리 등이 있다.

useContext (전역 상태 공유 Hook)

컴포넌트 트리 전체에서 데이터를 전역으로 전달할 때 사용된다.
props drilling(중간 컴포넌트를 통해 데이터를 전달하는 불편함)을 해결한다.
React.createContext()로 만든 Context를 가져와서 사용하면 된다.

---

콜백 함수(Callback Function)란?

콜백 함수는 "다른 함수의 인자로 전달되어 나중에 실행되는 함수"이다.
쉽게 말해서 특정 작업이 끝난 후 실행되도록 예약된 함수라고 생각하면 된다.

• 콜백 함수의 특징

  • 비동기 처리에 사용: 예를 들어 서버에서 데이터를 가져온 후 결과를 처리할 때 사용된다.

• 순차적인 코드 실행: 어떤 작업이 끝난 후에만 특정 함수를 실행시키고 싶을 때 유용하다.

• 다른 함수에 전달: 함수의 매개변수로 전달되기 때문에, 필요할 때 호출할 수 있다.

React에서의 콜백 함수

React에서는 콜백 함수가 자주 쓰인다.
예를 들어:

• useState의 setState: 이전 상태를 기준으로 업데이트할 때 콜백 함수 사용한다.
• 이벤트 핸들러: onClick, onChange 같은 이벤트에 전달하는 함수이다.
• useEffect와 useCallback: 의존성 배열에 따라 콜백 함수가 실행된다.

---

3줄요약
1. useRef 는 querySelector 와 같은 역할은한다.
2. 라우팅이란 url 과 컴포넌트관의 맵핑을 말한다.
3. axios는 비동기 통신이며, 동기 통신을 위하여 aynce await 문법을 적용하면 된다.