버튼 만들 때, 아래와 같이 타입을 지정해줄수도 있고, 안할수도 있다.이는 코드 컨벤션 정해야한다. 명시적으로 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..

// 1) Import the React and ReactDOM librariesimport React from 'react';import ReactDOM from 'react-dom/client';// 2) Get a reference to the div with ID rootconst el = document.getElementById('root');// 3) Tell React to take control of that elementconst root = ReactDOM.createRoot(el);// 4) Create a componentfunction App() { return ;}// 5) Show the component on the screenroot.render(); 위 기본적인 틀이다..

리덕스는 리액트 생태계에서 가장 사용률이 높은 상태관리 라이브러리다. 리덕스를 사용하면 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다. Context API 를 사용해도 글로벌 상태 관리를 할 수 있고 상태 관리 로직을 분리 할 수 있다. 특히, Context API 와 useReducer Hook 을 사용해서 개발하는 흐름은 리덕스를 사용하는 것과 매우 개발 방식이 유사하다. 리덕스에서도 리듀서와 액션이라는 개념을 사용한다. Redux는 Context API 가 지금의 형태로 사용방식이 개선되기도 전에, 그리고 useReducer 라는 Hook 이 존재하기도 전 부터 만들어진 라이브러리다. 사실 C..