🧩 프로젝트 관련 정리

---

☕ [ JPA ]

⚠️ Entity 클래스에서 @Data 사용 금지

• @Data는 @Getter, @Setter, @ToString, @EqualsAndHashCode, @RequiredArgsConstructor 등을 모두 포함한다.
• 하지만 Entity 클래스에서는 @Data를 사용하면 예기치 않은 문제가 발생할 수 있다.

🚫 사용 금지 이유

문제점	설명
🔁 무한 루프 발생 위험	@ToString이나 @EqualsAndHashCode가 연관관계(@OneToMany, @ManyToOne)를 순회하면서 순환참조 발생
🧠 불필요한 Setter 생성	Entity는 불변 객체(Immutable) 로 유지하는 것이 좋지만, @Setter로 인해 무분별한 변경 가능
⚙️ JPA Proxy 충돌 가능성	@EqualsAndHashCode가 프록시 객체 비교 시 영속성 컨텍스트 충돌 유발 가능

✅ 권장 대안

• 필요한 기능만 개별적으로 명시해서 사용한다.

@Getter
@NoArgsConstructor
@AllArgsConstructor
@Builder
@Entity
public class Member {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;
    private String email;
}

월요일에 강사님께 꼭 여쭤보기!!!

---

⚛️ [ React ]

🧭 상태 관리(Store Management)

React에서 상태(state) 는 앱 전반의 데이터 흐름을 제어하는 핵심이다.
상태를 일관되게 관리하기 위해 여러 가지 방법이 존재한다.

📦 주요 상태 관리 방법

방식	설명	특징
useState	컴포넌트 단일 상태 관리	가장 기본적이고 간단함
useReducer	복잡한 로직을 가진 상태 관리	switch-case로 상태 전이 제어
Context API	전역 상태를 하위 컴포넌트에 전달	규모가 작은 프로젝트에 적합
Redux Toolkit	전역 상태를 효율적으로 관리하는 라이브러리	대규모 앱, 비동기 처리에 강력
Recoil	React 공식 팀이 제안한 새로운 상태 관리	Selector 기반, 데이터 파이프라인에 유용

---

🧰 Redux Toolkit 예시

npm install @reduxjs/toolkit react-redux

📘 store.js

import { configureStore } from "@reduxjs/toolkit";
import userSlice from "./userSlice";

export const store = configureStore({
  reducer: {
    user: userSlice,
  },
});

📘 userSlice.js

import { createSlice } from "@reduxjs/toolkit";

const userSlice = createSlice({
  name: "user",
  initialState: { name: "", email: "" },
  reducers: {
    setUser: (state, action) => {
      state.name = action.payload.name;
      state.email = action.payload.email;
    },
    clearUser: (state) => {
      state.name = "";
      state.email = "";
    },
  },
});

export const { setUser, clearUser } = userSlice.actions;
export default userSlice.reducer;

📘 index.js

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./store";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <Provider store={store}>
    <App />
  </Provider>
);

💡 Tip:

• 컴포넌트에서는 useSelector로 상태 조회, useDispatch로 액션 호출
• Redux Toolkit은 비동기 처리(createAsyncThunk) 도 지원한다.

---