[React] Hooks - useNavigate

useNavigate란 무엇인가?React의 useNavigate는 react-router-dom에서 제공하는 훅으로 페이지 간의 탐색을 쉽게 구현할 수 있게 도와준다다. 사용자가 특정 이벤트(예: 버튼 클릭)를 트리거하면 해당 이벤트가 발생한 후 다른 경로로 이동해야 할 때 useNavigate를 사용할 수 있다. 예를 들어 로그인 성공 후 대시보드로 이동하거나 특정 데이터를 서버에 전송한 후 결과 페이지로 리다이렉트할 때 유용하다.왜 useNavigate를 사용할까?기존의 HTML 방식에서는 페이지 전환 시 전체 페이지가 리로드되지만 React는 싱글 페이지 애플리케이션(SPA) 특성상 페이지 리로드 없이 화면이 부드럽게 전환된다. useNavigate는 이러한 SPA에서 라우팅을 프로그래밍적으로 처..

• format_list_bulleted Frontend/React
• · 2024. 10. 7.
• textsms

[React] Hooks - useReducer

useReducer란 무엇인가?React의 useReducer Hook은 상태(state) 관리를 위한 Hooks으로 복잡한 상태 로직을 처리하거나 여러 상태 값을 다뤄야 할 때 유용하다. useState와 비슷한 역할을 하지만 상태 업데이트 로직이 복잡해질수록 useReducer는 훨씬 깔끔하고 유지보수하기 쉬운 코드를 작성할 수 있게 해준다. useReducer는 리듀서 패턴에 따라 상태와 상태를 변경하는 함수(reducer)를 함께 관리하여 useState보다 더 복잡한 상태 변화를 효율적으로 처리할 수 있도록 설계되었다. useState vs useReduceruseReducer와 useState는 모두 상태를 관리하는 데 사용되지만 사용 사례가 다를 수 있다.useState: 간단한 상태 관리에..

• format_list_bulleted Frontend/React
• · 2024. 9. 29.
• textsms

[React] Hooks - useRef

useRef란 무엇인가?React의 useRef Hook은 참조(ref)를 통해 DOM 요소나 컴포넌트 상태 값을 유지하는 데 중요한 역할을 한다. useRef는 주로 DOM 요소에 직접 접근, 불필요한 재렌더링 방지, 상태 값 유지 등의 상황에서 유용하게 사용된다.useRef는 변경 가능한 객체를 반환한다. 이 객체의 .current 프로퍼티에 값을 저장할 수 있으며 이는 컴포넌트가 다시 렌더링되더라도 값이 유지된다. 일반적으로 DOM 요소에 접근하거나 렌더링 사이에서 값을 기억하는 데 사용된다.ref 객체: useRef는 { current: null } 형태의 객체를 반환하며 이 객체는 렌더링 사이에서 값이 유지된다.DOM 접근: ref는 DOM 요소에 직접 접근할 때 주로 사용된다. ref를 통해 ..

• format_list_bulleted Frontend/React
• · 2024. 9. 29.
• textsms

[React] Hooks - useEffect

useEffect란 무엇인가?React의 useEffect Hook은 컴포넌트가 렌더링된 이후에 실행해야 하는 부수 효과(side effects)를 처리하는 데 매우 중요한 역할을 한다. useEffect는 주로 데이터 페칭, DOM 조작, 구독 및 타이머 설정 등과 같은 비동기 작업이나 기타 비정규적인 작업을 관리하기 위해 사용된다.클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 라이프사이클 메서드들을 함수형 컴포넌트에서 대체하기 위한 용도로 도입되었다.useEffect 사용방법useEffect는 렌더링 이후에 비동기적으로 실행되며 두 가지 개념을 포함한다.렌더링 후 실행: useEffect는 DOM이 화면에 완전히 렌더링된 ..

• format_list_bulleted Frontend/React
• · 2024. 9. 29.
• textsms