Per ardua ad astra.

React Native KeyboardAvoidingView

KeyboardAvoidingView들어가며리액트 네이티브(React Native)의 KeyboardAvoidingView 컴포넌트에 대해 간단히 정리해 본다. KeyboardAvoidingView개념키보드가 화면에 나타날 때 입력 필드 등의 UI가 가려지는 문제를 해결하기 위해 사용되는 컴포넌트키보드 레이아웃이 표시될 때, 자식 요소를 위로 올려서 입력창을 가리지 않도록 해준다.Android에서는 기본적으로 잘 처리되나, iOS에서는 그렇지 않아 이 컴포넌트를 이용하면 유용하다. 주요 속성behavior키보드가 나타날 때의 동작 방식을 조절할 수 있다.플랫폼에 따라 동작이 다를 수 있기 때문에 Platform.OS를 통해 조건 분기해서 쓰는 것이 일반적이다.옵션설명padding키보드의 높이만..

SafeAreaView들어가며리액트 네이티브(React Native)의 SafeAreaView 컴포넌트에 대해 간단하게 정리해 본다. SafeAreaView개념React Native에서 화면 상단의 상태바나 노치와 같은 UI 요소로부터 콘텐츠가 겹치지 않도록 자동으로 안전한 영역을 설정해 주는 컴포넌트SafeAreaView 컴포넌트를 사용하면 다양한 기기에서 콘텐츠가 적절하게 배치되고, 화면 가장자리나 상단의 중요한 UI 요소에 가려지지 않게 된다. 주요 기능노치, 상태 바, 하단의 홈 바 등과 같은 화면 요소가 있는 디바이스에서 콘텐츠가 겹치지 않도록 자동으로 여백을 추가해 준다.다양한 화면 크기와 해상도에 따라 안전 영역을 자동으로 인식하고, 이에 맞게 여백을 적용해 준다. 사용 방법React N..

const Component vs. function Component들어가며리액트(React.js)에서 const Component 형태의 화살표 함수 방식과 function Component 형태의 함수 선언 방식으로 컴포넌트를 선언할 수 있다.위의 두 가지 방법에 대한 차이점을 정리해본다. ① 화살표 함수 방식const MyComponent = () => { return( .. )} 화살표 함수(Arrow Function)로 작성할 수 있으며, 짧은 코드로 작성할 수 있다는 장점이 있다.예를 들어, 한 줄로 반환하는 경우, return 키워드를 생략할 수 있다.const MyComponent = () => ( ... ) 컴포넌트 선언과 동시에 export default..

외부 컴포넌트 라이브러리의 UI 컴포넌트 스타일을 직접 수정하는 방법들어가며antd 등 외부 컴포넌트 라이브러리의 UI 컴포넌트를 Styled-Components를 이용하여 직접 수정하는 방법을 정리해본다. 방법스타일 파일(컴포넌트명.style.js)이나 컴포넌트 파일(컴포넌트명.js/jsx/tsx)에서 다음과 같이 코드를 작성하고 변경/추가하고자 하는 스타일을 넣어주면 된다.import styled from "styled-components";import { 외부컴포넌트명 } from "외부_컴포넌트_라이브러리_패키지";export const 커스텀외부컴포넌트명 = styled(외부컴포넌트명)`속성: 값;`; 그리고 다른 일반적인 Styled-Components 요소처럼 사용하면 된다.i..

컴포넌트를 생성하는 방법 2가지 (JSX, React.createElement)들어가며리액트(React.js)에서 컴포넌트를 생성하는 방법 2가지를 정리해본다. 컴포넌트 생성 방법① 함수형 컴포넌트function Greeting() { return ( hello world );} 함수형 컴포넌트는 자바스크립트 함수로 정의되며, JSX(JavaScript XML) 문법을 사용하여 UI를 반환한다.와 태그를 사용하여 UI를 정의한다.JSX는 Babel 같은 컴파일러를 통해 React.createElement 호출로 변환된다.코드가 더 직관적이고 읽기 쉬우며, 컴포넌트를 작성할 때 HTML과 유사한 문법을 사용할 수 있다. ② React.createElementimp..

Image 컴포넌트들어가며Next.js에서 기본으로 제공하는 Image 컴포넌트에 대해 정리해본다. Image 컴포넌트개념Next.js에서 다양한 퍼포먼스 기능과 편리한 설정을 지원하는 컴포넌트 이미지 컴포넌트를 이용하면 이미지 불러오기 작업을 최적화할 수 있다. 또한 이미지 크기 조정, 지연 로딩(Lazy Loading)을 지원하며, WebP와 같은 최신 이미지 형식이 자동으로 처리된다. 다양한 기기와 화면 크기에 맞게 이미지 크기를 유동적으로 조절할 수 있다. 사용 방법기본 사용법next/image 모듈을 불러와서 사용한다.import Image from 'next/image';export default function Home() { return ( Next.js Image E..

useImperativeHandle과 forwardRef들어가며리액트(React.js)에서 사용되는 useImperativeHandle과 forwardRef에 대해 알아보자.forwardRef와 useImperativeHandle은 컴포넌트 간의 참조를 다루기 위한 도구이다.이 두가지 개념을 이해하면 컴포넌트 외부에서 내부의 DOM 요소나 메서드에 접근할 수 있게 되어, 고급 컴포넌트 설계에 유용하다고 한다. forwardRef개념부모 컴포넌트로부터 전달된 ref를 자식 컴포넌트가 받을 수 있게 해준다.forwardRef를 사용하지 않고 자식 컴포넌트에 ref를 전달할 수 없다.ref는 DOM 요소에만 붙일 수 있다.하지만 forwardRef를 사용하면, 부모 컴포넌트가 ..

부모 컴포넌트에서 자식 컴포넌트로 요소 넘기는 방법들어가며리액트에서 부모 컴포넌트에서 자식 컴포넌트로 요소를 넘기는 방법을 알아보자. 방법부모 컴포넌트에서 자식 컴포넌트로 넘길 요소의 타입을 지정할 수 있는데, string 형태로 지정해주면 된다.이떄, prop 이름의 첫 글자는 항상 대문자이어야 한다.App.jsxButtonsContainer prop을 "menu"로 지정해보았다.return ( handleSelect("components")} > Components handleSelect("jsx")} > JSX ..