분류 전체보기

React Native에서의 View 컴포넌트

리액트 네이티브에서 View 컴포넌트는 모든 UI 레이아웃의 기본 구성 요소이다. 화면에 다양한 요소들을 배치하고 관리하기 위해 사용하는 가장 중요한 컨테이너로, HTML의 와 비슷한 역할을 한다. 이 글에서는 View 컴포넌트의 기본적인 사용법과 다양한 레이아웃 속성들을 살펴보며, 리액트 네이티브의 레이아웃 시스템을 이해하고 효과적으로 활용하는 방법을 설명한다.View의 기본 사용법 View는 기본적으로 화면의 다른 요소들을 포함하는 역할을 한다. 별도의 속성이나 스타일을 설정하지 않으면 아무런 효과가 나타나지 않으므로, 주로 스타일과 함께 사용된다.import React from 'react';import { View, Text } from 'react-native';const App = () => ..

React Native에서 Text Input과 키보드 처리하기

리액트 네이티브에서 텍스트 인풋(TextInput)은 사용자와 상호작용을 위한 가장 기본적인 요소 중 하나이다. 하지만, 텍스트 인풋을 사용할 때 키보드가 화면을 가리는 문제가 발생할 수 있어 이를 적절히 처리하는 방법을 알아두는 것이 중요하다. 이 글에서는 TextInput의 주요 속성과 키보드 처리 방법에 대해 설명하고, 예제 코드를 통해 적용 방식을 소개한다.TextInput의 기본 사용법 TextInput은 사용자의 입력을 받을 수 있는 기본 컴포넌트이다. 가장 기본적으로는 placeholder 속성을 사용해 입력 필드에 안내 문구를 넣을 수 있다.이 코드는 간단하게 텍스트 입력을 받는 기본적인 텍스트 인풋 필드를 만들어준다.유용한 TextInput 속성들 TextInput에는 다양한 속성을 통해..

웹 성능을 높일 수 있는 bundler plugins

웹 프론트엔드 성능 최적화는 사용자 경험과 직결되며, 로딩 속도가 느려지면 사용자 이탈률이 증가할 수 있다. 이를 해결하기 위해 웹 애플리케이션을 최적화하는 방법 중 하나는 번들러 플러그인들을 활용하는 것이다. 이번 글에서는 웹 프론트엔드 성능을 높일 수 있는 몇 가지 주요 번들러 플러그인들을 소개하고자 한다.1. Imagemin-pngquant 이미지 파일은 웹사이트 로딩 속도에 큰 영향을 미친다. 특히, PNG 파일은 고화질을 유지하는 만큼 용량이 커질 수 있다. 이를 줄이기 위해 사용하는 플러그인 중 하나가 imagemin-pngquant이다. 이 플러그인은 PNG 파일의 크기를 줄이면서도 이미지 품질을 최대한 유지해주는 역할을 한다.주요 기능:PNG 파일의 무손실 또는 저손실 압축이미지 품질을 사..

React Hook을 사용할 때 실수들 (2): useEffect

서론 React에서 컴포넌트의 lifecycle에 맞춰 동작하는 useEffect는 매우 자주 사용되는 훅이다. 하지만 이 훅을 잘못 사용하면 예기치 않은 동작이나 성능 문제를 일으킬 수 있다. 이 글에서는 useEffect를 사용할 때 흔히 저지르는 실수들과 그 해결 방법을 다룰 것이다.1. 객체는 참조한다 JavaScript에서 객체는 non-primitive 자료형이다. 즉, 객체의 내용이 같아도 두 객체는 서로 다른 참조 값을 가진다. 예를 들어 다음 코드를 보자.const obj1 = { a: 1 };const obj2 = { a: 1 };console.log(obj1 === obj2); // false 이 두 객체는 구조가 같지만 서로 다른 참조를 갖고 있으므로 === 비교에서는 false가 ..

React Hook을 사용할 때 실수들 (1): useState

서론 React에서 상태 관리를 위해 useState는 매우 자주 사용되는 훅이다. 하지만 이 훅들을 잘못 사용하면 예기치 않은 동작이나 성능 문제를 일으킬 수 있다. 이 글에서는 useState를 사용할 때 흔히 저지르는 실수들과 그 해결 방법을 다룰 것이다.1. setState는 즉시 실행되지 않는다 useState로 상태를 업데이트할 때 흔히 착각하는 부분은 setState가 즉시 상태를 업데이트한다고 생각하는 것이다. 하지만 React는 여러 상태 업데이트 요청을 모아서 한 번에 처리하는 특성을 갖고 있다. 아래 예제 코드를 보자.import React, { useState } from 'react';function Counter() { const [count, setCount] = useSta..

React Hook 이해하기 (4): useMemo, useCallback

React 애플리케이션에서 성능 최적화는 매우 중요하다. 컴포넌트가 복잡해지고 상태나 props의 변경이 빈번해질수록 불필요한 연산이 반복될 가능성이 높아진다. 이러한 문제를 해결하기 위한 도구로 React는 useMemo와 useCallback 훅을 제공한다. 이 두 훅은 주로 계산 비용이 많이 드는 연산을 memoization하여 불필요한 연산을 방지하는 데 사용된다. 특히, 클래스 컴포넌트에서 사용하던 shouldComponentUpdate 메서드를 대체할 수 있는 기능을 제공한다.useMemo: 복잡한 계산 결과를 memoization useMemo는 memoization을 통해 계산 비용이 많이 드는 연산을 최적화한다. memoization이란 동일한 계산이 반복될 때, 이전에 계산된 결과를 저..

React Hook 이해하기 (3): useRef

React 컴포넌트에서 상태를 기억하고 싶지만, 그 정보가 렌더링을 트리거하지 않기를 원할 때 사용하는 도구가 useRef다. useRef는 렌더링과 무관한 정보를 저장할 수 있는 ref 객체를 반환하며, 이 값은 ref.current를 통해 접근할 수 있다. ref는 상태처럼 정보를 저장할 수 있지만, 중요한 차이점은 ref는 변경되어도 리렌더링을 트리거하지 않는다는 점이다.useRef의 기본 개념 useRef는 상태와 달리, 값을 읽고 쓰는 데 있어서 자유롭다. ref 객체는 mutable하므로 값을 즉시 변경할 수 있으며, 이는 React에서 추적되지 않는다. 따라서 ref는 React가 렌더링 사이클을 관리하는 것과는 별개로 작동한다. 예를 들어, ref는 숫자, 문자열, 객체, 함수 등 어떤 값..

React Hook 이해하기 (2): useEffect

React 컴포넌트에서 상태를 관리하거나 이벤트 핸들러를 통해 사용자와 상호작용하는 경우, Side Effects가 발생하게 된다. 일반적으로 이벤트 핸들러는 사이드 이펙트를 포함한다. 그러나, 렌더링 자체로 인해 발생하는 사이드 이펙트를 처리해야 할 때는 useEffect 훅이 필요하다. 이 글에서는 useEffect의 개념, 동작 방식, 그리고 효과적인 사용 방법에 대해 설명하겠다.사이드 이펙트란? 사이드 이펙트란 프로그램의 상태를 변경하거나 외부 시스템과 상호작용하는 것을 의미한다. 예를 들어, 사용자가 버튼을 클릭하여 메시지를 전송하는 것은 이벤트에 의한 사이드 이펙트다. 반면, 컴포넌트가 렌더링될 때 외부 API로부터 데이터를 가져오는 작업은 렌더링으로 인해 발생하는 사이드 이펙트다. 이러한 렌..