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. 구..

실습을 하던 중 이제 props로 부모에서 자식으로 데이터를 전달 해줘야한다. 그래서 이 데이터 전달에 대한 코드만 적겠다.이는 todo인데, 이제 Header, Todo, Footer 이렇게 있는데, 전달은 Todo를 통해 자식에게 전달해준다.  이것은 Todo.jsx 쇼핑 목록 여기를 보면 TodoInput과 TodoList가 있다.그리고 TodoList안에 TodoItem에 있기에 둘다 전달해줘야 한다. 아래와 같이 전달 받으면 되는데, 여기서 문제가 있는게, 만약 함수를 전달한다. 그러면 함수에 return값이 없다면 undefined로 되어, 어떠한 작동도 하지 않을 것이다. 그래서 전달할 때는 저렇게 이벤트를 통해 전달하여 저 이벤트가 ..

import 불러오기import App from './App'; 여기에import from ‘./App’; 인데 이름의 경우는 임의로 지정할 수 있는데, 변수랑 겹치지 않는 이름으로 하는 것이 좋다.만약에 App안에 App이라는 변수가 선언이 되어있다면, 변수가 2개가 되기 때문에 충돌이 날 수도 있으므로, 겹치지 않는 이름으로 지정한다. 변수 importimport App, { message } from ‘./App’변수명은 변경할 수 없다. 파일에서 불러오기라서 변경이 불가능import App ← 이 부분은 변경이 가능 export 내보내기기본 내보내기는 기본 구문으로 변수 한개만 내보내기가 가능하다.export default App 만약 변수를 내보내기 한다면,첫 번째 방법const message..