iOS 17 이상, Xcode 26 / Swift 6.2 환경에서 정리한 글입니다.예제는 직접 만든 포켓몬 도감 앱 Pokedex-iOS의 코드를 사용했습니다.SwiftUI에서 화면은 상태(state)를 그린 결과입니다. 상태가 바뀌면 SwiftUI가 그 상태를 읽는 View의 body를 다시 실행해서 화면을 새로 그립니다. 그래서 SwiftUI를 쓸 때 가장 많이 고민하는 것은 "상태를 어디에 두고, 어떻게 넘길까"입니다.이 글에서는 상태를 다루는 네 가지 도구를 정리하고, 각각이 실제로 어떻게 동작하는지 테스트로 확인한 결과를 함께 살펴봅니다.도구한 줄 요약@StateView가 직접 소유하는 상태@Binding다른 View가 가진 상태를 읽고 쓰는 통로@Observable클래스의 프로퍼티를 Swift..

이번에는 React Hook 중 하나인 useRef를 이용해 컴포넌트 내부에서 값을 유지하는 방법과 특정 DOM 요소에 접근하는 방법을 알아보겠습니다.useRef는 Reference 객체를 생성하는 React Hook입니다.기본적인 사용 방법은 다음과 같습니다.const refObject = useRef()초기값을 전달할 수도 있습니다.const refObject = useRef(0)1. useRef란?useRef를 호출하면 current라는 프로퍼티를 가진 Reference 객체가 생성됩니다.const refObject = useRef(0)console.log(refObject)개념적으로 다음과 같은 객체를 생각할 수 있습니다.{ current: 0}따라서 Reference 객체에 저장된 값을 사용하..

이번에는 React에서 자주 사용하게 되는 React Hooks가 무엇인지 알아보겠습니다.앞에서 살펴본 useState, useRef 역시 모두 React Hooks입니다.React를 공부하다 보면 다음과 같은 함수들을 자주 만나게 됩니다.useStateuseRefuseEffectuseReducer이러한 기능들을 통틀어 React Hooks라고 합니다.1. React Hooks란?React Hooks란 함수 컴포넌트에서 React의 다양한 기능을 사용할 수 있도록 해주는 기능입니다.과거 React에서는 컴포넌트를 크게 두 가지 방식으로 만들 수 있었습니다.Class ComponentFunction Component예전에는 두 컴포넌트 사이에 기능적인 차이가 있었습니다.Class 컴포넌트는 State와 같..

이번에는 React의 State를 활용하여 사용자가 입력한 값을 관리하는 방법을 알아보겠습니다.간단한 회원가입 폼을 만들면서 다음 정보를 입력받겠습니다.이름생년월일국적자기소개이번 내용은 두 가지 방식으로 나누어 살펴보겠습니다.State로 각각의 사용자 입력 관리하기하나의 State 객체로 사용자 입력 통합 관리하기1. React에서 사용자 입력값 관리하기HTML의 input, select, textarea 같은 입력 요소는 사용자가 값을 입력하거나 선택할 수 있습니다.React에서는 이러한 값을 단순히 화면에 표시하는 것뿐만 아니라, State와 연결하여 현재 입력값을 관리할 수 있습니다.기본적인 흐름은 다음과 같습니다.사용자 입력 ↓onChange 이벤트 발생 ↓이벤트 객체(e)에서 입력값 ..

이번에는 React의 State와 Props의 관계, 그리고 컴포넌트가 언제 리렌더링되는지 알아보겠습니다.특히 서로 관련 없어 보이는 Bulb와 Counter 컴포넌트가 왜 함께 리렌더링되는지 확인하고, 컴포넌트를 분리하는 이유도 함께 살펴보겠습니다.1. State를 Props로 전달하기React에서는 부모 컴포넌트가 관리하는 State를 자식 컴포넌트에 Props로 전달할 수 있습니다.예를 들어 App 컴포넌트에서 전구의 상태를 관리하고, Bulb 컴포넌트에 전달해보겠습니다.import './App.css'import { useState } from 'react'const Bulb = ({ light }) => { console.log(light) return ( {light ===..