search

Coding-Village-Protector / woowahan-ts

[우아한 타입스크립트 with 리액트] 북 스터디 📚
14 stars 2 forks source link

8.1.7_언제 ComponentPropsWithoutRef를 사용할까 #24

Closed sryung1225 closed 8 months ago

sryung1225 commented 8 months ago

📝 263-267p

❓ 다음 빈 칸을 채워주세요.

책에서는 리액트를 사용하며 HTML 태그의 속성 타입을 지정하기 위한 방법으로 DetailedHTMLProps와 [---(1)---] 를 소개합니다. 그 중 [---(1)---] 의 사용법을 후반에 설명합니다.

[---(2)---] 를 props로 전달하는 상황에서 [---(3)---] 의 경우, 의도한 태그를 바라보는 클래스 컴포넌트의 경우와는 달리 기대한 값을 제대로 할당받지 못하는 문제를 가집니다. 이러한 제약을 극복하고 [---(3)---] 에서도 [---(2)---] 를 props로 제대로 전달받을 수 있도록 도와주기 위해 [---(4)---] 메서드를 사용합니다. 그리고 이 [---(4)---] 의 제네릭 인자를 작성하기 위해 [---(1)---] 을 사용합니다.

정리하자면 [---(1)---] 은 [---(3)---] 가 props로 [---(2)---] 를 받고 싶을 때 사용하기 위해 사용하는 [---(4)---] 메서드의 인자를 작성하기 위해 사용합니다.

eeeyooon commented 8 months ago

(1) ComponentPropsWithoutRef (2) ref (3) 함수 컴포넌트 (4) React.forwardRef

lulla-by commented 8 months ago

1) ComponentPropsWithoutRef 2) ref 3) 함수 컴포넌트 4) React.forwardRef

Stilllee commented 8 months ago
  1. ComponentPropsWithoutRef
  2. ref
  3. 함수 컴포넌트
  4. React.forwardRef
sryung1225 commented 8 months ago

(1) ComponentPropsWithoutRef (2) ref (3) 함수 컴포넌트 (4) React.forwardRef

책에서는 리액트를 사용하며 HTML 태그의 속성 타입을 지정하기 위한 방법으로 DetailedHTMLProps와 ComponentPropsWithoutRef를 소개합니다. 그 중 ComponentPropsWithoutRef의 사용법을 후반에 설명합니다.

ref를 props로 전달하는 상황에서 함수 컴포넌트의 경우, 의도한 태그를 바라보는 클래스 컴포넌트의 경우와는 달리 기대한 값을 제대로 할당받지 못하는 문제를 가집니다. 이러한 제약을 극복하고 함수 컴포넌트에서도 ref를 props로 제대로 전달받을 수 있도록 도와주기 위해 forwardRef 메서드를 사용합니다. 그리고 이 forwardRef의 제네릭 인자를 작성하기 위해 ComponentPropsWithoutRef를 사용합니다.

정리하자면 ComponentPropsWithoutRef는 함수 컴포넌트가 props로 ref를 받고 싶을 때 사용하기 위해 사용하는 forwardRef 메서드의 인자를 작성하기 위해 사용합니다.