풀소유

export default function A {}export const A: FC = () => {}이 둘은 JavaScript 및 TypeScript에서 함수를 정의하고 내보내는 두 가지 다른 방법이다. 이 둘은 과연 어떻게 다른 걸까? 호이스팅함수 선언 (Function Declaration)export default function A() { // 함수 본문 }호이스팅: 함수 선언은 호이스팅 되므로, 함수 선언문 이전에 호출할 수 있다.함수 표현식 (Function Expression)export const A: FC = () => { // 함수 본문 };호이스팅: 함수 표현식은 변수 호이스팅의 규칙을 따르며, 선언되기 전에 호출할 수 없다. 내보내기기본 내보내기 (Default Export)ex..

HTML 요소는 웹 페이지의 구조를 정의하는 데 사용되며, 각 요소는 다양한 속성(attributes)을 가질 수 있다. 예를 들어 input 요소는 type, value, onChange 등의 속성을 가질 수 있다.React에서는 이러한 HTML 요소들을 컴포넌트로 사용한다. TypeScript와 함께 사용할 때, HTML 요소의 속성을 타입으로 정의하여 컴포넌트의 Props를 관리할 수 있도록 DetailedHTMLProps와 HTMLAttributes를 제공한다. HTMLAttributes모든 일반적인 HTML 속성들을 포함하는 타입이다. 이 타입은 특정 HTML 요소가 가질 수 있는 모든 속성들을 정의한다. 예를 들어, div 요소의 속성을 정의하려면 HTMLAttributes 타입을 사용할 수 ..

플렉스박스 레이아웃이란 display 스타일 속성에 flex라고 설정하고 그 안에 콘텐츠 아이템을 배치한 것을 의미한다. 이때 플렉스 컨테이너는 콘텐츠 아이템의 inline과 block 성질을 완전히 무시한다. 어떤 HTML 요소에 display: flex;로 설정하면 해당 요소를 플렉스 컨테이너로 만들 수 있다. flex-direction 속성flex-direction 속성은 display 설정값이 flex일 때만 사용할 수 있다.flex-direction 설정값은 row와 row-reverse, column과 column-reverse 등 4가지가 있으며 기본값은 row이다.row는 왼쪽에서 오른쪽으로, row-reverse는 오른쪽에서 왼쪽으로, column은 위에서 아래로, column-rever..