React

1. React를 왜 쓸까?

• React는 UI를 효율적으로 만들고 관리하기 위한 라이브러리입니다.
  기존에는 DOM을 직접 조작해야 해서 코드가 복잡하고 성능이 떨어졌지만, React는 Virtual DOM을 통해 변경된 부분만 효율적으로 업데이트하여 렌더링 성능을 높입니다. 또한 컴포넌트 기반 구조 덕분에 코드의 재사용성과 유지보수성이 뛰어나며, 상태 변화에 따라 UI가 자동으로 갱신되는 선언적인 방식으로 개발할 수 있습니다. 즉, React를 사용하면 복잡한 UI를 구조적으로 관리하면서도 빠르고 일관된 사용자 경험을 제공할 수 있습니다.

2. Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해주세요.

• Virtual DOM은 실제 DOM을 추상화한 가상 객체 모델로, 브라우저의 DOM조작을작을 최소화해 렌더링 성능을 최적화합니다. React는 상태가 변경되면 새로운 Virtual DOM을 만들고, 이전 Virtual DOM과 비교한 뒤 바뀐 부분만 실제 DOM에 반영합니다. 이런 구조 덕분에 효율적인 업데이트가 가능하고, 복잡한 UI에서도 빠른 렌더링을 유지할 수 있습니다.

3. React에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해주세요.

• React에서 key는 Virtual Dom의 비교 과정에서 각 요소를 식별하기 위해 사용됩니다. key가 있어야 React에서 어떤 요소가 변경되었는지 효율적으로 비교하고, 불필요한 재렌더링 없이 변경된 부분만 업데이트 할 수 있습니다. key가 없거나 index를 사용할 경우, 요소의 순서가 바뀌면 state가 꼬이거나 예기치 않은 UI 오류가 생길 수 있습니다.

4. React 생명주기에 대해 설명해주세요.

• React 생명주기는 컴포넌트가 생성되고, 업데이트되고, 제거되는 일련의 과정을 말합니다. 마운트 시에는 DOM이 처음 생성되고, 업데이트 시에는 state나 props 변경으로 리렌더링이 일어나며 언마운트 시에는 컴포넌트가화면에서 사라지면서 리소스 정리를 합니다. 함수형에서는 useEffet를 사용해 이 과정을 동일하게 처리할 수 있습니다.

5. React의 리렌더링은 언제 발생하나요?

• React의 리렌더링은 컴포넌트의 state, props, 또는 context 값이 변경될 때 발생합니다. 또한 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 함께 리렌더링될 수 있습니다. 이런 변경이 발생하면 React는 컴포넌트를 다시 렌더링해 새로운 Virtual DOM을 만들고, 이전 Virtual DOM과 비교(diffing)하여 바뀐 부분만 실제 DOM에 반영합니다. 반면, 값이 동일하게 유지되거나 props가 변하지 않은 경우, React.memo를 사용해 불필요한 리렌더링을 방지할 수 있습니다.

6. useEffect의 의존성 배열이 빈 경우와 특정 값이 있는 경우의 차이점을 설명하세요.

• useEffect의 의존성 배열이 빈 경우에는 컴포넌트가 처음 마운트될 때 한 번만 실행되고, 이후에는 다시 실행되지 않습니다. 반면 특정 값이 있는 경우, 해당 값이 변경될 때마다 useEffect가 재실행됩니다. 마지막으로 의존성 배열을 생략한 경우, 컴포넌트가 리렌더링될 때마다 매번 실행됩니다.

7. React Hook을 사용할 때 주의할 점은 무엇인가요?

• React Hook은 호출 순서에 의존하기 때문에 몇 가지 중요한 규칙을 반드시 지켜야 합니다. 첫째, Hook은 컴포넌트의 최상위에서만 호출해야 하며, 조건문이나 반복문, 내부 함수 안에서는 호출할 수 없습니다. 둘째, React 함수 컴포넌트나 커스텀 훅 내부에서만 사용할 수 있습니다. 셋째, useEffect나 useCallback 같은 훅에서는 의존성 배열을 정확하게 관리해야 합니다. 이러한 규칙을 지키지 않으면 React가 상태를 올바르게 추적하지 못해 렌더링 오류나 상태 불일치 문제가 발생할 수 있습니다.

8. state를 사용하지 않고 useState를 이용하는 이유는?

• React에서 useState를 사용하는 이유는 상태 변화에 따라 컴포넌트를 자동으로 리렌더링하기 위해서입니다. 만약 일반 변수만 사용한다면 값이 바뀌어도 React는 그 변화를 감지하지 못해서 화면이 업데이트되지 않습니다.
  반면 useState를 사용하면 React가 해당 값을 상태로 추적하고, 값이 변경될 때마다 자동으로 컴포넌트를 리렌더링해 UI와 데이터가 항상 동기화되도록 유지합니다. 즉, useState는 값을 저장하는 것뿐 아니라 React가 상태 변화를 인식하고 UI를 갱신할 수 있게 해주는 메커니즘입니다.

9. 상태값(State) & 속성값(Props)

• React에서 Props와 State는 모두 컴포넌트의 데이터를 관리하지만, Props는 부모 컴포넌트가 자식에게 전달하는 읽기 전용 데이터이고, State는 컴포넌트 내부에서 직접 관리하고 변경할 수 있는 상태값입니다. Props는 외부로부터 주어지는 데이터라 수정할 수 없지만, State는 값이 바뀌면 리렌더링을 유발해 컴포넌트의 동적 변화를 처리합니다. 그래서 Props는 전달용 데이터, State는 내부 상태관리용 데이터라고 생각합니다.

10. React에서 useEffect와 useLayoutEffect의 차이점은 무엇인가요?

• useEffect와 useLayoutEffect는 모두 렌더링 이후 실행되는 훅이지만 실행 시점이 다릅니다. useEffect는 브라우저가 화면을 그린 뒤 비동기적으로 실행되기 때문에 렌더링을 막지 않습니다.
  반면, useLayoutEffect는 DOM이 변경된 직후, 브라우저가 화면을 그리기 전에 동기적으로 실행됩니다. 따라서 UI가 눈에 보이기 전에 DOM을 측정하거나 스타일을 조정해야 하는 경우 useLayoutEffect를 사용하고,
  일반적인 부수 효과 작업(fetch, 이벤트 등록 등)에는 성능에 유리한 useEffect를 사용합니다