2024/06/19 2

[React] PropsWithChildren 이해하기

PropsWithChildrenPropsWithChildren은 타입스크립트로 작성된 React 컴포넌트에서 자식 요소를 포함하는 props를 정의하는 데 사용되는 타입이다.이를 사용하면 컴포넌트의 타입 안전성을 높이고, 코드 가독성을 향상시키며, 더 유연한 컴포넌트를 만들 수 있다.리액트 17 버전까지는 children 속성을 FC 타입에 포함했지만 18 버전부터는 FC 타입에서 children 속성을 제거했다. 그리고 PropsWithChildren이라는 제네릭 타입을 새롭게 제공하여 children?: ReactNode 부분을 PropsWithChildren 타입으로 대체했다.  왜 PropsWithChildren을 사용할까?React 컴포넌트는 일반적으로 props를 통해 데이터를 전달받는다. 하..

Javascript/React 2024.06.19

CSS 상자 모델 이해하기

웹 페이지를 구성하는 모든 요소는 상자(box) 형태로 표현된다. CSS의 상자 모델(Box Model)은 이 상자를 구성하는 요소와 그것이 웹 페이지에 어떻게 배치되는지를 이해하는 데 중요한 개념이다. CSS 상자 모델의 구성 요소CSS 상자 모델은 다음과 같은 네 가지 주요 구성 요소로 이루어져 있다콘텐츠(Content): 요소의 실제 내용이 들어가는 공간이다. 텍스트, 이미지, 동영상 등이 포함한다.패딩(Padding): 콘텐츠와 경계(Border) 사이의 간격이다. 패딩은 투명하며 콘텐츠 주위에 추가적인 공간을 제공한다경계(Border): 콘텐츠와 패딩 주위를 둘러싸는 테두리이다. 경계는 다양한 스타일과 색상으로 설정할 수 있다.마진(Margin): 요소의 경계와 다른 요소들 사이의 간격이다. 마..

CSS 2024.06.19
728x90