1. useMemouseMemo는 메모이제이션하여 불필요한 계산을 방지하는 React Hook이다. 즉, 특정 값이 변경되지 않으면 기존 계산 결과를 재사용하도록 하는 기능이라고 볼 수 있다.주요 목적은 무거운 계산이나, 렌더링 중 반복적으로 실행되는 연사을 최소화하여 성능을 향상시키는 것이다.import React, { useMemo } from 'react';const memoizedValue = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);import로 useMemo를 가져온다. useMemo(() => {계산식}, [의존성])첫 번째 인자: 함수 -> 계산할 코드를 함수로 작성두 번째 인자: 의존성 배열 -> 배열 안의 값이 변경될 때만 첫..

1. cleanup 함수란?useEffect에서 반환된 함수는 클린업 함수로, 다음과 같은 상황에서 호출된다.1. 컴포넌트가 언마운트 될 때컴포넌트가 DOM에서 제거되기 전에 정리 작업이 필요하다예: 타이머, 이벤트 리스너, 네트워크 요청 취소 등2. useEffect 가 재실행되기 직전의존성 배열 값이 변경될 때, 새 작업을 실행하기 전에 기존 작업을 정리한다.예제 코드 useEffect(() => { console.log(step, 'setup 함수 호출'); const timer = setInterval(() => { console.log(step, new Date()); }, 1000); return () => { console.log(step, 'clea..

1. Props-types 란?props-types는 React 컴포넌트에 전달되는 props의 데이터 타입과 유효성을 검사하는 라이브러리이다. 이 기능을 사용하면, 컴포넌트가 기대하는 props를 정확히 전달받고 있는지 확인할 수 있으며, 개발 중 오류를 예방하고 코드의 안정성을 높일 수 있다. 설치 방법npm install prop-types 왜 사용하는가?1. 디버깅 도구 제공 : 잘못된 props 전달 시 경고 메세지를 출력하여 개발자에게 문제를 알림2. 코드 가독성 향상 : 어떤 props가 필수인지, 데이터 구조는 어떤지 명확히 정의할 수 있다.3. 예측 가능성 증가 : 전달받은 데이터가 예상치 못한 값일 경우 방지한다. 2. 사용 예제2-1. 간단한 예제import PropTypes from..

1. 객체 불변성이란?객체의 상태를 직접 변경하지 않고, 새로운 객체를 생성하여 상태를 업데이트하는 원칙을 의미한다. React와 같은 라이브러리에서 상태 관리 시 불변성을 유지하는 것이 매우 중요하다. 한번 만들어진 state는 변경되지 않는다. 만약 값이 변경이 된다면 state가 새로운 값으로 생기는 것이므로, 원본이 변경 되면 안된다. 하지만 얕은 참조를 하게 되면 원본도 같이 변경된다. 한 번 생성된 state는 직접 변경되지 않아야 하며, 변경이 필요한 경우에는 새로운 객체를 생성하여 변경된 값을 담아야 한다.React에서는 상태를 직접 변경하면 상태 변경 감지가 제대로 이뤄지지 않기 때문에 불변성을 유지해야 한다.불변성 안되는 코드(상태 변경이 어렵다)const address = user.e..

버튼 만들 때, 아래와 같이 타입을 지정해줄수도 있고, 안할수도 있다.이는 코드 컨벤션 정해야한다. 명시적으로 type=’button’으로 할지 정해야 한다.  return ( - handleReset(event)}>0 + {count} );} return ( - handleReset(event)}> 0 + {count} );본질적으로 type='button'으로 꼭 해야 합니다.

1. async 함수await 키워드는 반드시 async 함수 내부에서 사용해야 한다. async 함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환한다. async 함수가 명시적으로 프로미스를 반환하지 않더라도 async 함수는 암묵적으로 반환값을 resolve하는 프로미스를 반환한다.// async 함수 선언문async function foo(n) {return n;}foo(1).then(v => console.log(v)); // 1// async 함수 표현식const bar = async function(n) {return n };bar(2).then(v => console.log(v)); // 2// async 화살표 함수const baz = async n => n;bar(3).t..