응답은 선언적 접근따르다,
이는 원하는 대상 상태(UI)를 정의하고
이는 React가 해당 상태에 도달하기 위해 처리한다는 것을 의미합니다.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement
HTMLButtonElement – 웹 API | MDN
HTMLButtonElement 인터페이스는 조작을 제공합니다.
developer.mozilla.org
가공
위 이미지의 요소를 클릭하면,
https://developer.mozilla.org/en-US/docs/Web/API/Element
요소 – 웹 API | MDN
Element는 Document의 모든 Element 객체(즉, Element를 나타내는 객체)가 상속하는 가장 일반적인 기본 클래스입니다.
다양한 요소에 공통된 메서드와 속성만 있습니다.
보다 구체적인 클래스는 Element에서 상속됩니다.
developer.mozilla.org
많은 이벤트가 있음을 알 수 있습니다.
이러한 기본 이벤트는 React의 props와 동일하며 포함된 html 요소에 추가하여 들을 수 있습니다.
React에서 모든 기본 이벤트는 on으로 시작하는 소품으로 표시됩니다.
예) onClick, onBlur, …
Event handler prop은 함수를 값으로 요구하며, 이 값으로 전달된 함수는 해당 이벤트가 발생했을 때 실행되어야 합니다.
일반적으로 JSX 코드에 너무 많은 논리를 넣는 것은 좋지 않습니다.
JSX를 반환하기 전에 이 이벤트 리스너 함수를 정의하십시오.
execute()가 이벤트 리스너 함수 뒤에 위치하지 않는 이유는
상위 50위 레이스 6:42
이 이벤트 리스너는 이벤트가 발생할 때 React에 의해 호출됩니다.
권장 이벤트 리스너 함수의 이름은
앞에 이벤트를 작성하고 Handler를 사용하여 이벤트를 종료합니다.
useState는 React 라이브러리에서 제공하는 함수로,
컴포넌트 함수가 다시 호출되는 곳
변화하는 값을 반영하기 위해 값을 상태로 정의할 수 있는 기능입니다.
useState 함수는 React 후크 중 하나이며 React 컴포넌트 함수 내에서 호출해야 합니다.
또한 내부 중첩 함수에서 호출할 수 없으며 구성 요소 함수에서 직접 호출해야 합니다.
useState는 기본 상태 값 대신 특수 유형의 변수를 생성한다고 말할 수 있습니다.
이 변수는 구성 요소 함수가 변경을 위해 다시 호출되도록 합니다.
useState 함수에 인자로 전달되는 것은 구체적으로 생성할 변수의 초기값으로 설정됩니다.
이 함수가 반환하는 값은 특수 변수에 대한 액세스를 제공할 뿐만 아니라
또한 해당 변수에 새 값을 할당하기 위해 호출할 수 있는 함수를 반환합니다!
useState는 실제로 첫 번째 요소가 변수 자체이고 두 번째 요소가 업데이트되는 함수인 배열을 반환합니다.
(2개 요소의 배열 반환)
위 그림의 빨간색 상자는 useState()의 반환 값을 배열 구조로 분해하고 각 상수에 두 개의 독립적인 요소를 저장합니다.
새 값을 할당하기 위해 setState 함수를 사용하는 이유!
!
!
!
!
!
!
!
!
52강전 8:04
9시 17분
React는 상태가 변경될 때 상태를 등록하는 구성 요소를 재평가합니다.
53라운드는 매우 중요합니다!
!
!
스크립트를 다시 자세히 확인하십시오.
상태는 구성 요소의 각 인스턴스에 대해 독립적으로 분할됩니다!
useState를 사용하여 새 값을 할당합니다.
const를 사용할 수 있는 이유는 다음과 같습니다.
등호를 사용하여 새 값을 할당하는 대신
대신 setState 함수를 호출하여 상태를 업데이트합니다.
상태 값은 어딘가에서 React에 의해 관리되기 때문입니다.
React는 useState에서 반환된 배열의 최신 상태를 제공합니다.
상태는 사용자 이벤트가 발생할 때뿐만 아니라 setTimeoout()을 사용하여 상태 업데이트 타이머가 만료되는 것과 같은 어떤 이유로든 업데이트될 수 있습니다!
!
JSX 구문은 React 라이브러리를 사용하는데 명시적으로 가져오지 않아도 React 라이브러리는 이미 환경에서 가져오도록 구성되어 있으므로 작성하든 안 하든 잘 작동합니다.
모든 키 입력 또는 입력 값 변경에 대해 수신기를 추가해야 합니다.
onInputChange 이벤트에 비해 onChange 이벤트의 장점은 드롭다운 메뉴와 같이 입력 외에 모든 입력 유형의 이벤트를 감지할 수 있다는 것입니다.
event.target.value는 이벤트가 발생했을 때의 현재 입력 값을 가집니다.
다만, 위의 두 가지 방법보다 어떤 코드가 더 추천할만한지, 그 이유는,
59이닝 1시 29분
위의 빨간박스와 같은 방법으로
React는 이 함수의 상태 스냅샷이 최신 상태인지 확인하고 항상 예약된 상태 업데이트를 염두에 둘 수 있습니다.
따라서 이것은 항상 최신 스냅샷을 사용하고 있는지 확인하는 더 안전한 방법입니다.
상태 업데이트가 이전 상태에 의존하는 경우 이 함수의 형태로 작성하는 것이 좋습니다!
60과에 대한 설명을 다시 확인하십시오!
상태를 사용하여 양방향 바인딩을 수행할 수 있습니다.
변경되는 입력 값을 수신하지 않습니다.
새 값을 다시 입력으로 전달할 수도 있습니다!
> 프로그램에 따라 입력 값을 재설정하거나 입력할 수 있습니다.
양방향 바인딩이란 무엇입니까?
위의 노란색 상자에서와 같이 value라는 기본 속성의 이름을 값으로 enterTitle로 지정하면,
즉, enterTitle이라는 속성 이름으로 입력 값을 받을 수 있지만 해당 이름을 다시 사용하여 입력 값을 설정할 수도 있습니다.
이는 양식이 제출될 때 사용자 입력을 수집하거나 변경할 수 있으므로 양식 작업 시 매우 유용합니다.
자식에서 부모로 데이터를 전달하는 방법
부모에서 자식으로 전달되는 함수가 있을 때,
자식이 함수를 호출하면 데이터를 인수로 전달할 수 있습니다!
부모로 가는 도중 중간에 중첩된 구성 요소가 있으면 생략할 수 없으며 순회해야 합니다!
커스텀 컴포넌트에서 커스텀 소품을 onSaveExpenseData로 명명한 이유는,
이 prop의 값은 함수가 되는데, 이 함수가 컴포넌트 내부에서 어떤 일이 발생했을 때 활성화되는 함수라는 것을 직관적으로 알기 위해 컨벤션을 추가합니다.
> 이 기능은 입력한 ExpenseData가 폼에 제출되었을 때 동작합니다.
saveExpenseDataHandler 함수는 NewExpense 구성 요소에서 실행되지 않고 ExpenseForm으로 전달됩니다.
saveExpenseDataHandler 함수는 이 값의 키 역할을 하는 onSaveExpenseData를 통해 정의된 NewExpense 구성 요소가 아니라 데이터(함수)가 소품으로 전달되는 ExpenseForm 구성 요소에서 실행할 수 있습니다().
그 이유는 saveExpenseDataHandler 이벤트 핸들러에 대한 포인터가 onSaveExpenseData를 통해 전달되기 때문입니다.
이것이 구성 요소가 서로 통신하거나 하위 구성 요소에서 상위 구성 요소로 통신하는 방법입니다!
ExpenseForm 하위 구성 요소의 데이터(expenseData)를 NewExpense 상위 구성 요소에서 다운로드한 onSaveExpenseData 함수의 매개 변수로 사용하면 하위 구성 요소에서 상위 구성 요소로 데이터를 보낼 수 있습니다!
<提升状态>
폼에 새로운 데이터를 입력한 후 콘솔을 보면 NewExpense 상위 컴포넌트에서 ExpenseForm 하위 컴포넌트를 통해 입력한 데이터가 성공적으로 전송되어 출력되는 것을 확인할 수 있습니다.
이러한 방식으로 NewExpense 구성 요소에서 상위 구성 요소인 App 구성 요소로 데이터를 전달할 수 있습니다.
onAddExpense 특성은 평소와 같이 매개 변수를 전달하는 포인터 함수임을 나타내기 위해 on으로 작성됩니다.
NewExpense 컴포넌트에 설정된 onAddExpense 속성에 addExpenseHandler 포인터를 할당하고, 이 속성을 통해 NewExpense 컴포넌트에 대한 포인터를 전달함으로써 NewExpense 컴포넌트의 포인터 함수 onAddExpense 값을 App에 파라미터로 전달할 수 있습니다.
!
콘솔에 ‘In App.js’가 출력되는 것을 보면 NewExpense 컴포넌트에서 onAddExpense 포인터 함수를 호출해도 정상적으로 동작하는 것을 확인할 수 있다.
1. 드롭다운 메뉴에서 변경 사항 모니터링
2. 선택한 값을 Expenses.js 파일로 전송
콘솔은 ExpenseFilter 구성 요소의 데이터 값이 Expenses 구성 요소에서 발행한 prop인 포인터 함수를 통해 e.target.value로 변경되고 구성 요소 Expenses로 승격되었음을 확인합니다.
3. 업로드된 데이터를 상태로 저장
양방향 바인딩을 사용하여 비용 구성 요소에 2020으로 저장된 기본값을 조정할 수 있습니다.
65개 직업 중
이 애플리케이션에서 ExpenseFilter는 드롭다운 목록을 표시하고 UI를 나타내는 구성 요소일 뿐입니다.
청취자와 소품이 있지만
실제 논리는 상위 구성요소인 Expenses에 있습니다.
이 논리는 ExpensesFilter를 제어 구성 요소로 바꿉니다.
값은 ExpensesFilter 구성 요소 자체가 아닌 상위 구성 요소에서 처리됩니다.
(처리중..)