iOS: Interface Builder와 UI 구성

Eden·2024년 10월 21일

iOS swift

iOS

목록 보기

3/18

Interface Builder와 UI 구성을 배우면서 나는 리액트랑 비교하면서 이해하면 좀 더 이해하기 수월할 것 같아서 비교해보았다.

Swift Interface Builder vs React: UI 구성 방식 비교

1. UI 구성 방식: Drag & Drop vs 선언적 UI

Swift Interface Builder	React
Interface Builder에서 시각적으로 컴포넌트를 배치하고 스토리보드로 관리	JSX와 선언적 UI를 통해 코드를 직접 작성
UI 컴포넌트를 마우스로 Drag & Drop	UI는 코드로 직접 선언 (HTML + JavaScript)
UI와 코드가 분리됨 (스토리보드와 Swift 파일)	UI와 로직이 같은 파일에서 공존(JSX 방식)

Swift - Interface Builder 예시:

@IBOutlet weak var myButton: UIButton!

@IBAction func buttonTapped(_ sender: UIButton) {
    print("Button was tapped!")
}

React - 선언적 UI 예시:

function App() {
  const handleClick = () => {
    console.log("Button was clicked!");
  };

  return (
    <button onClick={handleClick}>
      Click Me!
    </button>
  );
}

2. 코드와 UI의 연결 방식

Swift (Interface Builder)	React (JSX)
스토리보드에서 `IBOutlet`, `IBAction`으로 UI 요소와 코드를 연결	JSX 내부에서 이벤트 핸들러를 직접 연결
UI 요소와 코드가 분리됨 (스토리보드와 Swift 파일)	UI와 로직이 한 파일에서 작성됨 (컴포넌트 단위)

3. 앱 흐름과 상태 관리

Swift (스토리보드)	React
스토리보드로 화면 간의 전환 흐름을 구성 (Segue 사용)	React Router를 통해 페이지 전환 관리
각 화면(View Controller)에서 개별적으로 상태 관리	전역 상태는 `useState`, `Redux`로 관리

Swift - Segue로 화면 전환:
스토리보드에서 Segue를 이용해 여러 화면의 흐름을 시각적으로 설계합니다.

React - 페이지 전환과 상태 관리:
React에서는 React Router를 사용해 페이지 전환을 구현하고, 상태 관리는 useState나 Redux로 수행합니다.

4. 핫 리로드와 실시간 반영

Swift Interface Builder	React
UI를 수정할 때 빌드 후 실행해야 반영됨	핫 리로드로 실시간 UI 업데이트

Swift: Interface Builder에서 수정한 내용은 앱을 다시 빌드해야 반영됩니다.
React: 코드 수정 시 Hot Reloading 덕분에 실시간으로 브라우저에서 업데이트됩니다.

5. 컴포넌트 재사용성

Swift	React
`UIView`, `UIButton` 등을 코드로 생성해 재사용	재사용 가능한 컴포넌트를 코드로 정의
재사용성이 제한적(주로 코드로 재사용)	Props로 컴포넌트 간 데이터 전달

Swift: 스토리보드에서 재사용은 제한적이며, 코드로 커스텀 뷰를 생성해야 합니다.
React: 컴포넌트를 함수로 정의하고, Props로 데이터와 이벤트를 전달해 다양한 곳에서 재사용합니다.

6. 상황별 비교 요약

특징	Swift Interface Builder	React
UI 구성 방식	시각적인 드래그 앤 드롭	코드로 UI를 선언적으로 작성
이벤트 처리	`IBAction`으로 연결	JSX에서 `onClick` 등 이벤트 연결
앱 흐름 관리	스토리보드로 Segue 설정	React Router로 페이지 전환
상태 관리	View Controller 단위 관리	`useState`, Redux 사용
빌드 및 리로드	수정 후 빌드 필요	실시간 핫 리로드 지원
컴포넌트 재사용성	코드로 커스텀 뷰 생성	컴포넌트와 Props로 재사용