JavaScript 프레임워크 주니어 기술면접

useEffect는 컴포넌트가 렌더링된 후에 실행되며, 의존성 배열의 값에 따라 다른 생명주기를 대체합니다. 빈 배열을 전달하면 componentDidMount처럼 마운트 시 한 번만 실행되고, 의존성 배열에 값이 있으면 componentDidUpdate처럼 해당 값이 변경될 때마다 실행됩니다. cleanup 함수를 반환하면 componentWillUnmount처럼 언마운트 시 실행되며, 의존성이 있는 경우 다음 effect 실행 전에도 cleanup이 실행됩니다. 클래스형 컴포넌트와 달리 useEffect는 여러 개를 선언하여 관심사를 분리할 수 있다는 장점이 있습니다.

useMemo는 계산 비용이 높은 값을 메모이제이션하여 의존성이 변경되지 않으면 이전 값을 재사용하고, useCallback은 함수 자체를 메모이제이션하여 동일한 함수 참조를 유지합니다. useMemo는 복잡한 계산이나 데이터 변환 결과를 캐싱할 때 사용하며, useCallback은 자식 컴포넌트에 props로 전달되는 함수가 재생성되어 불필요한 리렌더링을 유발하는 것을 방지할 때 사용합니다. 두 Hook 모두 의존성 배열을 받으며, 배열의 값이 변경될 때만 재계산하거나 함수를 재생성합니다. 과도한 사용은 오히려 메모리 사용량을 증가시킬 수 있으므로 실제 성능 문제가 있을 때만 사용하는 것이 좋습니다.

computed는 다른 반응형 데이터를 기반으로 계산된 값을 반환하며 캐싱되어 의존하는 데이터가 변경될 때만 재계산됩니다. watch는 특정 데이터의 변경을 감지하여 사이드 이펙트를 수행할 때 사용하며 캐싱되지 않습니다. computed는 여러 데이터를 조합한 값이나 필터링된 리스트처럼 선언적으로 값을 도출할 때 사용하고, watch는 API 호출, 로컬 스토리지 저장, 외부 라이브러리 업데이트 같은 비동기 작업이나 부수 효과가 필요할 때 사용합니다. computed는 getter만 있는 읽기 전용이 기본이지만 setter를 추가할 수 있으며, watch는 이전 값과 새 값을 모두 받을 수 있습니다.

useReducer는 복잡한 상태 로직을 다룰 때, 여러 하위 값을 포함하는 상태 객체를 관리할 때, 다음 상태가 이전 상태에 의존적일 때 useState보다 유리합니다. useReducer는 현재 상태와 액션을 받아 새로운 상태를 반환하는 reducer 함수와 초기 상태를 인자로 받으며, state와 dispatch 함수를 반환합니다. dispatch에 액션 객체를 전달하면 reducer 함수가 실행되어 상태를 업데이트하며, 이는 Redux와 유사한 패턴입니다. 상태 업데이트 로직을 컴포넌트 외부로 분리할 수 있어 테스트가 용이하고, 여러 컴포넌트에서 동일한 reducer를 재사용할 수 있습니다.

Vue에서 부모 컴포넌트는 props를 통해 자식 컴포넌트에게 데이터를 전달하며, 자식은 props 옵션에 받을 데이터를 선언하여 사용합니다. props는 단방향 데이터 흐름을 따르므로 자식 컴포넌트에서 직접 수정할 수 없으며, 읽기 전용으로 사용해야 합니다. 자식 컴포넌트에서 부모로 데이터를 전달하거나 이벤트를 알릴 때는 $emit 메서드를 사용하여 커스텀 이벤트를 발생시키고, 부모는 v-on 디렉티브로 해당 이벤트를 리스닝합니다. 이러한 단방향 데이터 흐름은 데이터의 흐름을 예측 가능하게 만들어 디버깅을 쉽게 합니다.

key는 React가 리스트의 어떤 항목이 변경, 추가, 삭제되었는지 식별하는 데 사용되며, Virtual DOM의 재조정 알고리즘을 효율적으로 만듭니다. key는 형제 요소 사이에서 고유해야 하며, 안정적이고 예측 가능하며 고유한 값을 사용해야 합니다. 배열의 인덱스를 key로 사용하면 항목의 순서가 바뀌거나 중간에 삽입/삭제될 때 모든 항목이 다시 렌더링되거나 잘못된 컴포넌트 상태가 유지되는 문제가 발생합니다. 예를 들어 입력 필드가 있는 리스트에서 항목을 삭제하면 인덱스가 재배치되어 다른 항목의 입력값이 남아있는 버그가 발생할 수 있습니다. 따라서 데이터의 고유 ID나 안정적인 식별자를 key로 사용해야 합니다.

Next.js는 pages 디렉토리 내의 파일 구조를 기반으로 자동으로 라우팅을 생성하며, 파일명이 URL 경로가 됩니다. 예를 들어 pages/about.js는 /about 경로로, pages/blog/index.js는 /blog 경로로 접근할 수 있습니다. 동적 라우트는 대괄호를 사용하여 생성하며, pages/posts/[id].js는 /posts/1, /posts/2 같은 경로를 처리합니다. useRouter Hook이나 getStaticProps, getServerSideProps의 params를 통해 동적 파라미터에 접근할 수 있으며, [...slug].js 형식으로 catch-all 라우트도 생성 가능합니다. 이러한 파일 기반 라우팅은 별도의 라우팅 설정 없이 직관적으로 페이지를 구성할 수 있게 합니다.