Ordinary Day

Hook은 React 16.8버전에서 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 라이프사이클 기능을 사용할 수 있게 해줍니다. Hook은 React의 핵심 기능 중 하나로, 함수형 컴포넌트에서도 클래스형 컴포넌트처럼 상태를 관리하거나, 컴포넌트의 생명주기를 처리할 수 있도록 합니다. 대표적인 Hook으로는 useState(), useEffect(), useContext() 등이 있으며, 이를 통해 코드의 가독성을 높이고 재사용 가능한 로직을 작성할 수 있습니다.  Hook의 특징함수형 컴포넌트 전용 : Hook은 클래스형 컴포넌트에서는 사용할 수 없습니다.상태 및 라이프사이클 관리 : useState()로 상태 관리, useEffect()로 라이프사이클 이벤트를 처리할 수 있습니다.재사용 ..

export default는 JavaScript ES6 모듈 시스템의 문법으로, 모듈에서 기본적으로 하나의 값만 내보낼 수 있도록 하는 방식입니다. React에서는 컴포넌트, 함수, 클래스 등을 export default를 통해 외부 모듈로 내보내고 import 키워드를 통해 다른 파일에서 불러와 사용할 수 있습니다. React 프로젝트에서는 주로 기본 컴포넌트를 내보낼 때 export default를 사용하여 직관적이고 간단한 import 문법을 제공합니다.  export default의 기본 사용법export default를 사용하면 모듈을 가져올 때 임의의 이름으로 import 할 수 있습니다.// Button.jsfunction Button() {    return Click here;}expor..

React 앱에서 특정 커스텀 폰트를 앱 전반에 걸쳐 기본 폰트(Default Font)로 설정하기 위해서는 @font-face를 사용하여 폰트를 등록하고, body, html, *를 사용하여 모든 요소에 일괄적으로 적용하면 됩니다.  폰트 파일 준비src 폴더 내에 fonts 라는 폴더를 생성fonts 폴더에 추가하고자 하는 폰트 파일을 저장 (.ttf) @font-face 설정index.css 파일에 @font-face 규칙을 추가하여 폰트 등록html, body, * 선택자를 사용하여 모든 요소에 기본 폰트로 적용 가능sans-serif는 폰트가 로드되지 않았을 때 대체될 폰트/* index.css */// 폰트 파일명이 custom.ttf 라고 가정@font-face {    font-family..

JSX는 JavaScript XML의 약자로, JavaScript를 확장한 문법입니다. JSX는 React에서 주로 사용되며, HTML과 유사한 문법으로 UI 컴포넌트를 정의합니다. JavaScript 코드 내에서 HTML 태그를 직접 작성할 수 있도록 해주어 코드의 가독성과 유지보수성을 높여줍니다. JSX는 브라우저가 이해할 수 있도록 Babel과 같은 컴파일러를 통해 JavaScript 코드로 변환됩니다.  JSX의 특징1. HTML과 유사한 문법JSX는 JavaScript 코드 안에 HTML과 비슷한 태그를 작성할 수 있습니다.const element = Hello, world!;// 컴파일 시 변환되는 결과물const element = React.createElement('h1', null, 'H..