react 7 [React] 더 나은 상태(state) 관리하기 목표상태를 여러개 사용하다보면 상태 간 "꼬임"이 발생할 수도 있고 동기화를 놓쳐버려서 오류를 야기할 수도 있다.따라서 오류를 최소화하기 위해서 state를 단순화시키고 불필요한 state는 제거하는 것이 좋다. 데이터베이스 구조를 정규화해서 버그 발생 가능성을 줄이는 것과 유사하다. 방법들더 나은 상태를 관리하는 가장 좋은 방법은 state를 최대한 단순하게 만드는 것 이다. 연관된 state 그룹화 : 항상 한번에 업데이트해야하는 상태값들이 있다면 여러 개의 state로 분리하는 것 보다 하나의 object로 묶어서 하나의 state로 관리하자.state의 모순 피하기 : 서로 다른 상태 간에 논리적으로 불가능한 값을 가질 수 있는 환경을 제거하자.불필요한 state 제거하기 : 렌더링 중에 컴포넌트.. 2024. 11. 8. [React] Controlled, Uncontrolled Component Controlled, Uncontrolled ComponentControlled와 uncontrolled는 엄밀히는 기술 용어가 아니다. (사실상 디자인 패턴에 가깝다) 개념상 아래처럼 2개로 나누지만, 무조건 둘 중 하나로 구분되는 것이 아니라 하나의 컴포넌트에 두개의 개념이 혼재될 수 있다. controlled component : 중요한 정보가 local state가 아닌 props에 의해 만들어지는 컴포넌트uncontrolled component : local state를 이용하여 내부적인 정보를 관리하는 컴포넌트 예시예를 들어, TextField라는 컴포넌트가 있을 때 이 컴포넌트를 이루는 중요한 정보는input 태그에 보여줄 정보인 value와사용자가 input 이라는 행위를 이루었을 때 .. 2024. 10. 7. [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. 이전 1 2 다음
