리랙트

Hello React 글자를 출력합니다버튼의 이름은 Hello 입니다.button 을 클릭하면 sayHello 함수를 호출합니다 콘솔창에 Hello 가 출력됩니다Tweet.js 내용을 import 합니다. Tweet 을 import 하는데, name을 줬습니다App.

useEffect 블록안에 콘솔과, 대괄호가 있음이 보입니다.해당 대괄호가 있으면서 웹 브라우저 재랜더링이 발생할때, useEffect 는 더이상 발생하지 않습니다.대괄호가 없었다면 h1을 클릭할때 마다 콘솔창에는 Effect has been run 이 직혔을 겁니

크게 4가지 파트로 나뉠 수 있습니다1\. import 2\. 변수 선언3\. 함수 선언4 JSX 문법./App.css import 합니다, 내장함수 useEffect, useState 를 호출합니다, ./Recipe 를 호출합니다api id 랑 key 는 유효하지 않

해당 로직들은 자바스크립트와 리액트의 차이점을 두고 리액트의 장점을 설명한다해당 number 는 1초 간격으로 바뀌는데, 개발자 도구를 살펴보면 div id root 와 button 이 같이 바뀌는걸 확인 가능하다 아랫로직은 리액트이다해당 버튼은 1초당 button

element -> 태그component 는 element 의 집합childrend 은 태그가 감싸고 있는 문자열,숫자핵심custom 함수를 만들어서 반복적인 동작을 하는 useEffect를 하나로 묶어 코드량을 줄이다

useState -> setState 시 prev이 주입된다 useState 로 만들어진 함수는 이전 값이 인자값으로 들어 옵니다

콘솔에 props 는 Button 그린, 블루, 다크,크린 퍼플 전부 undefiend 나오다제일 마지막 props 만 button purple 로 나오다 ->중괄호 없애고 props로 해야함element 함수 호출하면 Button 컴포넌트 호출한다. children은

새로고침시 useEffect 가 최초 실행 -> autoFocus 실행App 컴포넌트 import 시 return 시작 input 태그에 ref 에서 prop를 받아옴inputRef 는 App 이 호출되면 React.useRef 에서 값 을 넘겨받음 div 마찬가지us

console.dir 로 보며 form 태그의 구조가 보인다 -> 왜 0 , 1을 적었는지 알 수 있다하지만 해당 로직은 폼 태그에서 fname lname 의 순서가 바뀌면 0 1 이 아닌 다른 숫자를 입력 해야 하는 경우가 생길 수 있다. event.target.el

input 태그에 적은 id 에 label 이 따라오다, input박스에 상태가 변할때마다 handleChange 가 호출되다. setPhoneNumber 는 들어올때 마다 phoneNumber 를 바꾸다. 만약 0으로 시작하면 setMessage 가 message 의

App 컴포넌트를 실행하는데, Child 컴포넌트에서 throw new Error 를 했다, 이럼 App에 있는 모든게 동작하지 않는다, 동작을 하되, 에러가 낫음을 보여주자ErrorBoundary 클라스를 만들어서 state 객체를 만들었따, error : null

함수 호출시 a() , 처럼 괄호를 적어왔다,setInterval(tick) 에선 괄호를 적으면 작동하지 않는다, mdn 에서 setInterval(인자) 를 보면 인자로 func 이름을 담고 있어 tick 이라고 적던, () =>tick() 으로 함수를 적고 리턴값으

클라스 내에서 메소드 호출은 마치 갓 태어난 새끼 마냥 부모가 누군지 몰라서 this (얘가) 니 부모다 라고 말해줘야 한다.(데이터 바인딩) this.handleClik = this.handleClick.bind(this)근데 귀찮으니 화살표 함수로 handleCLi