[LAB-5] debounce와 input value의 적용 문제

seoohyeon commented 1 year ago

질문 작성자

김서현

문제 상황

<문제상황 설명> debounce문을 쓰고 그것을 onChange함수에 넣어준뒤,
input값에 value 속성을 주면 해당 input창이 수정이 안되고 defaultValue 속성을 주면 수정은 되나 아래와 같이 값이 뜨지 않게됩니다.

<해결하기 위한 시도1> 코드를 아래와 같이 변경하고 콘솔창을 찍어보니 아래와 같이 나왔습니다. 이렇게 찍힌다면 debounce가 적용이 안되었지 않나 생각이 들었습니다.

<해결하기 위한 시도2> form의 value를 처리하기 위한 두가지 해결방식이 있다는 것을 확인했습니다.
(1) state값을 사용하고 handler를 통해 변경해주는 법 (controlled Component)
<input value={state} onClick={()=>{}} />
(2) 컴포넌트 안에 DOM handler를 사용하는 법 (uncontrolled Component)

그 중 저는 2번의 방법을 하기 위해 시도하였으나
이를 적용하려 ref를 썼는데 콘솔창에 에러가 났고, fowardRef를 쓰라는 식의 에러메세지를 확인했습니다. 한마디로 이방법은 ref를 어떻게 적용해야 하는지 모르겠어서 실패했습니다.

프로젝트 저장소 URL

https://github.com/React-Project-lab5/React-Project-lab5
develop브랜치

현재 파일 위치
src파일 : src.zip

환경 정보

운영체제 : Windows
Node.js : v16.14.0
라이브러리 : React v18.2.0

yamoo9 commented 1 year ago

@seoohyeon 님 문제 검토를 하려면 로그인이 필요할 듯 한데 테스트 계정을 알려주세요. 로그인 하지 않은 경우, 사용자 정보를 받아올 수 없어 테스트 할 수 없습니다.

seoohyeon commented 1 year ago

@yamoo9 .env파일에 작성하시면 되는 코드를 아래에 적어드립니다. 로그인은 아이디 : eee@naver.com / 비번: aaaa1111 입니다.

VITE_API_KEY = AIzaSyD3qb4s7ciOVHXQTOYTZsoHs5gjBGQNDWY VITE_AUTH_DOMAIN = likelion-seo-first.firebaseapp.com VITE_PROJECT_ID = likelion-seo-first VITE_STORAGE_BUCKET = likelion-seo-first.appspot.com VITE_MESSAGE_SENDER_ID = 591976348589 VITE_APP_ID = 1:591976348589:web:9e41f2f24e6e1125d17f24

VITE_SERVICE_KEY=M4E1Vdrm%2Ba%2FjVfatJPdEbBibLbYBeDaGm7tgF%2BxisSinPYTEEBDkFgSO0gmqjAZGOzfrSffYbsOF3XshtdL6lg%3D%3D

yamoo9 commented 1 year ago

문제 해결

먼저... 마크업 잘 신경써주세요. 무려 슬비님께 배웠는데 이렇게 마크업 하면 안됩니다. 😥 개별 인풋 마다 form 요소로 감싸면 안됩니다.

<form>
  <Input
    // ...
    defaultValue={user.displayName}
    onChange={editName}
    disabled={!isEditing}
  />
</form>

아래는 수정된 사용자 입력 필드 마크업(JSX) 부분만 발췌한 것입니다. form 요소 대신, div로 사용했습니다. 표현 목적이 아니라면 제거 하는 것이 좋습니다.

<div className={classes.inputContainer}>
  <div className={classes.userInfoContainer}>
    <div>
      <Input
        className={classes.inputMobile}
        maxWidthValue={290}
        heightValue={80}
        labelText="Name"
        defaultValue={user.displayName}
        onChange={editName}
        disabled={!isEditing}
      />
    </div>
    <div>
      <Input
        className={classes.inputMobile}
        maxWidthValue={290}
        heightValue={80}
        labelText="Email"
        defaultValue={user.email}
        onChange={editEmail}
        disabled={!isEditing}
      />
    </div>
  </div>
  <div className={classes.userInfoContainer}>
    <div>
      <Input
        className={classes.inputMobile}
        maxWidthValue={290}
        heightValue={80}
        labelText="Phone"
        defaultValue={user.phoneNumber}
        onChange={editPhoneNumber}
        disabled={!isEditing}
      />
    </div>
    <div>
      <Input
        className={classes.inputMobile}
        maxWidthValue={290}
        heightValue={80}
        labelText="Address"
        defaultValue={address}
        onChange={editAddress}
        disabled={!isEditing}
      />
    </div>
  </div>
</div>

테스트를 수행한 후, 처리된 화면은 아래 영상과 같습니다. Firebase 인증된 사용자 정보를 로그인 후 제대로 렌더링 할 뿐 아니라, 사용자가 입력한 값이 디바운스 처리되어 정상적으로 입력됩니다.

https://user-images.githubusercontent.com/1850554/227817067-05165885-8b33-4e46-9d20-8a1ed2e4a928.mp4

가이드 파일

첨부된 가이드 파일을 확인해보세요.

src.zip

yamoo9 / likelion-FEQA