Ella 프론트엔드일지

0. 리코일 왜 사용하는건데? -- 이 파트는 추후 정리해 보겠음 1. 리코일 사용법 1) RecoilRoot - 최상위 컴포넌트를 RecoilRoot 로 감싸주면 된다. - RecoilRoot가 감싼 하위 컴포넌트들은 이 컨텍스트를 통해 Recoil 상태와 관련된 동작을 할 수 있다. - Recoil 상ㅅ태가 변경될 때 하위 컴포넌트들에게 리렌더링을 트리거 한다. Recoil 상태가 변경되면 해당 상태에 의존하는 컴포넌트들은 자동으로 업데이트되어 새로운 상태를 반영한다. // App.tsx import React from "react"; import { RecoilRoot } from "recoil"; import Counter from "./Counter"; function App() { return..

0. useRef 특정 DOM 조작 측면 useRef 는 특정 DOM 을 직접 선택해서 컨트롤 할 수 있게 해주는 Hook이다. 예를 들면, 엘리먼트의 크기를 가져오거나 스타일 변경, 포커스 등의 작업을 해야할 때 useRef를 사용하면 된다. 🔸스타일 변경하는 예제코드 import React, { useRef } from 'react'; function App() { const divRef = useRef(null); const changeColor = () => { divRef.current.style.color = 'red'; }; const changeFontSize = () => { divRef.current.style.fontSize = '24px'; }; return ( Hello, worl..

매번 복습하는데 까먹어서 정리하려고 한다! react-hook-form 라이브러리에 익숙해져서 useState 로 input 여러개를 기본적으로 관리하는 걸 까먹는것 같다 ㅠㅠ 0. input 여러 개일 때 상태관리하기 아래의 예제는 벨로퍼트에서 가져왔다. import React, { useState } from "react"; function InputSample() { const [inp, setInp] = useState({ realName: "", nickName: "", }); const { realName, nickName } = inp; //onChange 하나의 이벤트 핸들러로 2개의 input 값 제어 const onChange = (e) => { const { value, name } ..

✅렌더링 과정 지긋지긋한 아래의 counter 코드 그런데, 도대체 어떻게 이코드가 렌더링 되는지는 알지 못했다. 아래 코드와 함께 차근차근 렌더링 과정에 대해 알아보자. import { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( {count} setCount(count+1)}> click me ); } 🔸요약 🔸 1) 상태 변경 전 초기 렌더링 2) 상태 변경 및 새로운 Virtual DOM 생성 3) Diffing 4) Reconcilation 5) commit 1. 상태 변경 전 초기 렌더링 리액트 컴포넌트가 처음으로 렌더링될 때, Example 컴포넌트는 JSX를 반환한다...

0. useCallback - 렌더링 성능을 최적화 해야하는 상황에서 사용하는 Hook으로, 만들어놨던 함수를 재사용할 수 있어서 메모리 사용량을 줄일 수 있다. - 리액트 컴포넌트가 자주 렌더링 되거나, 함수가 큰 자원을 사용할 때 중요하다. 🔸useCallback 사용 방법 const memoizedCallback = useCallback(콜백함수, 의존성 배열); useCallback은 첫 번째 인자로 넘어온 콜백 함수를, 두 번째 인자로 넘어온 의존성배열 형태의 함수 실행 조건의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해준다. const add = () => x + y; // useCallback을 사용하면 아래와 같이 표현하기 const add = useCallback(() => x +..

0. 개요 🔸리덕스 툴킷을 사용하면 전역 상태관리를 쉽게 관리할 수 있다. 즉, 여러 컴포넌트에서 공유되는 걸 전역 상태로 관리하면 좋다. 🔸어떤 데이터를 전역상태로 관리하면 좋을까? 구체적인 예시는? - 서버로 부터 가져온 데이터 : 서버로부터 가져온 데이터를 전역 상태에 저장해서 여러 컴포넌트에서 공유하는 것이 좋다. 전역에서 자주 사용되는 api를 호출하거나, api 호출한 결과를 여러군데에서 사용해야할 상황이 생기기 때문 ✅ 왜 서버로부터 가져온 데이터를 전역에서 관리하는게 좋을까? 1) 데이터 공유: 전역 상태를 사용하면 여러 컴포넌트에서 동일한 데이터에 접근할 수 있다. 이는 데이터를 중복으로 가져오지 않고, 여러 컴포넌트 간에 일관된 데이터를 사용할 수 있도록 한다. 예를 들어, 여러 개의 ..