TIL 면접스터디 Day8(4/05)

🍴오늘 할 일

• 면접스터디
• 알고리즘 2~3문제

기술면접

순수 함수란 무엇인가요? 불변성과 사이트 이펙트와 연결하여 설명해주세요.

순수 함수는 동일한 인자로 호출될 때마다 항상 동일한 결과를 반환하며, 외부 상태에 영향을 미치지 않는 함수를 말합니다. 즉, 함수 내부에서 어떠한 상태도 변경하지 않으며, 오직 입력값에만 의존하여 결과를 반환합니다.

순수 함수의 가장 큰 특징 중 하나는 불변성(Immutability)입니다. 함수가 불변성을 가지고 있다는 것은 함수가 호출되었을 때 인자로 전달된 값이 변경되지 않는다는 의미입니다. 이는 함수를 호출한 측에서 예측 가능한 동작을 보장할 수 있게 됩니다. 즉, 순수 함수는 호출되는 시점에서의 상태에 따라 결과가 달라질 가능성이 없습니다.

반면, 순수 함수와 반대되는 개념으로 사이드 이펙트(Side Effect)가 있습니다. 사이드 이펙트는 함수가 외부 상태에 영향을 주거나, 함수 내부의 상태를 변경하는 것을 말합니다. 이러한 사이드 이펙트는 예측하기 어렵고, 디버깅도 어려울 수 있으며, 코드를 작성하는 것 자체도 복잡해지게 됩니다.

자바스크립트에서 순수함수를 제작하기 위해서 데이터의 불변성을 유지하는 것이 중요합니다. 함수의 전달인자로 참조 자료형이 전달되는 경우, 해당 객체 자체를 바꿔서 사이드 이펙트를 만들 수 있고, 이는 해당 데이터의 불변성을 손상시킬 수 있습니다. 그래서 배열의 불변성을 보장하는 메서드인 map, filter, reduce 등이 각광을 받게 되었습니다.

함수형 프로그래밍에서는 가능한 한 순수 함수를 작성하고, 사이드 이펙트를 최소화하여 코드의 예측 가능성과 디버깅 용이성을 높이는 것을 지향합니다.

React의 state와 props에 대해서 설명해주세요.

State는 컴포넌트 내부에서 관리되는 데이터를 의미합니다. 이 데이터는 해당 컴포넌트에서만 사용되며, 다른 컴포넌트에서 접근할 수 없습니다. State는 주로 컴포넌트의 상태를 나타내는 값, 예를 들어, 버튼의 활성/비활성 상태, 폼 필드의 값 등을 저장합니다. State는 컴포넌트의 생성자에서 초기화되며, 이후에는 setState() 메소드를 사용하여 업데이트할 수 있습니다.

Props는 컴포넌트 외부에서 전달되는 속성을 의미합니다. Props는 부모 컴포넌트로부터 전달받으며, 해당 컴포넌트 내에서 변경할 수 없습니다. Props는 일반적으로 컴포넌트에서 사용되는 데이터, 예를 들어, 사용자 이름, 제목 등을 포함합니다. Props는 부모 컴포넌트에서 전달할 때 값이 변경될 수 있으며, 이로 인해 하위 컴포넌트의 렌더링이 변경됩니다.

React에서 state와 props는 컴포넌트의 라이프 사이클에 맞게 업데이트됩니다. 이를 통해 React는 컴포넌트의 렌더링을 최적화하고 성능을 향상시킵니다. 또한, React에서는 state와 props를 통해 컴포넌트 간에 데이터를 전달하고, 컴포넌트를 재사용할 수 있는 유연한 방법을 제공합니다.

React 컴포넌트의 key 속성에 대해서 설명해주세요.

React에서 컴포넌트를 렌더링할 때, 각 컴포넌트를 구분하는 유일한 식별자가 필요합니다. 이를 위해 React에서는 key 속성을 제공합니다.
이를 통해 React는 변화를 최소화하면서 효율적인 업데이트를 수행할 수 있습니다.

예를 들어, 동적으로 생성되는 리스트 컴포넌트를 생각해보겠습니다. 이 리스트 컴포넌트에서 각 항목을 식별할 수 있는 유일한 값이 필요합니다. 이때, key 속성을 사용하여 각 항목을 식별할 수 있습니다.

Key 속성은 React에서 컴포넌트를 렌더링할 때 매우 중요한 역할을 합니다. 따라서, key 속성을 사용할 때에는 고유한 값을 사용해야 하며, 변하지 않는 값이어야 합니다. 또한, key 속성은 컴포넌트의 라이프사이클에 영향을 주지 않으므로, 컴포넌트 내부에서 사용되지 않아야 합니다.

useEffect란 무엇인가요

React에서 useEffect는 함수형 컴포넌트에서 부수 효과(side effect)를 처리하기 위한 Hook 중 하나입니다. 부수 효과란 컴포넌트 외부와 상호작용하여 발생하는 효과를 말합니다. 예를 들면, API 호출, DOM 조작, 타이머 설정 등이 부수 효과의 예시입니다.

useEffect는 컴포넌트가 렌더링될 때마다 실행되며, 기본적으로 컴포넌트가 최초로 렌더링될 때와 컴포넌트가 언마운트(unmount)될 때 실행됩니다. 그리고, useEffect의 dependency 배열(dependency array)에 의존성을 명시하면 해당 의존성이 변경될 때마다 useEffect가 실행됩니다.

useEffect의 첫 번째 인자로 콜백 함수를 전달하며, 이 콜백 함수에서 부수 효과 코드를 작성합니다.

두 번째 인자로 dependency 배열을 전달합니다. 이 배열에 명시된 의존성이 변경될 때마다 useEffect가 실행됩니다. 의존성이 없다면, 두 번째 인자를 생략할 수 있습니다. 의존성 배열이 빈 배열인 경우, 컴포넌트가 최초로 렌더링될 때에만 useEffect가 실행됩니다.

react를 선택한 이유

React는 인기있는 자바스크립트 라이브러리 중 하나이며, 다음과 같은 이유로 선택될 수 있습니다.

가상 DOM: React는 가상 DOM 기술을 사용하여 성능을 향상시킵니다. 이것은 실제 DOM 요소를 직접 조작하지 않고도 화면을 업데이트할 수 있도록 합니다.

컴포넌트 기반: React는 컴포넌트 기반 아키텍처를 사용하여 개발자가 재사용 가능한 UI 구성 요소를 만들 수 있도록 합니다.

유연성: React는 React Native를 통해 네이티브 앱을 만들 수 있는 기능도 제공합니다. 또한, React는 다른 라이브러리와 함께 사용할 수 있으며, 다양한 상태 관리 라이브러리와 함께 사용할 수 있습니다.

커뮤니티: React는 Facebook에서 개발되었으며, 많은 개발자들이 사용하고 있습니다. 이에 따라, 많은 지원과 자료를 찾을 수 있습니다.

학습 곡선: React는 다른 라이브러리나 프레임워크보다 학습 곡선이 상대적으로 낮습니다. 이는 React를 선택한 개발자가 빠르게 적응할 수 있도록 도와줍니다.

상태 관리: React는 기본적으로 상태를 관리하는 방법을 제공하지 않습니다. 개발자는 Redux, MobX, Context API 등과 같은 상태 관리 라이브러리를 사용해야 합니다.

다른 프레임워크와의 차이점은 이러한 특징들에 있습니다. 예를 들어, Angular는 양방향 데이터 바인딩을 사용하고, Vue.js는 템플릿 기반 문법을 사용합니다.

Redux, MobX, Context API 등과 같은 상태 관리 라이브러리의 차이점

Redux, MobX, Context API 등은 모두 React와 함께 사용되는 상태 관리 라이브러리입니다. 그러나 이들은 다음과 같은 차이점이 있습니다.

Redux: Redux는 가장 유명하고 널리 사용되는 상태 관리 라이브러리 중 하나입니다.
1. 상태를 불변 객체로 관리하며, 상태 변경 시에는 새로운 상태를 반환합니다.
2. Redux는 단방향 데이터 흐름 패턴을 따르며, 액션(Action)을 통해 상태를 변경합니다.
3. 미들웨어(Middleware)를 사용하여 비동기 작업을 처리할 수 있습니다.

MobX: MobX는 React와 함께 사용되는 상태 관리 라이브러리로, 상태를 관찰하고 자동으로 업데이트합니다. 이는 양방향 데이터 바인딩을 사용하여 구현됩니다. MobX는 불필요한 렌더링을 최소화하여 성능을 향상시킵니다.

Context API: Context API는 React의 공식 상태 관리 기능 중 하나입니다. Context API는 전역으로 상태를 관리할 수 있도록 합니다. 이는 React 컴포넌트 트리 내에서 데이터를 상위 컴포넌트에서 하위 컴포넌트로 전달하는 것보다 효율적입니다. Context API는 Redux나 MobX와 같은 라이브러리보다는 상대적으로 쉽게 사용할 수 있습니다.

이러한 차이점을 고려하여, 개발자는 프로젝트 요구 사항에 가장 적합한 상태 관리 라이브러리를 선택할 수 있습니다.

react hook들 (useEffect, useState, useCallback, useMemo)

React Hooks는 React 16.8 버전에서 소개된 기능으로, 함수형 컴포넌트에서도 상태를 관리하고, 라이프사이클 메서드를 호출하고, 컴포넌트 간 상태를 공유하는 등의 작업을 할 수 있도록 합니다. 여기서는 대표적인 React Hooks 중 몇 가지를 살펴보겠습니다.

useState
useState는 가장 기본적인 Hook 중 하나로, 상태 값을 관리할 때 사용합니다. useState Hook은 배열 형태로 상태 값과 그 값을 업데이트할 수 있는 함수가 반환됩니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

javascript
Copy code
import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect
useEffect Hook은 컴포넌트가 렌더링되거나 업데이트된 후에 특정 작업을 수행할 때 사용합니다. 이 Hook은 두 개의 인자를 받습니다. 첫 번째 인자로는 작업을 수행할 함수를, 두 번째 인자로는 의존성 배열(deps)을 전달합니다. useEffect Hook은 컴포넌트가 처음 마운트될 때와 deps가 변경될 때마다 실행됩니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

javascript
Copy code
import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useCallback
useCallback Hook은 메모이제이션된 콜백 함수를 반환합니다. 이 Hook은 컴포넌트가 렌더링될 때마다 함수가 새로 생성되는 것을 방지하여 성능을 최적화합니다. 예를 들어, 다음과 같이 사용할 수 있습니다.

javascript
Copy code
import React, { useCallback } from 'react';

function Example({ onClick }) {
  const handleClick = useCallback(() => {
    onClick();
  }, [onClick]);

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

useMemo
useMemo Hook은 계산된 값을 캐시하여 성능을 최적화합니다. 이 Hook은 두 개의 인자를 받습니다. 첫 번째 인자로는 계산할 함수를, 두 번째 인자로는 의존성 배열을 전달합니다. useMemo Hook은 deps가 변경될 때마다 함수를 실행하여 값을 반환합니다.

react hook들 (useEffect, useState, useCallback, useMemo)와 클로저와의 관계

React Hook들과 클로저는 밀접한 관계가 있습니다. React 컴포넌트 내부에서 Hook들을 사용할 때, 이 Hook들은 컴포넌트 함수 내부에 정의된 클로저를 활용합니다.

useState Hook은 컴포넌트 함수 내부에 새로운 변수를 선언하고, 이 변수를 클로저에 저장합니다. useState Hook으로 생성된 상태 변수는 이 변수를 갱신하는 함수(setState 함수)를 반환하며, 이 함수는 클로저에 저장된 상태 변수를 갱신합니다.

useEffect Hook도 마찬가지로 컴포넌트 함수 내부에 정의된 클로저를 사용합니다. useEffect Hook은 의존성 배열로 전달받은 값들과 함께 클로저를 생성하고, 이 클로저를 이용하여 이펙트 함수를 호출합니다. 이 클로저에는 이펙트 함수에서 참조하는 외부 변수들이 포함되어 있습니다.

useCallback과 useMemo Hook은 마찬가지로 클로저를 사용합니다. useCallback Hook은 생성된 콜백 함수를 메모이제이션하고, useMemo Hook은 계산된 값을 메모이제이션합니다. 이때 생성된 함수나 값을 클로저에 저장하고, 이를 이용하여 이후에 재사용합니다.

따라서 React Hook들은 클로저를 활용하여 컴포넌트 함수 내부에서 상태와 부수효과를 관리할 수 있도록 도와줍니다. 클로저를 활용하면 상태와 부수효과에 대한 코드를 간결하고 가독성 좋게 작성할 수 있습니다.