• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

반응형 TextBox 질문입니다.

24.04.02 05:46 작성 24.04.02 05:48 수정 조회수 147

0

  1. TextBox2의 경우 제목이 #2. React uncontrolled. canvas 라고 되어 있는데 코드를 보면 단순히 기존 onChange -> onInput으로만 바뀌어 있습니다. 따라서 ref를 사용한 예제로 바뀌면 좋을 것 같습니다.
    TextBox3 제목에 (자체 제작 방법) 이런 문구도 소괄호로 같이 표시되어 있으면 좋을 것 같습니다.
    또한 사소하지한 onChange와 onInput에 대한 약간의 차이 같은 설명이 주석이나 자막으로 처리되어 있으면 더욱 좋을 것 같습니다.


  2. TextBox5에 스터디를 하신 다른 분이 useImperativeHandle 훅을 사용한 것을 만들어주신 것 같은데 혹시 재남님은 useImperativeHandle을 실제 실무에서 활용하신 사례가 있으신지 궁금합니다.

    p.s) 매일 오전에 하나씩 보고 있는데 재밌게 보고 있습니다.
    좋은 강의 감사드립니다~

course-thumbnail

[React / VanillaJS] UI 요소 직접 만들기 Part 1

여러줄 말줄임 (1/4) canvas 버전

강의실 바로가기

답변 1

답변을 작성해보세요.

1

정재남님의 프로필

정재남

지식공유자

2024.04.02

  • TextBox2의 강의내용을 시청하지 않고 코드만 보시고 말씀하신 것 같아요. TextBox2는 처음에는 ref를 작성했다가, 나중에(복습스터디 #1. 텍스트박스, 여러줄 말줄임 - 코드리뷰) 변경하게 되거든요. 강의자료의 코드는 강의의 최종 상태만 반영되어 있으니, 가급적 강의영상 위주로 봐주시기 바랍니다 🙂

 

  • 최종 코드상의 TextBox1과 TextBox2의 차이는 onChange -> onInput으로 바뀐것 뿐만이 아니라, value={text}가 사라진 것도 있어요. controlled와 uncontrolled를 가르는 중요한 차이점은 이벤트 핸들러의 등록여부가 아니라, state의 사용 유무에 있습니다.
    다만 위 영상(복습스터디 #1)에서는 onChange handler를 적용하면 Lint에서 "value도 적용하여 controlled로 사용하거나, value와 함께 onChange도 빼서 uncontrolled로 사용할 것"을 경고하기 때문에, 이 경고를 피하기 위해 onInput을 적용했던 것으로 기억해요.

 

image

 

  • useImperativeHandle은 상태에 관여하지 않는 예외적인 상황에서 실제로 사용하고 있습니다. 대표적으로 ui적으로만 조정이 필요한 경우, 예컨대 스크롤 위치 조정이라거나 엘리먼트의 position을 옮기는 용도로요. (이에 대해서는 scrollSpy 강의의 마지막 영상에서 다루고 있습니다 - 스크롤스파이 (4/4) 스크롤박스 재활용)

  • 원론적인 얘기이지만, 리엑트는 선언형 프로그래밍이므로 ref를 위로 전달하여 직접 호출하는 명령형 프로그래밍은 전체 철학의 방향성에 맞지 않습니다. 따라서 ref를 forward하지 않고도 처리할 수 있는 다른 방법이 있는지를 먼저 고민해보는 것이 바람직합니다.

이 글과 비슷한 Q&A