코딩 자율학습 리액트 프런트엔드 개발 입문 3.4 섹션에서 일부 내용이 보이지 않아 추가한다.
리액트에서 함수 파라미터로 넘겨주는 데이터는 props라는 이름의 개체 하나로 보내준다.
props를 구조분해를 했을 때의 이름이 함수 외부에서 사용중인 변수명과 충돌하거나 마음에 들지 않으면 이름을 바꿔줄 수 있다.
TSX
interface UserProps {
name: string;
age: number;
clickHandler: () => void;
}
export default function User(props: UserProps) {
const {
name: userName,
age: userAge,
clickHandler: handleUserClick
} = props;
return (
<>
<p>name: {userName}</p>
<p>age: {userAge}</p>
<button onClick={handleUserClick}>클릭</button>
</>
);
}구조 분해된 이름 뒤에 : 바꿀 이름을 적어주면 된다.
