useImmer? useImmer는 상태 관리 라이브러리인 React의 Hooks를 사용하여 불변성을 유지하면서 상태를 쉽게 업데이트할 수 있도록 도와주는 라이브러리입니다. 이를 사용하면 상태를 직접 수정하는 대신 불변성을 유지하는 방식으로 상태를 업데이트할 수 있습니다. useImmer 설치하기 먼저, useImmer를 설치해야 합니다. NPM을 사용하는 경우 다음과 같이 설치할 수 있습니다: npm install immer 예시 코드 import React from 'react'; import { useImmer } from 'immer'; const TextList = () => { // useImmer로 상태 생성 const [textList, setTextList] = useImmer([]); ..
Key의 역할과 중요성 React에서는 컴포넌트 리스트를 렌더링할 때 각 요소에 고유한 key를 지정해야 합니다. key는 React가 각 컴포넌트를 구별하고 추적하는 데 사용되며, 업데이트 시 효율적으로 DOM을 업데이트하는 데에 중요한 역할을 합니다. key가 없거나 중복된 key를 사용하면 React가 잘못된 컴포넌트를 업데이트하거나 불필요한 렌더링을 발생시킬 수 있습니다. 배열의 index를 key로 사용하는 문제점 예를 들어 다음과 같은 과일 배열이 있습니다. const fruits = ['apple', 'banana', 'orange']; 이 배열을 컴포넌트로 렌더링하고 index를 key로 사용하면 const fruitList = fruits.map((fruit, index) => ); 다음..
useCallback은 함수를 메모이제이션해서 콜백함수를 반환해 의존성 배열에 있는 요소가 변경되었을 때 실행된다. 예를 들어 다음과 같은 코드가 있다고 가정해보자. (Demo 컴포넌트는 신경쓰지 않아도 된다) function App() { const [showParagraph, setShowParagraph] = useState(false); const [allowToggle, setAllowToggle] = useState(false); const toggleParagraphHandler = useCallback(() => { if (allowToggle) { setShowParagraph((prev) => !prev); } }, [allowToggle]); const allowToggleHandle..
useEffect useEffect는 컴포넌트의 라이프사이클에 특정 동작을 연결할 때 사용된다. 컴포넌트가 렌더링된 이후에 비동기 작업을 수행하거나, 외부 API 호출, 이벤트 구독 등의 작업을 수행할 수 있도록 해준다. useEffect(callback, [deps]); useEffect의 첫 번째 매개변수로 전달되는 콜백 함수는 컴포넌트가 렌더링될 때마다 실행되거나, 특정 의존성이 변경될 때만 실행될 수 있다. 또한, useEffect의 콜백 함수는 반환 값으로 클린업(clean-up) 함수를 반환할 수 있다. 클린업 함수는 컴포넌트가 소멸될 때 실행되거나, 다음 useEffect 실행 전에 호출된다. useCallback useCallback은 콜백 함수의 메모이제이션된 버전을 반환한다. useMe..
JSX를 작성할 때 루트 JSX 요소가 1개만 있어야 하고 나란히 있으면 안된다. ... return ( Hi! This does not work! ); 해결 방법 1. div 로 감싸기 ... return ( Hi! This does not work! ); 전체를 div 로 감싸서 루트 JSX 요소가 1개만 있게 만든다. 2. 배열로 감싸기 아래 코드와 같이 배열 요소로 JSX를 묶어서 반환하는 방법이 있습니다. ... return [ Hi! , This does not work! ]; 이때 전체를 감싸고 있는 중괄호{} 가 있다면 제거 해야합니다. 예를 들어 이런 코드가 있다면 ... return ( {error && ( )} ) ... return [ error && ( ) ] 위 처럼 변경 해줘야..
