리액트 동적 화면 처리 완전 정복

코딩 코디네이터 2025. 4. 24. 12:00

2025. 4. 24. 12:00

리액트 동적 화면 처리 완전 정복 🌟

사용자의 클릭 하나로 화면이 바뀌고,
조건에 따라 다른 컴포넌트가 등장하는
그 마법 같은 UI 구현!
리액트로 그 비밀을 풀어봅니다.

안녕하세요, 여러분! 😊

혹시 리액트로 개발하다 보면 화면을 동적으로 바꾸고 싶었던 적 있으신가요?

예를 들어 버튼을 누르면 화면이 전환되거나, 특정 조건일 때만 컴포넌트가 보이게 하고 싶었던 경험 있으시죠?

이번 포스트에서는 바로 그런 동적 UI 처리 방법을 리액트에서 어떻게 구현할 수 있는지 자세히 알아보려 해요.

상태(state) 관리, 조건부 렌더링, 컴포넌트 전환 등 실무에 바로 써먹을 수 있는 팁을 예제와 함께 하나하나 알려드릴게요.

초보자도 이해할 수 있도록 천천히, 차근차근 진행하니 끝까지 함께해 주세요!

1. useState로 조건부 렌더링하기 🎛️

리액트에서 동적인 UI를 처리하려면 가장 먼저 알아야 할 훅이 바로 useState입니다.

사용자의 행동에 따라 화면의 요소를 보이거나 숨기고 싶다면, 조건에 따라 렌더링되는 컴포넌트를 제어해야 하거든요.

💡 기본 사용 패턴

import { useState } from "react";

function ToggleExample() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        {isVisible ? "숨기기" : "보이기"}
      </button>
      {isVisible && <p>이 텍스트는 상태에 따라 보입니다!</p>}
    </div>
  );
}

이 예제에서는 버튼을 누르면 isVisible 상태가 true/false로 바뀌면서 텍스트가 조건부로 렌더링돼요.

이게 바로 조건부 렌더링의 핵심입니다.

🔍 다양한 조건부 렌더링 방식

삼항 연산자 (ternary operator)를 사용한 렌더링
&& 연산자를 활용한 짧은 조건 처리
if/else 또는 함수형 렌더링 방식

📋 예시: 로그인 상태에 따라 화면 전환

function LoginStatus() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <div>
      {isLoggedIn ? (
        <h2>환영합니다, 사용자님!</h2>
      ) : (
        <button onClick={() => setIsLoggedIn(true)}>로그인하기</button>
      )}
    </div>
  );
}

이처럼 useState를 기반으로 조건에 맞게 컴포넌트를 보여주면, 사용자의 액션에 따라 부드럽게 변화하는 UI를 만들 수 있어요.

✅ 정리해볼까요?

상태(state)는 동적 화면 처리를 위한 기본 도구입니다.
조건부 렌더링에는 다양한 방법이 있지만 &&와 삼항 연산자가 가장 흔하게 쓰입니다.
실제 화면에 바로 반영되기 때문에 즉각적인 피드백을 줄 수 있습니다.

앞으로 다룰 ‘컴포넌트 Show/Hide’와도 매우 밀접한 개념이니, 이 부분을 확실히 익혀두세요!

2. 화면 전환: 컴포넌트 Show/Hide 패턴 🔄

리액트 앱에서는 종종 "이 화면에서 저 화면으로 전환"하는 UI 흐름이 필요하죠.

탭 전환, 메뉴 접기/펼치기, FAQ 펼치기 등에서 말이에요.

이럴 때 자주 사용하는 기법이 바로 컴포넌트를 조건에 따라 보여주거나 숨기는 Show/Hide 패턴입니다.

🛠 간단한 Show/Hide 예제

function TabSwitcher() {
  const [tab, setTab] = useState("A");

  return (
    <div>
      <button onClick={() => setTab("A")}>Tab A</button>
      <button onClick={() => setTab("B")}>Tab B</button>

      {tab === "A" ? <ComponentA /> : <ComponentB />}
    </div>
  );
}

이 예제에서는 버튼 클릭 시 상태가 바뀌고, 그에 따라 A 컴포넌트 또는 B 컴포넌트가 화면에 표시됩니다.

완전한 페이지 전환은 아니지만 동적인 느낌을 주는 UI를 만들 수 있죠.

💡 팁: 조건이 많아질 땐 switch-case나 객체 매핑!

const components = {
  A: <ComponentA />,
  B: <ComponentB />,
  C: <ComponentC />
};

return (
  <div>
    <button onClick={() => setTab("A")}>Tab A</button>
    <button onClick={() => setTab("B")}>Tab B</button>
    <button onClick={() => setTab("C")}>Tab C</button>
    {components[tab]}
  </div>
);

이렇게 하면 코드가 훨씬 깔끔하고 유지보수도 쉬워집니다.

조건이 늘어날수록 이런 구조가 필요해요.

📦 FAQ 아코디언 구현 예시

function FAQItem() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <h4 onClick={() => setOpen(!open)}>Q. 이 기능은 어떻게 동작하나요?</h4>
      {open && <p>A. useState로 열고 닫을 수 있어요!</p>}
    </div>
  );
}

이런 UI는 실제 웹서비스에서 자주 쓰이죠.

사용자에게 필요한 정보를 보기 좋게 정리할 수 있으니까요.

✅ 핵심 요약

상태(state)에 따라 컴포넌트를 조건적으로 렌더링
여러 조건을 처리할 땐 객체 매핑으로 코드 간소화

다음은 리스트를 동적으로 렌더링하면서 key를 어떻게 다뤄야 할지에 대해 이야기해볼게요.

꼭 필요한 개념이니까 집중해주세요!

3. 리스트 동적 렌더링과 키(Key) 사용법 🧩

리액트에서 반복되는 UI,

예를 들어 댓글 목록이나 게시판 리스트 같은 걸 만들 때 자주 쓰는 게 동적 리스트 렌더링입니다.

그리고 이때 반드시 함께 써야 할 것이 바로 key 속성이에요.

이 key 하나로 성능과 버그 여부가 갈릴 수 있거든요.

🔁 기본 리스트 렌더링 예제

function FruitList() {
  const fruits = ["🍎 Apple", "🍌 Banana", "🍊 Orange"];

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

여기서 key={index}처럼 index를 key로 사용하는 건 간단하긴 하지만,

항목의 순서가 바뀌거나 삽입/삭제가 많을 땐 비추천이에요.

컴포넌트 상태가 꼬일 수 있거든요.

📛 key 사용 시 주의사항

리스트 항목이 바뀌거나 삽입/삭제되는 경우엔 index 대신 고유한 ID 사용 권장
key는 형제 요소 간의 구분자 역할이므로 절대 중복되면 안 됨

💼 실무 예시: 사용자 리스트 렌더링

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
];

function UserList() {
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

이처럼 id 같은 고유 값을 key로 쓰면 리렌더링 이슈도 줄어들고, 성능 최적화에도 도움이 됩니다.

실무에서 무조건 쓰이는 방식이에요.

🧠 정리하면?

동적 리스트 렌더링에는 반드시 key를 사용한다
index는 임시로만, 실제로는 고유한 식별자 사용
렌더링 효율성과 버그 예방 측면에서 매우 중요하다

이제 리스트뿐 아니라 입력창도 동적으로 제어할 시간이에요.

다음 파트에서는 동적 폼 처리에 대해 알아봅시다!

4. 동적 폼 처리와 입력값 관리 ✍️

리액트에서 사용자 입력을 처리할 때 가장 많이 사용하는 패턴이 바로 useState와 onChange 이벤트의 조합입니다.

여기에 폼의 입력 필드를 동적으로 생성하거나 관리하려면 어떻게 해야 할까요?

이 섹션에서 그 해답을 찾아봅니다.

🧪 단일 입력 필드 제어

function SimpleForm() {
  const [name, setName] = useState("");

  return (
    <form>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <p>입력된 이름: {name}</p>
    </form>
  );
}

위 코드처럼 입력 필드를 value와 onChange로 연결하면 제어 컴포넌트가 됩니다.

실시간으로 값이 반영되기 때문에 매우 직관적이죠.

📋 다중 필드 입력 처리

function MultiInputForm() {
  const [formData, setFormData] = useState({ name: "", email: "" });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  return (
    <form>
      <input name="name" value={formData.name} onChange={handleChange} />
      <input name="email" value={formData.email} onChange={handleChange} />
      <p>이름: {formData.name}, 이메일: {formData.email}</p>
    </form>
  );
}

이 방식은 입력 필드가 늘어나더라도 handleChange 하나로 다 제어할 수 있어서 굉장히 유용합니다.

⚠️ 입력값 초기화 팁

setFormData({ name: "", email: "" })을 사용해 초기화 가능
formRef.current.reset() 같은 DOM 방식도 상황에 따라 유용함

🔚 정리!

제어 컴포넌트 방식으로 입력값을 상태로 관리
다중 필드는 name 속성과 스프레드 연산자를 활용해 통합 관리
입력 초기화도 잊지 말고 꼭 처리할 것

이제 진짜 페이지 간 화면 전환이 궁금하시죠?

다음 섹션에서 React Router를 활용한 동적 화면 전환을 마스터해봐요!

5. React Router로 구현하는 동적 화면 전환 🚀

리액트 앱이 복잡해질수록 페이지 전환은 필수가 되죠.

React Router를 이용하면 SPA 구조를 유지하면서도 화면 전환처럼 보이는 멋진 UI를 만들 수 있어요.

사용자 경험을 부드럽게 만드는 핵심 기술이죠!

🔗 기본 설정: 라우터 구조 만들기

import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

BrowserRouter와 Routes, Route 컴포넌트를 조합해서 각 URL에 해당하는 컴포넌트를 연결하면 페이지처럼 보이는 화면 전환을 구현할 수 있습니다.

🧭 동적 파라미터와 URL 활용

function Profile() {
  const { username } = useParams();
  return <h2>{username}님의 프로필</h2>;
}

// 라우터 설정
<Route path="/user/:username" element={<Profile />} />

이렇게 하면 /user/jisu처럼 URL에 따라 내용을 동적으로 렌더링할 수 있어요.

유저 프로필, 상품 상세페이지 등에 딱이죠!

📦 React Router 실무 팁

페이지 이동 후 스크롤 상단 이동은 useEffect + window.scrollTo(0, 0)
useNavigate()로 프로그래밍 방식 이동도 가능

🔍 요약 정리

React Router는 SPA에서 가짜 페이지 이동을 구현하는 도구
Route와 Link 조합으로 전환 가능
URL 파라미터로 동적 렌더링 처리도 가능

마지막 파트에서는 커스텀 훅을 만들어 동적 UI를 더 효율적으로 제어하는 방법을 알려드릴게요.

자동화와 재사용성까지 챙기는 시간입니다!

6. 커스텀 훅으로 만든 동적 UI 제어 🧠

동적 UI가 점점 복잡해지면, 공통 로직을 재사용할 일이 많아지죠.

예를 들어 토글 기능, 폼 초기화, 특정 키보드 입력 감지 등은 여러 곳에서 반복됩니다.

이럴 땐 커스텀 훅(Custom Hook)으로 추상화하면 훨씬 효율적이에요!

🔄 useToggle 훅 만들기

import { useState, useCallback } from "react";

function useToggle(initialValue = false) {
  const [state, setState] = useState(initialValue);
  const toggle = useCallback(() => setState((prev) => !prev), []);
  return [state, toggle];
}

이 훅은 true/false 상태를 간단히 토글해주는 역할을 합니다.

useCallback으로 성능 최적화까지 고려했어요.

✅ 사용 예시: FAQ 아코디언

function FAQItem() {
  const [open, toggleOpen] = useToggle();

  return (
    <div>
      <h4 onClick={toggleOpen}>Q. 커스텀 훅이 뭐예요?</h4>
      {open && <p>A. 반복되는 훅 로직을 추상화한 함수입니다!</p>}
    </div>
  );
}

이처럼 커스텀 훅을 사용하면 코드가 훨씬 깔끔해지고, 여러 곳에서 같은 방식으로 사용할 수 있어 유지보수도 쉬워집니다.

📦 커스텀 훅 팁

이름은 반드시 use로 시작해야 함 (예: useForm, useInput 등)
다른 훅을 내부에서 자유롭게 사용할 수 있음

🎯 요약!

동일한 훅 로직이 반복된다면 커스텀 훅으로 추상화
이름은 반드시 use로 시작
재사용성과 유지보수성 모두 향상됨

자, 이제 리액트 동적 화면 처리를 위한 모든 기초는 끝났어요.

마지막으로 전체 내용을 정리하며 마무리해볼게요. 😊

🧾 리액트 동적 화면 처리, 이제 어렵지 않죠?

지금까지 useState를 이용한 조건부 렌더링부터 React Router를 활용한 페이지 전환, 그리고 커스텀 훅으로 코드 리팩토링까지!

동적 UI를 만드는 핵심 개념을 하나씩 배워봤습니다.

초보자라면 처음엔 헷갈릴 수도 있지만, 직접 예제 코드를 따라 작성하다 보면 금세 감이 잡힐 거예요.

실제로 서비스를 개발하다 보면 사용자의 인터랙션에 반응해서 화면이 바뀌는 상황은 무수히 많습니다.

이번 포스트가 그런 상황을 어떻게 스마트하게 처리할지에 대한 든든한 실전 가이드가 되었기를 바라요.

여러분도 직접 연습하면서, 필요한 기능을 커스텀 훅으로 만들어보거나, React Router로 화면 전환을 구성해보세요. 실전에서 쓸 수 있는 진짜 스킬은 이렇게 쌓이는 거랍니다!

'React' 카테고리의 다른 글

리액트에서 리스트 데이터를 화면에 출력하는 모든 방법 (0)	2025.04.24
리액트 이벤트 처리 마스터하기 : 초보자를 위한 실전 가이드 (1)	2025.04.24
리액트 훅 완전정복! 초보자를 위한 주요 훅 사용법 가이드 (0)	2025.04.23
리액트 컴포넌트 설계 마스터: Atomic Design, 합성, 상속 완전정복 (0)	2025.04.23
리액트 컴포넌트의 다양한 구성 방법 (0)	2025.04.23

firstcodingNet