2024/08/22 2

[ React ] React Hooks - useRef

useRef란? 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook로컴포넌트의 최상위 레벨에서 useRef를 호출하여 ref를 선언한다. const ref = useRef(initialValue)initialValue- ref객체의 current  프러퍼티 초기 설정값으로 어떤 유형의 값이든 지정할 수 있다.- 단 초기 렌더링 이후부터는 무시된다. 반환값- 단일 프로퍼티를 가진 객체를 반환한다.- current    처음에는 전달한 initialValue로 설정된다.    값을 변경할 수 있다.    하지만 state와 다르게 리렌더링을 유발하지않는다.    ref객체를 jsx노드의 ref 어트리뷰트로 react에 전달하면 react는 current 프로퍼티를 설정한다.- 다음 렌더링에서 u..

React 2024.08.22

[ CSS ] Zustand js와 ts로 사용해보기

Zustand란?상태 관리 라이브러리 중 하나로, 작은 패키지 크기와 직관적인 사용법이라는 장점을 가지고 있다.특히 ContextAPI를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.state가 변경될 때마다 React컴포넌트를 업데이트한다.   JavaScript에서 사용하기1. Zustand 설치# NPMnpm install zustand# Yarnyarn add zustand  2. store 생성하기스토어를 생성하기 위해 create 함수를 사용한다.스토어는 상태 변수와 해당 상태를 업데이트하는 액션(함수)으로 구성되어있다.    ex_버튼을 선택하는 함수와 count를 증가시키는 함수, count를 리셋하는 함수 작성import create from "zus..

CSS 2024.08.22