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

변수 함수를 굳이 밖에 안빼도 된다. state를 자식에 만들면 부모 → 자식 전송할 필요가 없다. 근데 state가 Modal, App에서 필요하면 가장 최상위 컴포넌트에 보관하는 게 좋음 App에 보관 태그 에 뭔가 입력시 코드 실행하고 싶으면 onChange / onInput onMouserOver → 마우스를 올릴 때 이 코드 실행 onScroll → 스크롤 조작할 때 실행 input 태그에 입력한 값 가져오는 법 {console.log(e.target)}}> e를 넣어주면 이벤트객체라고 불리는거다. input 태그에서 발생하는 이벤트과 관련된 기능(변수)라고 보면 된다. e.target 이 이벤트가 발생하는 곳 e.target.value 이벤트가 입력한 값 input에 입력한 값 저장하려면 아래..

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 : 사용자에게 보이는 부분이다. 프로그램이 사용자..

5강 버튼에 기능개발을 해보자 & 리액트 state 변경하는 법 1개의 state안에 여러가지 자료를 넣고싶다면 array형식으로 만들어서 사용 아래와 같이 만들어서 사용함 let post = '강남 우동 맛집' let [글제목, b] = useState(['남자 코트 추천', '강남 우동맛집', '파이썬 독학']); 이 자료를 뽑고 싶을 때는 아래와 같이 인덱스 입력하여 사용 return ( ReactBlog { 글제목[0] } 2월 17일 발행 { 글제목[1] } 2월 17일 발행 { 글제목[2] } 2월 17일 발행 터미널을 실행해보면 빨간색 error랑 warning 이렇게 두가지가 나오는데 빨간색의 경우는 중요한 거라서 해결해야함 노란색의 경우는 무시해도 됨. 노란색이 좀 지우고싶다. /* es..