1. useState단순한 상태 관리에 적합하다.상태를 업데이트하기 위해 새로운 상태값을 직접 설정상태의 형태가 단순(숫자, 문자열, boolean 등)하거나 관리 로직이 복잡하지 않은 경우 사용const [state, setState] = useState(initialValue); 장점간단한 상태를 관리할 수 있다.함수형 업데이트(setState(prev) => newValue)로 이전 상태를 기반으로 업데이트 가능import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>..

1. strictModeReact의 StrictMode는 애플리케이션에서 잠재적인 문제를 발견하기 위한 도구이다. 개발 모드에서만 활성화가 된다. 코드 작성을 하다보고 콘솔을 해보면 두번 실행이 되는 경우가 많다. 이제 이렇게 발생되는 조건을 알아보자.안전하지 않은 생명주기 메서드 예: componentWillMount, componentWillReceiveProps와 같은 메서드이다. 근데 이는 React 16이후로 사용이 권장되지 않는다. 그 이유는 클라스 컴포넌트가 아니라 함수형 컴포넌트를 많이 사용하기 때문이다.Deprecated API 감지오래된 API 사용을 경고한다.부작용 검사React 18부터 StrictMode는 개발모드에서 부작용을 감지하기 위해 헨더링을 두 번 실행한다.예를 들어, 함..

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'으로 꼭 해야 합니다.