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

라이브러리 추가할 때  이렇게 여러 라이브러리를 추가할 때가 있다. 근데 여기 자세히 보면 umd, standalone이런 단어가 있다. 이게 무엇이냐? 아래와 같다.umd 여러환경에서 작동하도록standalone : 브라우저에서만 사용babelbabel이란? JS 코드를 구형 브라우저나 실행 환경에서도 동작하도록 변환(트랜스파일)해주는 도구이다.여기서 만약에  -> 변환 O -> 변환 X function App() { return Hello JSX; // return React.createElement('h1', null, 'Hello React'); } 구조분해할당, Props부모 컴포넌트에서 자식 컴포넌트에 데이터를 전달할 때 두 가지 방법이 있다. 1. 구..