React에서 Zustand로 전역 상태 관리 1분 만에 편하게 하기 - 1

Zustand란? jotai를 만든 일본의 개발자 분이 만든 전역 상태 관리 라이브러리입니다. 기존 Redux처럼 코드가 지저분하고 복잡하지 않으며 Context Api처럼 불필요한 리랜더링을 일으키지 않도록 제어하기도 쉽습니다. 게다가 용량도 적으며 디버깅을 위한 devtools까지 지원됩니다. (Context API 단점 참고) Context Api를 활용한 상태 관리 1. Context Api란? React Context API는 React 애플리케이션에서 컴포넌트 간에 상태를 전달하기 위한 솔루션입니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 필요 없이, 컴포넌트 pomeranian91.tistory.com Zustand설치 터미널에서 npm 혹은 yarn, pnpm zust..

• format_list_bulleted REACT
• · 2023. 7. 30.
• textsms

Context Api를 활용한 상태 관리

1. Context Api란? React Context API는 React 애플리케이션에서 컴포넌트 간에 상태를 전달하기 위한 솔루션입니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 필요 없이, 컴포넌트 트리 내에서 원하는 곳에서 상태를 소비할 수 있게 되며 흔히 말하는 props 지옥을 해결할 수 있습니다. 2. Context Api 사용법 Context 생성하기 Context를 사용하기 위해선 Context객체를 생성해야 합니다. createContext 함수를 사용하여 Context 객체를 생성할 수 있습니다. 예를 들어, 다음과 같이 작성할 수 있습니다. import React from 'react'; const MyContext = React.createContext(); C..

• format_list_bulleted REACT
• · 2023. 7. 2.
• textsms

VSC에서 Styled-components 자동 완성 기능 사용하기

vsc Extensions에서 vscode-Styled-components검색 후 설치

• format_list_bulleted REACT
• · 2023. 6. 11.
• textsms

useEffect를 첫화면 이후에 실행시켜주는 hook

useEffect(()=>{},[]) 위의 경우 페이지 로드 시 한 번 실행시켜 주는 useEffect내용인데 아래와 같이 훅을 만들어 사용하면 처음은 실행되지 않고 이후 한번 실행되도록 설정이 가능합니다. export function useDidMountEffect(func, deps) { const didMount = useRef(false); useEffect(() => { if (didMount.current) func(); else didMount.current = true; }, deps); } 코드가 쉬워 훅으로 만들어 쓰면 편안하지만, 다만 쓸 일이 자주 없습니다.

• format_list_bulleted REACT
• · 2023. 6. 7.
• textsms