728x90 반응형 React Hooks3 [React] 리액트 훅 - useRef(리렌더링 방지 DOM요소 접근) 📌 useRef 훅이전 값과 새로운 값을 연결하고, 렌더링과는 무관하게 값이 유지되어야 할 때 사용됩니다. 주로 DOM 요소나 외부 라이브러리의 인스턴스와 같이 렌더링과는 직접적으로 관련이 없는 값들을 저장할 때 사용됩니다.useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것이다.👉 성능향상 변화는 감지하지만 렌더링 발생 ❌ 👉 DOM요소에 손쉽게 접근 (ref속성 사용)👉 전생애주기를 통해 값 유지언마운트 되기전까지는 값을 계속 기억함// ▶ 객체 생성// → {current: 초기값} 을 지닌 객체가 반환됨 const 변수명 = useRef(초기값)// ▶ DOM .. 2024. 8. 30. [React] 리액트 훅 - useContext(전역 상태값 공유) 📌 useContext 훅React 컴포넌트는 부모에서 자식으로 props를 통해 데이터를 전달해야한다.이때, 컴포넌트의 수가 많아지고 트리 구조가 복잡해지면 단계별로 데이터를 전달해야하는 리액트에서 코드는 굉장히 복잡해지기 마련이다.중간에 코드가 바뀌게 된다면 일일히 다 찾아 바꿔야하기도 하고, 해당 데이터가 필요하지 않은 컴포넌트에도 데이터가 전달되어 코드가 지저분해지기도 한다. 이런 문제를 해결하기 위해 우리는 useContext 를 사용한다. 전역적으로 사용되는 데이터들을 공유해 최상단 컴포넌트에서 최하단 컴포넌트까지 데이터 전달을 손쉽게 할 수 있다. ex) 유저 정보, 테마, 언어, ... useContext() 훅은 리액트에서 상태를 전역적(globally)으로 사용할 수 있도록 해.. 2024. 8. 29. [React] 리액트 훅 - useReducer(관리 코드 컴포넌트 외부 분리) 📌 useReducer 훅React에서 제공하는 훅 중 useReducer라는 상태 관리 훅이 있다.useState와 마찬가지로 상태를 관리하지만,컴포넌트로부터 로직을 분리하기 때문에 관리해야하는 상태나 로직이 복잡한 상황에서useState보다 컴포넌트를 좀 더 깔끔히 관리할 수 있다는 장점이 있다. 한 컴포넌트 내에서 State를 업데이트하는 로직 부분을그 컴포넌트로부터 분리시키는 것을 가능하게 해준다는 것이다. 그렇게 useReducer는 State 업데이트 로직을 분리하여 컴포넌트의 외부에 작성하는 것을 가능하게 함으로써, 코드의 최적화를 이루게 해준다.State 업데이트 로직을 또다른 파일에 작성해서(분리), 분리된 파일을 불러와서 사용하는 것도 가능🔎 useReducer를 사용한 경우컴포넌트.. 2024. 8. 28. 이전 1 다음 728x90 반응형
