모든 HTML요소는 onmouseenter나 onmouseover처럼 'on'으로 시작하는 속성을 제공이를 이벤트 속성이라고 한다.이벤트 속성을 만들 파일 작성하기1. src 디렉터리 안에, copy 디렉터리를 만들고 CopyMe.tsx파일을 만들기  2. 복사용 기본 코드 작성export default function CopyMe(){ return CopyMe} 3.  src 디렉터리에 page 디렉터리 생성 후 파일을 복사, 각 이벤트를 넣기 4. src/App 파일에 해당 코드 작성하기 (방금 작성한 11개의 컴포넌트 사용)import DispatchEvent from './pages/DispatchEvent';import DragDrop from './pag..

Key 속성 설정하기 리액트는 리액트 컴포넌트 뿐 아니라 사용자 컴포넌트에도 Key속성을 제공 위 사진 처럼 코드릉 작성하면, key 속성이 없다고 경고가 뜸 따라서 p 태그에 key값을 중복되지 않게 설정해주어야 함 Key 속성 같은 이름의 컴포넌트가 여러개일 때, 이들을 구분하기 위해 사용 map 메서드 등을 사용할 때, Key값으로 인덱스를 구분하여 불러오거나.. 그런 식으로 사용 children 속성 설정하기 children 속성 같은 경우 값을 설정하지 않아도 되는 선택 속성 div 태그 등 자식 요소를 포함할 수 있는 컴포넌트에만 사용이 가능 컴포넌트 내부에서 children 속성 사용하기 해당 코드를 작성하고 App.tsx에서 P 컴포넌트를 사용한다. 기존 p 코드로 쌌던 부분을 P 태그로 ..

디렉터리를 하나 생성하고, 이전에 사용했던 data와 prettier를 복사해온다. 컴포넌트 객체지향 언어의 원조인 스몰토크에서 유래 화면 UI를 처리하는 클래스를 의미 MVC 설계지침에 따라 구현되어야 함 리액트 16.8버전 이후, 리액트 훅이라는 새로운 메커니즘을 통해 객체지향만의 클래스가 아닌 단순한 함수 형태로도 구현이 가능하게 되었음 -> 가능한 함수컴포넌트와, 리액트 훅을 사용하라고 권장 됨 리액트 컴포넌트와 사용자 컴포넌트 리액트 컴포넌트 리액트 프레임워크가 제공하는 리액트 제공 컴포넌트 div, h1 ... 사용자 컴포넌트 사용자가 직접 지정하는 컴포넌트 MyChild, MyComponent... 처음 글자는 무조건 대문자(카멜 케이스) 리액트 컴포넌트 컴포넌트를 React.createEl..

npx create-react-app (프로젝트 이름) --template typescript //타입스크립트 파일 생성 이후 기존에 만들었던 src/data, prettier를 복사한다 cp -r ../(폴더)/src/data ./src/data cp -r ../(폴더)/.*. React.createElement의 호출의 복잡성 문제 React.createElement란 가상 DOM객체를 만들어주는 함수 HTML 요소가 부모/자식 관계로 구성되면 코드가 복잡해지는 문제가 있음 이를 해결하기 위해 JSX 기능을 언어 확장 형태로 추가 React vs JSX React // const rootVirtualDOM = CE("ul", null, [ // CE("li", null, [ // CE("a", { h..