⚛️ React Hook, Router, Redux 정리
🪝 React Hook
React의 핵심 기능으로, 컴포넌트의 생명주기(Lifecycle) 에 따라 특정 시점에 함수를 실행하도록 돕는 기능입니다.
| Hook | 선언 문법 | 설명 | 특징 |
|---|
| useState | const [변수, set변수] = useState(초기값); | 컴포넌트 내 상태(값) 관리 | 상태 변경 시 컴포넌트 리렌더링 발생 |
| useRef | const 변수명 = useRef(초기값); | 값 또는 DOM 참조 | 값 변경 시 리렌더링되지 않음 |
| useEffect | useEffect(() => {}, [의존성 배열]); | 컴포넌트가 렌더링될 때 자동 실행 | 생명주기 이벤트 관리 가능 |
💡 요약: 입력값을 UI에 표시할 때는 useState, 내부 값 관리용은 useRef, 렌더링 시점에 특정 코드 실행은 useEffect 사용.
🌐 React Router
React는 SPA(Single Page Application) 구조이므로, 페이지 전환 시 HTML이 새로 고쳐지지 않고 컴포넌트만 변경됩니다.
🚀 기본 사용법
| 단계 | 설명 | 예시 |
|---|
| 1️⃣ | React Router 설치 | npm i react-router-dom |
| 2️⃣ | BrowserRouter로 컴포넌트 감싸기 | <BrowserRouter> ... </BrowserRouter> |
| 3️⃣ | 가상의 URL(Path)와 컴포넌트 연결 | <Route path="가상URL" element={<컴포넌트/>} /> |
| 4️⃣ | 예외 페이지 설정 | <Route path="*" element={<NotFound/>}/> |
<Routes>
<Route path="/" element={<Home/>} />
<Route path="/login" element={<Login/>} />
<Route path="*" element={<Error/>} />
</Routes>
⚡ URL & 매개변수
| 기능 | 설명 | 예시 |
|---|
| path 변수 전달 | URL에 변수를 포함 | <Route path="user/:id" element={<User/>}/> |
| 쿼리스트링 가져오기 | useSearchParams() 사용 | searchParams.get('key') |
| path 변수 가져오기 | useParams() 사용 | const { id } = useParams(); |
🔗 이동 방법
| 상황 | 방법 | 예시 |
|---|
| 링크 클릭 시 이동 | Link 컴포넌트 사용 | <Link to="/login">로그인</Link> |
| JS로 프로그래밍 이동 | useNavigate() 사용 | const nav = useNavigate(); nav('/home'); |
🧩 Redux (전역 상태관리 라이브러리)
React에서 여러 컴포넌트 간의 상태(값)를 효율적으로 공유하기 위한 라이브러리입니다.
💼 Redux 개념 요약
| 구성요소 | 역할 | 설명 |
|---|
| Store | 중앙 저장소 | 모든 상태를 관리하는 공간 (configureStore()) |
| Slice | 상태 정의 | 상태(initialState)와 reducer를 포함 (createSlice()) |
| Reducer | 상태 변경 함수 | action에 따른 state 변경 로직 |
| Action | 상태 변경 요청 신호 | reducer를 호출하여 상태 수정 |
⚙️ 실행 흐름
1️⃣ 일반 컴포넌트(ex. LoginPage)에서 action 실행 → dispatch(login())
2️⃣ Action이 Store로 전달됨
3️⃣ Store에서 등록된 Reducer가 상태(state)를 수정함
⚡ Redux 사용법 (기본 패턴)
| 단계 | 설명 | 코드 예시 |
|---|
| 1️⃣ | 전역변수 초기값 정의 | const initialState = { key: value }; |
| 2️⃣ | Slice 생성 | createSlice({ name, initialState, reducers }) |
| 3️⃣ | Reducer 및 Action 내보내기 | export const { 액션명 } = Slice.actions; export default Slice.reducer; |
| 4️⃣ | Store 생성 후 등록 | configureStore({ reducer: { 슬라이스명: 슬라이스리듀서 } }) |
| 5️⃣ | 상태 조회 | const state = useSelector((state) => state.슬라이스명); |
| 6️⃣ | 상태 변경 | const dispatch = useDispatch(); dispatch(액션명()); |
| 7️⃣ | 컴포넌트 전환 | const nav = useNavigate(); nav('/path'); |
🧠 Redux 활용 예시
| 상황 | 사용 이유 |
|---|
| 전역변수가 필요할 때 | 앱 전체에서 공통 데이터 관리 |
| 여러 컴포넌트 간 상태 공유 | 중복 상태 관리 방지 |
| props 전달이 복잡할 때 | 상태 중앙 집중화로 코드 간결화 |
| 로그인, 테마, 사용자 정보 | 공통 상태 유지 및 동기화 |
