문제

공통 컴포넌트를 생성하여 input onBlur가 됐을 때 icon 색상을 변경하고 싶었다.
그래서 svg를 컴포넌트로 생성해서 fill을 props로 전달하여 색상변경할수 있게
input에 svg icon을 추가했다. 기본 색상은 회색이며 input이 focus가 됐을 때 아이콘 색상이 노랑색, 에러메세지가 호출됐을 때 빨강색이 되게끔 구현했다. 포커스일 때 와 에러메세지 별로 색상이 잘 바뀌는데
문제는 onBlur가 됐을 때 회색으로 다시 변경됐으면 좋겠는데.. 노랑색을 유지하는 문제가 발생해서 매우 난감한 상황의 문제를 겪었다.

원인

공통 컴포넌트 코드

<script>
// authInput.tsx
          <input
            className={`${borderColor} ...`}
            type={inputType}
            name={inputName}
            onFocus={handleFocus}
            onBlur={handleBlur}
            ref={ref}
            {...props}
          />
         <EmailIcon 
          width={15} 
          height={15} 
          color={iconColor} 
          className={`absolute bottom-[1.8rem] left-[1.7rem]`} 
          />
</script>

<script>
//Edit.tsx
          <AuthInput
            type='email'
            required={!!errors.email}
            label={INPUT_SETTING.label.email}
            placeholder={INPUT_SETTING.placeholder.email}
            errorMessage={errors?.email?.message}
            {...register('email')}
            />
</script>

authInput에서 input tag를 사용하고 props를 전달할 때 onBlur가 같이 전달이 되는데
Edit.tsx에서 react-hook-form을 사용하여 authInput를 사용하니
react-hook-form에서 기본적으로 제공하는 onBlur와 input tag onBlur가 겹치는 문제가 발생하여 onBlur가 되어도 아무런 반응이 없었다.

해결

onBlur 이벤트 핸들러를 props로 전달하기 전에 내부의 handleBlur 함수를 호출하여 내부 로직을 실행하고, 그 후에 외부에서 전달받은 onBlur 이벤트 핸들러를 호출하도록 구현했다.

<script>
// authInput.tsx
          <input
            className={`${borderColor} ...`}
            type={inputType}
            name={inputName}
            onFocus={handleFocus}
            ref={ref}
            {...props}
            onBlur={(event) => {
              handleBlur();
              props?.onBlur?.(event);
            }}
          />
</script>