면접으로 돌아보는 프론트엔드 기본

리액트의 라이프 사이클?

리액트의 라이프 사이클(React Life Cycle)은 클래스 컴포넌트에서만 존재하며, 함수 컴포넌트에서는 이를 모방한 useEffect()훅이 존재하여 유사한 동작을 구현할 수 있다.

마운트(Mount)

컴포넌트가 처음 DOM에 삽입될 때 호출된다.

주요 메서드

• constructor(): 컴포넌트를 초기화할 때 호출된다. 초기 state를 설정하거나 인스턴스에 바인딩할 때 사용되며 컴포넌트가 만들어지면 가장 먼저 실행된다.
• static getDerivedStateFromProps(props, state): props로 받아온 것을 state에 넣어주고 싶을 때 사용된다. 렌더링 전에 호출된다.
• render(): JSX를 반환하여 UI를 렌더링한다.
• componentDidMount(): 컴포넌트가 DOM에 마운트된 직후에 호출된다. 여기서 DOM을 사용해야하는 외부 라이브러리를 연결하거나, AJAX 요청이나 DOM 조작을 할 수 있다.

업데이트(Update)

컴포넌트의 props나 state가 변경될 때 호출된다.

주요 메서드

• static getDerivedStateFromProps(props, state): props에서 state를 갱신해야 할 때 사용된다. 즉, props나 state가 바뀌었을 때도 이 메서드가 사용된다. (마운팅과 업데이트 모두에서 호출된다)
• shouldComponentUpdate(nextProps, nextState): 컴포넌트가 리렌더링할지 여부를 결정한다. 성능 최적화에 사용된다. React.memo의 역할과 유사하다.
• render(): JSX를 반환하여 UI를 렌더링한다.
• getSnapshotBeforeUpdate(prevProps, prevState): DOM이 업데이트되기 직전에 호출된다. 갱신 전의 DOM 상태를 캡처하여 componentDidUpdate로 전달할 수 있다.
• componentDidUpdate(prevProps, prevState, snapshot): 컴포넌트가 업데이트된 직후에 호출된다. 이전 props나 state와 비교하여 추가 작업을 수행할 수 있다.

언마운트(Unmount)

컴포넌트가 DOM에서 제거될 때 호출된다.

주요 메서드

• componentWillUnmount(): 컴포넌트가 DOM에서 제거되기 전에 호출된다. 여기서 타이머를 정리하거나 구독을 해제하는 등의 작업을 수행한다.

(추가) useEffect() Hook

엄밀히 말하면, 함수 컴포넌트에는 클래스 컴포넌트에서처럼 명시적인 라이프사이클 메서드가 없다. 대신, useEffect 훅을 통해 라이프사이클과 유사한 동작을 구현할 수 있습니다. useEffect 훅은 컴포넌트가 마운트, 업데이트, 언마운트될 때 특정 작업을 수행할 수 있게 해준다.

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    // 마운트 및 업데이트 시 실행
    console.log('컴포넌트가 마운트되었거나 업데이트되었습니다.');

    // 언마운트 시 실행
    return () => {
      console.log('컴포넌트가 언마운트될 예정입니다.');
    };
  }, [count]); // count가 변경될 때마다 useEffect 실행

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

마운트(Mount)

useEffect 훅의 첫 번째 인수로 제공된 함수는 컴포넌트가 처음 렌더링될 때 실행된다. 이는 클래스형 컴포넌트의 componentDidMount에 해당한다.

업데이트(Update)

useEffect 훅은 의존성 배열에 지정된 값들이 변경될 때마다 실행된다. 이는 클래스형 컴포넌트의 componentDidUpdate에 해당한다.

언마운트(Unmount)

useEffect 훅 내에서 반환된 함수는 컴포넌트가 언마운트되기 직전에 실행된다. 이는 클래스형 컴포넌트의 componentWillUnmount에 해당한다.

Window와 Document의 차이는?

Window

• 브라우저 창 전체(DOM 문서를 담은 창)를 나타낸다.
• 전역 객체로, 브라우저에 의해 자동으로 생성된다.
• 브라우저 창 또는 탭 자체를 제어할 수 있는 다양한 메서드와 속성을 포함한다.
  예를 들어, window.location, window.localStorage 등
• 전역 범위에서 선언된 모든 변수와 함수는 window 객체의 속성과 메서드가 된다.

Document

• 웹 페이지의 콘텐츠를 나타낸다.
• DOM(Document Object Model)의 루트 객체로, HTML 문서의 구조와 콘텐츠를 다룬다.
• 웹 페이지의 요소들을 생성, 수정, 삭제할 수 있는 메서드와 속성을 포함한다.

Array.prototype.reduce() 는 어떻게 동작하는가?

reduce() 메서드는 배열의 값을 하나로 줄이는(reduce) 함수이다. 이 메서드는 배열의 각 요소에 대해 제공된 콜백 함수를 실행하고, 그 결과를 누적하여 단일 값으로 반환한다.
reduce() 메서드는 배열의 모든 요소를 처리할 때까지 계속해서 이 콜백 함수를 호출합니다.

// Array.prototype.reduce() 구문
arr.reduce(callback[, initialValue])

• callback : 배열의 각 요소에 대해 실행할 함수이다. 다음과 같은 네 가지 인수를 가진다.

  • accumulator : 콜백 함수의 반환값을 누적한다. 초기값이 제공된 경우, 그 값을 초기값으로 사용한다. 그렇지 않으면 배열의 첫 번째 요소를 초기값으로 사용한다.
  • currentValue : 현재 처리 중인 배열 요소
  • currentIndex(optional) : 현재 처리 중인 배열 요소의 인덱스. 초기값이 제공된 경우, 0부터 시작하고 그렇지 않으면 1부터 시작한다.
  • array(optional) : reduce()를 호출한 배열

• initailValue(optional) : 콜백 함수의 최초 호출에서 첫 번째 인수로 사용되는 값. 초기값이 제공되지 않으면 배열의 첫 번째 요소가 초기값으로 사용된다.

동작 원리

[0, 1, 2, 3, 4].reduce(function (
  accumulator,
  currentValue,
  currentIndex,
  array,
) {
  return accumulator + currentValue;
}, 10);

Object.entries()가 반환하는 값은?

Object.entries() 메서드는 주어진 객체의 열거 가능한 속성(key-value 쌍)을 배열 형태로 반환한다. 반환된 배열은 각 속성이 [key, value] 형태의 배열로 구성된 배열이다. Python의 dict.items()와 유사하다.

// Object.entries() 구문
Object.entries(obj);

// Object.entries() 사용 예시
const obj = {
  name: 'Alice',
  age: 25,
  city: 'Wonderland'
};

for (const [key, value] of Object.entries(obj)) {
  console.log(`${key}: ${value}`);
}
// name: Alice
// age: 25
// city: Wonderland

참고
State and Lifecycle
벨로퍼트와 함께하는 모던 리액트
Difference between Document vs. Window Object in JavaScript
MDN - Array.prototype.reduce()
MDN - Object.entries()