[TS] React에서 하위 컴포넌트로 Props 내려줄 때 타입 객체로 내려주는 경우와 아닌 경우

 

가끔 하위 컴포넌트로 props 내려줄 때 어떤 경우는  아래처럼, 

import React from 'react';

export default function Dropwdown(props: { isOpen: boolean }) {
  const isOpen = props.isOpen;
  
  return (
    <DropdownContainer className={isOpen ? 'expanded' : ''}>
      {/* Dropdown 내용 */}
    </DropdownContainer>
  );
}

 

 

어떤 경우는 요 아래처럼 내려받는 경우가 있었습니다요...

import React from 'react';

export default function Dropwdown( isOpen: boolean) {
  return (
    <DropdownContainer className={isOpen ? 'expanded' : ''}>
      {/* Dropdown 내용 */}
    </DropdownContainer>
  );
}

 

 

저 isOpen은 상위 컴포넌트에서 토글이나 모달창 On/OFF 역할을 하는 useState 의 상태 변수 값을 넘겨줄 때 자주 곤란했던 녀석입니다. React 컴포넌트의 props는 객체 형태로 전달되기 때문에 {isOpen : boolen } 처럼 객체 형태로 타입을 지정해주어야 합니다.

 

 

 const [ isOpen, setIsOpen ] = useState(flase);  

 

 

* setIsOpen 의 경우 넘겨줄 때   Dispatch< SetStateAction < "//받는 데이터 값의 타입" >>  이런 타입으로 받..

 

 

 

-- JavaScript와 TypeScript 에서 함수의 매개변수를 정의하는 방식은 두 가지 주요 접근 방법이 있습니다. 

 

1. 명명된 매게변수 (Named Parameters): 

매개 변수를 개별적으로 이름을 부여하고 타입을 지정하는 방식은 정적 타입언어(TypeScript)에서 사용됩니다. 

function exampleOne ( param1: string, param2: number): void {
	//생략
}

- 명시적이고, 정적 타입 검사를 통해 타입 안전성을 제공합니다. 

 

 

 

2. 매개변수 객체 (Parameter Object) : 

모든 매개변수를 하나의 객체로 묶고 해당 객체의 타입을 지정하는 방식은 JavaScript나 동적 타입 언어에서 사용됩니다. 

function exampleTwo(params) {
	const { param1, param2 } = params;
    //생략
}

- 매개변수를 묶어서 전달하므로 여러 매개변수를 그룹화하거나 선택적으로 사용할 때 유용하나 타입에 대한 안전성을 보장하기 어려울 수 있습니다.