사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예를 들 면 버튼에 마우스 커서를 올렸을 때는 onmouseover 이벤트를 실행하고, 클릭했을 때는 onclick 이벤트를 실행한다. Form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다. 1. 이벤트를 사용할 때 주의 사항 1. 이벤트 이르은 카멜 표기법으로 작성한다. 예를 들면 HTML의 onclick은 리액트에서 onClick으로 작성해햐 한다. 또 onkeyup은 onKeyUp으로 작성한다. 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. HTML에서 이벤트를 설정할 때는 큰 따옴표 안에 실행할 코드를 넣지만, 리액트에서는 함수 형태의 객체를 전달한다..

1. 클래스 / 함수형 컴포넌트 컴포넌트를 선언하는 방식은 두가지이다. 1. 함수 컴포넌트 2. 클래스형 컴포넌트 이렇게 두가지가 있다. 하지만 최근 클래스형 컴포넌트보단 함수 컴포넌트를 주로 사용한다. 다양한 이유가 있겠지만, 주요 이유는 1. 간단한 작성으로 가독성이 좋다. 2. 성능적인 부분에서 함수가 좀 더 효율적으로 사용할 수 있다. 3. 테스트 용이성 2. 컴포넌트 생성 생성 순서는 1. 파일 만들기 -> 2. 코드 작성하기 -> 3. 모듈 내보내기 및 불러오기 컴포넌트를 만들고자 할 때는 컴포넌트 코드를 선언해야 한다. const My Component = () => { return 함수형 컴포넌트 ; }; export default MyComponent; 3. 화살표 함수의 사용 funct..

1. 코드 이해하기 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // ..

1. MVC, MVW, MVVM / 리액트의 개발 Angular, backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js 에는 많은 프레임워크가 존재하는데, MVC(model-View-Controller)아키텍처, MVVM(Model-View-View-Model)아키텍처를 사용한다. AngularJS의 경우 MVW(Model-View-Whatever) 아키텍처로 애플리케이션을 구조화함. MVC, MVVM, MVW 등과 같은 여러 구조가 지닌 공통점은 모델(Model)과 뷰(View)가 있다는 점이다. 모델 : 애플리케이션에[서 사용하는 데이터를 관리하는 영역 View : 사용자에게 보이는 부분이다. 프로그램이 사용자..