Ordinary Day

React Native _ 한 번의 개발로 두 플랫폼을!

현대 애플리케이션 개발은 빠르게 변화하는 사용자 요구에 맞춰 다양한 플랫폼을 지원해야 합니다. 하지만 각 플랫폼마다 다른 언어와 도구를 사용해야 하기 때문에, 시간과 비용이 많이 드는 것이 현실입니다. React Native는 이러한 문제를 해결하기 위해 Meta(구_Facebook)에서 개발한 크로스 플랫폼 프레임워크입니다. React의 철학을 모바일 애플리케이션에 적용하여 JavaScript 하나로 iOS와 Android 앱을 동시에 개발할 수 있도록 도와줍니다. React Native는 높은 생산성과 유연성을 제공하며, 전 세계적으로 많은 기업과 개발자가 채택하고 있는 강력한 도구입니다.  React Native의 특징크로스 플랫폼 개발동일한 코드베이스를 사용하여 iOS와 Android 앱을 동시에..

ReactJS _ useState()

React.useState()는 React Hook 중 하나로, 함수형 컴포넌트에서 상태(State)를 관리할 수 있도록 도와줍니다. 이전에는 클래스형 컴포넌트에서만 상태를 관리할 수 있었지만, useState()가 도입됨으로써 함수형 컴포넌트에서도 쉽게 상태를 사용할 수 있게 되었습니다. useState()는 컴포넌트의 랜더링을 트리거하며, 컴포넌트 내의 데이터 변화를 관리하는 핵심적인 도구입니다.  useState() 함수의 기본 구조state : 현재 상태 값setState : 상태를 업데이트하는 함수initialValue : 상태의 초기값으로 문자열, 숫자, 객체, 배열 등 모든 값이 될 수 있음const [state, setState] = React.useState(initialValue);fu..

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..