Coding 24 [React] useImperativeHandle (forwardRef의 ref 커스터마이징) useImperativeHandle forwardRef를 사용할 때 ref로 넘어가는 메소드나 값들을 커스텀하고 싶은 경우가 있다. 이런 경우 useImperativeHandle을 사용하면 부모 A가 forwardRef 자식 B에 접근해서 여러 메소드나 값을 사용할 수 있게 할 수 있다. 파라미터 useImperativeHandle(ref, createHandle, dependencies?) ref 필수 forwardRef의 두번째 인자로 넘어오는 ref이다. createHandle 필수 부모에서 ref.current 로 접근할 수 있는 핸들러를 리턴하는 함수이다. 어떤 타입이든 넘길 수 있으나 주로 대게 메소드들을 담은 object를 넘긴다. dependencies optional 다른 상태 함수들에서.. 2024. 1. 4. [React] Store 유지한 채 페이지 새로고침하기 (Remounting) Remount 구현하게 된 배경 React를 사용할 때 전역 상태의 값은 냅두고 페이지를 새로고침하고 싶을 때가 있다. 예를 들어, 신청페이지에서 신청 내역을 작성 후 신청을 했을 때 사용했던 모든 local state를 초기화하고 싶은 경우이다. 이는 단순히 rerender를 통해 상태나 값을 새로 그리는것과는 다르다. 기존의 컴포넌트를 unmount 시킨 후 새로운 것을 mount 시키는 remounting을 원하는 것에 가깝다. 🙅♂️ window 이용? window.location.reload()를 통해 새로고침을 하면 상태를 비워버릴 수는 있지만 이 또한 아래와 같은 문제가 있다. 모든 state가 초기화되는 점 (local state를 포함한 global state(zustand 등)까지) .. 2023. 12. 24. [React] useReducer useReducer React에서 제공하는 훅 중 useReducer라는 상태 관리 훅이 있다. useState와 마찬가지로 상태를 관리하지만, 컴포넌트로부터 로직을 분리하기 때문에 관리해야하는 상태나 로직이 복잡한 상황에서 useState보다 컴포넌트를 좀 더 깔끔히 관리할 수 있다는 장점이 있다. import { useReducer } from 'react'; function reducer(state, action) { // ... } function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... } Parameter, Return const [state, dispatch] = useReducer(r.. 2023. 12. 24. [JavaScript] 비동기(Asynchronous) 원리 JS의 비동기 원리 Single Thread, But Asynchronous JS는 single thread 이지만, asynchronous한 언어이다. 싱글 스레드로 동작하지만 Web API와 Event Loop를 통해 멀티 스레드"처럼" 동작할 수 있다. JS + Browser 구조 JS는 다른 언어와 유사하게 code area, call stack, memory heap을 이용하여 동작한다. Code area에는 실행한 JS 코드가 저장된다. Call stack을 통해 context가 관리되고 primitive type의 data가 저장된다. Memory heap을 통해서는 reference type(배열, 객체, 함수 등)의 데이터가 저장된다. Heap 영역에 객체의 데이터를 저장하고 call s.. 2023. 5. 31. Singleton Pattern Signleton Pattern (싱글톤 패턴) 생성자가 여러 번 호출되더라도 실제 생성되는 객체는 하나가 되는 방식이다. 최초에 한번 생성된 이후 다시 생성자를 호출하더라도 기존에 생성되어있던 객체를 반환한다. 주로 DB에 접근하는 DAO와 같은 클래스나 Sevlet, Biz 등에 대해 singleton pattern을 적용한다. 특징 클래스에서 만들 수 있는 인스턴스의 수를 하나로 제한한다. 때문에 프로그램 실행 중에 객체가 최대 한 개만 있을 수 있다. 해당 객체에 전역적으로 접근이 가능해지고 다른 클래스 간에 데이터 공유가 용이하다. 동일 클래스에 대해 여러개의 인스턴스를 생성하지 않기 때문에 메모리 낭비를 방지할 수 있다. 방법 아래 코드에서 기존에 생성된 instance가 없을 경우에만 생성하.. 2023. 4. 4. 이전 1 2 3 4 5 다음
