💬 Q&A 모음 #03

🔗 2025년 01월 둘째 주 ( 01.06 ~ 01.12 ) - 중요 Q&A 모음

---

Q. React Router를 사용할 때, 페이지 이동은 어떤 방식으로 할 수 있을까?

"Link, useNavigate, Navigate 등등 다양하게 있는데 각각 어떤 상황에서 사용하는 게 좋을까?"

📍 결론

"정적 이동은 Link를, 동적 이동이나 이벤트 기반 이동은 useNavigate를, 조건부 렌더링을 활용한 이동은 Navigate를 사용하면 적합하다."

✔ㅤLink

• React Router에서 사용되는 컴포넌트로, HTML의 <a> 태그와 비슷한 역할을 한다.
• 전체 페이지를 새로고침하지 않고 애플리케이션 내에서 경로를 이동할 수 있다.
• SPA 의 장점을 활용하여 리소스를 절약하며 부드러운 페이지 전환이 가능하다.
• SEO 를 고려한 최적화 처리가 되어있다.

<Link to="/about">Go to About</Link>

• ⭕ 장점
  • 간단히 특정 경로로 이동 가능하다.
  • 브라우저 히스토리에 기록이 남는다.
• ❌ 단점
  • 동적으로 이동해야 하는 경우엔 사용될 수 없고, 정적 링크에 적합하다.

🤔 정적 이동이란?

• URL 경로가 고정적으로 결정되어 있어 사용자가 특정 링크를 클릭하면 해당 페이지로 이동하는 상황을 말한다.
• 즉, 사용자의 행동과 무관하게 항상 동일한 경로롤 이동하는 경우이다.

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

✔ㅤuseNavigate

• React Router에서 제공되는 훅으로, 동적 또는 이벤트 기반의 페이지 이동에 사용된다.
• 함수 호출로 페이지를 이동시키기 때문에, 버튼 클릭, 폼 제출 등과 같이 동작이 필요한 경우 유용하다.
• 브라우저 히스토리를 조작하여 페이지를 이동한다.
• 뒤로 가기, 앞으로 가기와 같은 기능도 제공한다.

const navigate = useNavigate();
navigate("/dashboard");

• ⭕ 장점
  • 동적인 조건에 따라 이동 가능하다.
  • 이벤트와 결합하여 유연한 페이지 전환을 처리한다.
• ❌ 단점
  • 단순 이동에는 코드가 다소 복잡할 수 있다.

✔ㅤNavigate 컴포넌트

• 컴포넌트 렌더링을 통해 특정 경로로 이동시킬 때 사용한다.
• 조건부 렌더링과 함께 활용하면 특정 조건을 만족했을 때 경로를 변경할 수 있다.

function PrivateRoute({ isLoggedIn }) {
  if (!isLoggedIn) {
    return <Navigate to="/login" replace />;
  }
  return <h1>Welcome to the private page!</h1>;
}

• ⭕ 장점
  • 조건부 렌더링과 결합하여 페이지 이동 제어가 가능하다.
  • 간단한 리다이렉션 구현이 가능하다.
• ❌ 단점
  • 프로그램적 제어가 필요할 때는 사용이 불편하다.

🤔 프로그램적 제어란?

• 코드로 특정 동작을 논리적으로 결정하거나 실행하도록 제어하는 것을 의미한다.
• React Router에서 프로그램적 제어
  • 사용자의 행동이나 특정 조건에 따라 코드로 이동을 제어하는 경우
  • 예를 들어, 사용자가 로그인하면 /dashboard 로 이동하거나, 인증이 실패하면 /login 으로 리다이렉트 하는 상황

function Login({ isAuthenticated }) {
  const navigate = useNavigate();
  if (isAuthenticated) {
    // 로그인 성공 시 대시보드로 이동
    navigate("/dashboard");
  }
  return <button>Login</button>;
}

🤔 Link와 Navigate는 컴포넌트, useNavigate는 Hook인데 왜 이렇게 나눠졌을까?

📌 Link와 Navigate 의 공통점 (컴포넌트)

• React 컴포넌트는 JSX로 작성되어 DOM에 렌더링 된다.
• 페이지에서 UI 요소처럼 렌더링되며 사용자가 직접 상호작용할 수 있다.

📌 useNavigate 의 특징 (Hook)

• Hook은 컴포넌트 내부에서 상태나 로직을 처리하는 데 사용된다.
• 페이지 이동과 같은 동작을 렌더링과 독립적으로 코드에서 제어할 때 유용하다.

📌 어떻게 구분되었을까?

• 정적 이동이 필요한 경우, UI로 명확히 드러나는 Link나 Navigate가 적합하다.
• 동적 이동이나 이벤트에 따라 이동 경로를 변경할 경우, useNavigate와 같은 함수 기반 제어가 적합하다.

---

Q. 컴포넌트와 훅은 어떻게 구분할까?

✔ㅤ컴포넌트란?

• 화면에 UI를 렌더링하는 단위 이다.
• 주로 JSX로 작성되며, 사용자와 상호작용 할 수 있는 요소로 표현된다.

✔ㅤ훅이란?

• React 컴포넌트에서 상태 관리나 로직을 처리하기 위한 도구 이다.
• UI를 직접 렌더링하지 않고, 컴포넌트 내부에서 동작을 제어하거나 데이터를 제공한다.

---

Q. reducer 함수는 순수 함수여야 한다는 말이 어떤 의미일까?

✔ㅤ순수 함수의 조건

• 동일한 입력 → 동일한 출력 : 동일한 state 와 action 을 입력으로 받으면 항상 동일한 결과를 반환해야 한다.
• 부수 효과가 없어야 한다 : 함수 내부에서 외부 상태(ex. 전역 변수)를 변경하거나, 네트워크 요청 같은 외부 작업을 수행하면 안 된다.
• 기존의 상태를 직접 변경하지 않아야 한다 : reducer는 항상 새로운 상태를 반환하며, 기존 상태 객체를 직접 수정하면 안 된다.

✔ㅤ순수 함수 예시

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 }; // 새로운 상태 반환
    case 'DECREMENT':
      return { ...state, count: state.count - 1 }; // 새로운 상태 반환
    default:
      return state; // 상태를 변경하지 않고 그대로 반환
  }
};

✔ㅤ비순수 함수 예시

const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      state.count += 1; // 기존 상태를 직접 수정 (비순수)
      return state;     // 기존 상태 반환 (새로운 객체 반환 X)
    case 'DECREMENT':
      console.log("Decrementing..."); // 외부 부수효과 발생 (비순수)
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

🤔 왜 이런 순수 함수가 중요한 걸까?

• 예측 가능성 : 동일한 입력에 대해 항상 동일한 출력을 보장하기 때문에 디버깅과 테스트가 쉬워진다.
• 상태 변경 추적 가능 : 기존 상태를 변경하지 않고 새로운 객체를 반환하면, 상태 변경 이력을 추적하거나, 불변성을 유지할 수 있다.
• React 최적화 지원 : React는 상태 객체가 변경될 때 이를 감지하여 컴포넌트를 다시 렌더링한다. 기존 상태를 직접 수정하면 변경을 감지할 수 없으므로, 새로운 상태를 반환해야 한다.

---

Q. React에서 상태가 변경되었는지는 어떻게 판단할까?

"React에서는 상태가 변화되면 리렌더링이 발생하는 데, 어떻게 판단할까?"

✔ㅤ상태 변경을 감지하는 메커니즘

• React는 상태가 변경되었는지 판단하기 위해 객체의 참조를 비교(얕은 비교)한다.
• 새로운 상태를 반환하면 참조가 달라지므로 React는 상태 변경을 감지하여 컴포넌트를 다시 렌더링한다.
• 만약 기존 객체를 직접 수정하면 참조가 같기 때문에 React는 상태가 변경되지 않았다고 판단한다.

🔗 React의 리렌더링 조건

• 상태가 변경되었을 때 (객체의 참조값이 변경됨)
• 부모 컴포넌트에서 전달받은 props가 변경되었을 때
• 강제로 렌더링을 트리거하는 함수가 호출되었을 때 ( ex. forceUpdate()

🤔 얕은 비교란?

• 객체 내부의 값까지 비교하지 않고 참조값만 비교하는 것을 말한다.

---

Q. indexOf와 findIndex의 차이는 뭘까?

"두 메서드 다 배열 요소의 인덱스를 찾는 데 사용되는 데 어떤 차이점이 있을까?"

✔ㅤindexOf

• 특정 값의 첫 번쨰 인덱스를 반환한다.
• 값이 없으면 -1 을 반환한다.
• 직접적인 값 비교를 통해 요소를 찾는다
• 엄격한 동등 비교( === ) 를 사용한다.
• 배열 요소가 원시값 일 때 주로 사용된다.

array.indexOf(searchElement, fromIndex)

• searchElement : 찾고자 하는 값
• fromIndex (선택) : 검색을 시작할 인덱스(기본값: 0)

✔ㅤfindIndex

• 주어진 테스트 함수를 만족하는 첫 번째 요소의 인덱스를 반환한다.
• 만족하는 요소가 없으면 -1 을 반환한다.
• 조건 기반 검색이 가능하다.
• 콜백 함수로 조건을 정의하여 복잡한 로직에 적합하다.
• 객체나 배열 내의 객체를 처리할 때 유용하다.

array.findIndex(callback(element, index, array), thisArg)

• callback : 요소를 테스트하는 함수. true를 반환 하면 해당 요소의 인덱스를 반환
• element : 배열의 각 요소
• index : 현재 요소의 인덱스
• array : 메서드를 호출한 배열
• thisArg (선택) : 콜백 함수에서 this로 사용할 값