강원도지사
article thumbnail
useImperativeHandle | createPortal | forwardRef | Serveraction | middleWare에 대해 공부해봅시다
코딩/FrontEnd 2025. 3. 17. 09:27

useImperativeHandleuseImperativeHandle은 React에서 부모 컴포넌트가 자식 컴포넌트의 특정 메서드나 속성을 직접 제어할 수 있도록 도와주는 Hook이다. 보통 forwardRef와 함께 사용하며, ref를 통해 컴포넌트의 특정 기능만 노출하도록 할 수 있다. 일반적으로 React에서 부모 컴포넌트가 자식 컴포넌트의 내부 동작을 직접 제어하는 것은 권장되지 않는다. 하지만 특정 상황에서는 필요할 수 있다. 예를 들어, input 요소의 focus 메서드를 부모에서 호출하거나, 특정 컴포넌트의 메서드를 외부에서 실행할 필요가 있을 때 useImperativeHandle을 사용할 수 있다. 이 Hook은 forwardRef와 함께 사용되며, useImperativeHandle(..

리액트에서의 Context API와 Redux 비교
코딩/리액트 2024. 6. 23. 14:29

Context API:1. React에 이미 들어있는 기능이다. 따로 설치할 필요가 없다.2. 여러 컴포넌트에서 같은 데이터를 쓸 때 유용하다. 마치 큰 그릇에 데이터를 담아두고 필요한 컴포넌트가 꺼내 쓰는 것과 비슷하다.3. 간단한 전역 상태 관리에 좋다. 예를 들어, 로그인한 사용자 정보나 테마 설정 같은 것들을 관리하기에 적합하다.4. 사용하기 쉽지만, 데이터가 자주 바뀌는 경우엔 성능이 느려질 수 있다.Redux:1. 별도로 설치해야 하는 라이브러리다. React 밖에서도 쓸 수 있다.2. 복잡한 데이터를 다루는 데 더 적합하다. 여러 가지 데이터가 서로 연관되어 있고 자주 바뀌는 경우에 유용하다.3. 개발할 때 도움되는 도구들이 많다. 예를 들어, 데이터가 어떻게 변하는지 쉽게 볼 수 있는 도구..