props 질문 드립니다!!

const Div = ({ children, name1 }: { name1: string; children?: ReactNode }) => {
  return (
    <div>
      div: {name1} <br />
      {children}
    </div>
  );
};

function Div(children: any, name1: any) {
  return (
    <div>
      {name1}
      {children}
    </div>
  );
}

저는 이 둘의 차이가 그냥 선언식과 표현식의 차이라고만 생각했는데 

위 코드는 렌더링이 되고 아래 코드는 name1.name1 이렇게 (props.name1) 이런식으로 접근해야 렌더링이 됩니다.  위 코드에서는 왜뜨는건지 모르겠습니다.

아래 코드에서는 그냥 파라미터를 하나로 줘서 (props)   이런식으로 하고 

{props.name1}

{props.children}

이건 이해가 됩니다 근데 위 코드는 어떻게 실행되는건지 잘 모르겠습니다 ㅠ 

추가

선생님 선언식, 표현식 차이가 아니라

({name1,children}{name1:any,children:any})

(props:any) 

이 둘의 차이인건 알았습니다! 

왜 ({name1,children}{name1:any,children:any}) 이렇게 접근하면 props.  과 같은 과정 없이 바로 렌더링 되는건가요,,?