FrontEnd/Typescript
타입스크립에서의 props
NandaNanda
2024. 6. 8. 20:24
타입스크립트를 쓰지 않으면 propTypes라는 패키지를 다운 받아서 Menu.propTypes ={ } 형식으로 해주면 되지만 타입스크립트에서는 그냥 propTypes다운 받을 필요없이 interface Props{ } 를 쓰면됨.
기본적으로 propTypes는 타입을 확인하여 오류를 줄여주기 위해 사용한다. 즉, PropTypes는 부모로부터 전달받은 prop의 데이터 type을 검사한다. 자식 컴포넌트에서 명시해 놓은 데이터 타입과 부모로부터 넘겨받은 데이터 타입이 일치하지 않으면 콘솔에 에러 경고문이 띄워진다.
관련글: https://velog.io/@eunjin/React-PropTypes-%EC%93%B0%EB%8A%94-%EC%9D%B4%EC%9C%A0-%EB%B0%A9%EB%B2%95
다음은 타입스크립에서 사용되는 interface Props{ } 를 살펴보자!
아래는 Workout 프로젝트때 사용하였던 InputBox컴포넌트의 interface Props의 예이다.
import {ChangeEvent, KeyboardEvent, forwardRef} from 'react'
import './style.css'
import React from 'react';
// interface: Input Box 컴포넌트 Properties //
interface Props{
label:string;
type: 'text'|'password';
placeholder:string;
value:string;
onChange: (event:ChangeEvent<HTMLInputElement>)=>void;
error:boolean;
icon?: 'eye-light-off-icon'|'eye-light-on-icon'| 'expand-right-light-icon';//물음표는 선택의 의미임. icon은 있을수도 있고 없을 수도 있음
onButtonClick?: ()=> void; //마찬가지로 버튼이 있을수도 있고 없을 수도 있으므로 물음표를 넣어줌
message?:string;
onKeyDown?:(event:KeyboardEvent<HTMLInputElement>)=>void;
}
// useRef를 사용하기 위해서, 직접적으로 input element들을 컨트롤하기 위해 forwardRef를 사용하고 있는 것!!!
// component: InputBox 컴포넌트 //
const InputBox=forwardRef <HTMLInputElement, Props>((props:Props, ref)=>{
// state: properties //
const{label, type, placeholder, value, error, icon, message }=props;
const {onChange, onButtonClick, onKeyDown }=props;
// event handler: iput키 이벤트 처리 함수 //
const onKeyDownHandler=(event:KeyboardEvent<HTMLInputElement>)=>{
if(!onKeyDown)return;
onKeyDown(event);
}
// render: Input Box 컴포넌트 //
return (
<div className='inputbox'>
<div className='inputbox-label'>{label}</div>
<div className={error?'inputbox-container-error':'inputbox-container'}>
{/* ref를 지정한다는 것은 input에서 엔터키를 치면 다음 input으로 넘어가게
하거나 다음 과정인 로그인으로 넘어가게 하기 위한것. 즉 ref를 받으면 키보드에 관한 동작을 처리할 수 있음.
키보드에 관한 상태가 onKeyDown이다 */}
<input ref={ref} type={type} className='input' placeholder={placeholder} value={value} onChange={onChange} onKeyDown={onKeyDownHandler}/>
{onButtonClick !== undefined &&
// 버튼도 아닌데 onClick이 있네? 일정한 버튼이 아닌 좀 특수한 생김새의 버튼이라서 그렇다. 그런 버튼은 이렇게 div태그에 붙어있는 것이다.
<div className='icon-button' onClick={onButtonClick} >
{/* 띄어쓰기를 기준으로 두개의 클래스를 적용받고 있다 */}
{icon!==undefined &&(<div className={`icon ${icon}`}></div>)}
</div>
}
</div>
{message !== undefined && <div className='inputbox-message'>{message}</div>}
</div>
)
});
export default InputBox;
interface Props{ }의 사용중 FC에 대하여
