상태는 입력 구성 요소 내부에서 관리되며 다음과 같은 상태를 갖습니다.

• 값: 요소의 값을 입력합니다.
• isInputTouched: 유효성 검사 오류 메시지가 있는 경우 표시할지 여부를 결정하기 위해 사용자가 입력을 터치/초점했는지 여부를 결정합니다.

일부 기능(예: 입력 구성 요소에 전달된 유효성 검사 기능)을 이 두 상태에 결합하고 적용하여 다른 변수 값을 생성하여 입력 및 해당 값의 유효성(예: 값이 유효한지 여부)에 대한 정보를 수집합니다. (isValid ), 확인 메시지(message)가 있는지, 입력이 유효한지(isInputValid = isValid || !isInputTouched) 확인 메시지를 표시할지 결정합니다.

이러한 상태와 값은 제가 만든 사용자 정의 후크인 useInput에서 다음과 같이 관리됩니다.

hooks/use-state.js

import { useState, useCallback } from 'react'; 함수 useInput(validityFn) { const [value, setValue] = useState(''); const [isInputTouched, setIsInputTouched] = useState(false); const [isValid, 메시지] = 유효성Fn 유형 === '함수' ? 유효성Fn(값) : [true, null]; const isInputValid = isValid || const inputChangeHandler = useCallback(event => { setValue(event.target.value); if(!isInputTouched) { setIsInputTouched(true); } }, [isInputTouched]); const inputBlurHandler = useCallback(() => { setIsInputTouched(true); }, []); const 재설정 = useCallback(() => { setValue(''); setIsInputTouched(false); }, []); 반품 { 값, 유효하다, isInputValid, 메시지, 입력ChangeHandler, 입력BlurHandler, 초기화 }; } 기본 useInput 내보내기; 

저는 현재 다음과 같이 Input.js에서 이 사용자 정의 후크를 사용하고 있습니다.

comComponents/UI/Input.js

'react'에서 { useEffect }를 가져옵니다. '../../hooks/use-input'에서 useInput을 가져옵니다. import './Input.scss'; 함수 입력(소품) { const { 값, 유효하다, isInputValid, 메시지, 입력ChangeHandler, 입력BlurHandler, 초기화 } = useInput(props.validity); const { onIsInputValidOrMessageChange, 유효성 변경, 재설정 시 } = 소품; let className = '양식 제어'; if(!isInputValid) { className = `${className} 양식-제어--잘못됨`; } if(props.className) { className = `${className} ${props.className}`; } useEffect(() => { if(onIsInputValidOrMessageChange && typeof onIsInputValidOrMessageChange === '함수') { onIsInputValidOrMessageChange(isInputValid, 메시지); } }, [onIsInputValidOrMessageChange, isInputValid, 메시지]); useEffect(() => { if(onValidityChange && typeof onValidityChange === '함수') { onValidityChange(isValid); } }, [onValidityChange, isValid]); useEffect(() => { if(onReset && typeof onReset === '함수') { onReset(리셋); } }, [onReset, 재설정]); 반품 ( <입력 {...소품} 클래스이름={클래스이름} 값={값}onChange={inputChangeHandler} onBlur={inputBlurHandler} /> ); } 기본 입력 내보내기; 

입력 구성 요소에서 isInputValid 상태를 직접 사용하여 잘못된 CSS 클래스를 입력에 추가했습니다. 하지만 isInputValid, message, isValid 및 reset 함수도 상위 구성 요소에 전달합니다. 그것에 사용합니다. 이러한 상태와 함수를 전달하기 위해 소품에 정의된 onIsInputValidOrMessageChange, onValidityChange, onReset 함수를 사용합니다. 대신에 from 자녀가 부모에게).

다음은 FormGroup 구성 요소의 정의이며 FormGroup 내부의 입력 상태를 사용하여 유효성 검사 메시지(있는 경우)를 표시하는 방법입니다.

comComponents/UI/FormGroup.js

'react'에서 { useState } 가져오기; './Input'에서 입력 가져오기; import './FormGroup.scss'; 함수 FormGroup(props) { const [message, setMessage] = useState(null); const [isInputValid, setIsInputValid] = useState(false); let className = '양식-그룹'; if(props.className) { className = `양식 그룹 ${props.className}`; } labelCmp = (  {props.label}  ); if(props.sideLabelElement) { labelCmp = ( 
 {labelCmp} {props.sideLabelElement} 
 ); } 함수 isInputValidOrMessageChangeHandler(changedIsInputValid,changeMessage) { setIsInputValid(changedIsInputValid); setMessage(changedMessage); } 반품 ( 
 {labelCmp} <입력 id={props.id} onIsInputValidOrMessageChange={isInputValidOrMessageChangeHandler} {...props.inputProps} /> {!isInputValid 
{메시지}
} 
 ); } 기본 FormGroup 내보내기; 

위 코드에서 볼 수 있듯이 업데이트된 message isInputValid code> 입력 구성 요소에서 전달된 상태입니다. 이러한 값을 유지하기 위해 입력 구성 요소에 2개의 상태를 정의했지만 업데이트되고 전달된 값을 입력 구성 요소에 저장하려면 이 구성 요소에 또 다른 2개의 상태를 정의해야 합니다. 이것은 약간 이상하고 나에게 가장 좋은 방법이 아닌 것 같습니다.

질문은: 여기서 소품 드릴링 문제를 해결하기 위해 React Context(useContext) 또는 React Redux를 사용할 수 있다고 생각합니다. 하지만 현재 상태 관리가 좋지 않고 React Context 또는 React Redux를 사용하여 개선할 수 있는지 잘 모르겠습니다. 내가 이해한 바로는 상태가 자주 변경되는 상황에서는 React Context가 끔찍할 수 있지만 Context가 애플리케이션 전체에서 사용된다면 이것이 작동합니다. 여기에서는 전체 양식을 저장하고 업데이트하는 컨텍스트를 생성하여 양식 전체를 확장할 수 있습니다. 반면에 React Redux는 사일로에 가장 적합하지 않을 수 있으며 약간 과잉일 수도 있습니다. 어떻게 생각하나요? 이 특별한 상황에 대해 더 나은 대안은 무엇입니까?

참고: 저는 React를 처음 접하기 때문에 단순한 실수부터 일반적인 실수까지 모든 코딩에 대한 여러분의 제안에 열려 있습니다. 감사해요!