⚛️ React 핵심 정리

---

🧩 JSX에서 함수 매개변수 전달하기

JSX에서 이벤트에 매개변수를 가진 함수를 전달하려면, 반드시 다른 함수로 감싸서 전달해야 합니다.

onClick={() => deleteList(member.mno)}

잘못된 방법 ❌	올바른 방법 ✅
onClick={deleteList(member.mno)}	onClick={() => deleteList(member.mno)}

이유: JSX는 렌더링 시점에 함수를 즉시 실행하지 않고, 클릭 시점에 실행해야 하기 때문입니다.

---

🪝 Hook

React의 Hook은 상태 관리와 컴포넌트 생명 주기 제어를 위한 필수 도구입니다.

🧱 useEffect

개념	설명
역할	특정 시점(컴포넌트 생명주기)에 따라 함수를 실행하는 Hook
시점	① 컴포넌트 탄생 (mount) ② 재렌더링 (update) ③ 종료 (unmount)
의존성 배열	[] 내부에 상태변수를 넣으면, 해당 변수 변경 시 useEffect 실행
주의점	실행 조건 없이 실행하면 무한 루프 발생

💻 useEffect 예시

// 1️⃣ 컴포넌트 실행마다 실행 (의존성 배열 없음)
useEffect(() => {
  console.log('[1] 컴포넌트 실행마다');
});

// 2️⃣ 최초 실행 + 특정 상태 변경 시 실행
const [count1, setCount1] = useState(0);
const [count2, setCount2] = useState(0);

useEffect(() => {
  console.log('[2] 컴포넌트 최초실행 + count1 변경 시 실행');
}, [count1]);

// 3️⃣ 최초 1회만 실행 (빈 의존성 배열)
useEffect(() => {
  console.log('[3] 컴포넌트 최초실행');
}, []);

상황	의존성 배열	실행 시점
모든 렌더링 시 실행	없음	매 렌더링마다
특정 상태 변경 시	[count1]	count1 업데이트 시
최초 1회만 실행	[]	컴포넌트 마운트 시

---

🌐 Axios

React에서 비동기 통신(REST API) 을 처리할 때 주로 사용하는 HTTP 클라이언트입니다.

⚙️ 설치 방법

단계	명령어
1️⃣	React 서버 종료 후 터미널 실행
2️⃣	npm install axios

💡 사용 방법

import axios from 'axios';

// GET 요청
const response = await axios.get(URL);

// POST 요청
const response = await axios.post(URL, obj);

// PUT 요청
const response = await axios.put(URL, obj);

// DELETE 요청
const response = await axios.delete(URL);

// 응답 정보
console.log(response.data);   // HTTP 응답 데이터
console.log(response.status); // HTTP 상태 코드

속성	설명
response.data	서버로부터 수신한 응답 데이터
response.status	HTTP 응답 상태 코드 (200 성공, 404 실패 등)

---

✅ Tip: Axios 통신 시 에러가 발생할 수 있으므로, try-catch로 감싸 안전하게 예외 처리하는 것이 좋습니다.

try {
  const response = await axios.get('/api/data');
} catch (error) {
  console.error('요청 실패:', error);
}