Per ardua ad astra.

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

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

index.js로 컴포넌트(Component), 페이지(Page) 관리하기들어가며다음과 같이 src 폴더 내부에 있는 components, pages 폴더 안에 index.js 파일을 생성하여 여러 컴포넌트와 페이지들을 하나의 파일에서 관리할 수 있다.이와 관련된 내용을 정리해본다. index.js개념리액트(React.js) 프로젝트에서 pages나 components 폴더 안에 위치한 index.js 파일은 해당 폴더 내의 여러 컴포넌트들을 한 곳에서 쉽게 불러올 수 있도록 다시 export 해주는 역할을 한다.index.js 파일 안의 내용은 다음과 같이 구성할 수 있다. 사용 방법pages 또는 components 폴더에 index.js 파일을 생성한 후,..

컴포넌트를 생성하는 방법 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 ..