React와 TypeScript로 ForwardRef Input 컴포넌트 생성

---

1. 정리 대상

React의 forwardRef를 사용해 입력 컴포넌트를 만드는 방법에서 타입스크립트의 활용과 컴포넌트 설계 원리

---

2. 전체 코드

• InputText.tsx

import React, { ForwardedRef } from 'react';
import InputTextStyle from './InputTextStyle';

interface Props {
   placeholder?: string;
}

const InputText = React.forwardRef(({ placeholder }: Props, ref: ForwardedRef<HTMLInputElement>) => {
   return (
      <InputTextStyle placeholder={placeholder} ref={ref}>
         input text
      </InputTextStyle>
   );
});

export default InputText;

• InputTextStyle.ts

import styled from 'styled-components';

const InputTextStyle = styled.input.attrs({ type: 'text' })``;

export default InputTextStyle;

---

3. 주요 개념

1. Props 인터페이스 정의

컴포넌트의 속성을 타입스크립트로 정의하여 타입 안정성을 제공.

interface Props {
   placeholder?: string;
}

• placeholder는 선택적 속성으로, 입력 필드에 힌트를 제공하는 역할.
• 타입스크립트에서 인터페이스를 정의하면 컴파일 단계에서 잘못된 속성이 전달되는 것을 방지.

2. React.forwardRef 사용

• 부모 컴포넌트로부터 전달된 ref를 하위 DOM 요소에 연결.

const InputText = React.forwardRef(({ placeholder }: Props, ref: ForwardedRef<HTMLInputElement>) => {
   return (
      <InputTextStyle placeholder={placeholder} ref={ref} />
   );
});

📌 React.forwardRef의 개념

React.forwardRef는 React에서 컴포넌트에 전달된 ref를
해당 컴포넌트의 DOM 요소나 자식 컴포넌트로 전달할 수 있도록 돕는 API.
일반적으로 부모 컴포넌트가 자식 컴포넌트 내부의 DOM 요소를 직접 제어해야 하는 상황에서 사용

📌코드에서 forwardRef를 사용하는 이유

• 위 코드에서 InputText 컴포넌트는 함수형 컴포넌트.
• 하지만 외부에서 이 컴포넌트를 사용하는 부모 컴포넌트가 ref를 통해 InputTextStyle의 DOM 요소에 접근하려고 함.
• 예를 들어, 텍스트 입력 요소에 포커스를 주거나 값을 읽고 싶을 때 ref가 필요.

📌React.forwardRef의 동작 원리

• React.forwardRef는 두 가지 매개변수를 받는 컴포넌트를 반환

• Props: 컴포넌트에 전달된 일반 속성들

• Ref: 부모 컴포넌트로부터 전달된 ref

• React.forwardRef로 감싼 컴포넌트는 이 두 값을 분리해 적절히 사용 가능.

📌작동 방식

1. 부모 컴포넌트로부터 ref와 props를 전달받는다.
2. 전달받은 props는 내부 컴포넌트의 속성으로 사용되고, ref는 하위 DOM 요소로 전달된다.
3. 부모 컴포넌트는 이 ref를 통해 DOM 요소에 직접 접근할 수 있다.

ForwardedRef의 타입 지정

• ForwardedRef는 전달된 ref가 HTML input 요소를 참조함을 명시한다.
• 이를 통해 ref를 사용할 때 타입 안정성을 유지한다.

3. styled-components로 스타일 정의

HTML 태그에 스타일을 적용하는 방식으로 활용.

const InputTextStyle = styled.input.attrs({ type: 'text' })``;

attrs 함수

• 기본 속성을 설정. 이 경우 type="text"가 기본값으로 지정.

• attrs를 사용하면 반복적인 속성 설정을 줄일 수 있다.

스타일 템플릿 리터럴

• 스타일을 추가하면 컴포넌트의 UI를 쉽게 확장

예시:

const InputTextStyle = styled.input.attrs({ type: 'text' })`
   font-size: 1rem;
   padding: 0.5rem;
   border: 1px solid #ccc;
   border-radius: 4px;
`;