1. 리액트에 대해 설명해주세요.

React는 View를 만들기위한 자바스크립트 라이브러리입니다.

리액트에서 화면을 그릴 때 컴포넌트라는 단위로 구성되며, 컴포넌트를 조합해 복잡한 UI를 구성할 수 있습니다.

컴포넌트 내부적으로 상태를 관리하며 상태가 변경됨에 따라 효율적으로 변경된 컴포넌트만 렌더링시킬 수 있습니다.

2. Virtual DOM에 동작 원리에 대해 설명해주세요.

리액트는 두 개의 가상돔 객체를 가지고 있습니다.

하나는 렌더링 이전 화면 구조, 하나는 렌더링 이후 보이게 될 화면 구조의 가상돔을 가지고 있습니다.

리액트의 상태가 변경될 때마다 리렌더링이 발생하고 이 시점에 새로운 가상돔을 생성하여 이전 가상돔과 비교를 합니다.

비교를 통해 변경된 요소만 실제 DOM에 적용하게 되고 이러한 과정을 Reconciliation(재조정)이라고 합니다.

3. JSX에 대해 설명해주세요.

JSX는 자바스크립트 확장된 문법이며, 가독성이 좋고 컴포넌트는 일반 HTML 태그와 같은 형식으로 사용할 수 있습니다.

4. AND 연산자와 OR 연산자의 동작 원리에 대해 설명해주세요.

AND 연산자는 두 값이 true일 때 true를 반환합니다.

첫 번째 값이 true여도 아직 AND 연산자는 true 반환하는지 알 수 없습니다.

따라서 두 번째 값 여부에 따라 true가 정해지게 됩니다.

주로 조건부 렌더링할 때 사용됩니다.

OR 연산자는 하나의 값만 true이면 true를 반환합니다.

만약 첫 번째 값이 true면 두 번째 값은 확인하지도 않고 true를 반환합니다.

그래서 주로 null, undefined 값일 때 렌더링 시키고 싶은 값으로 사용됩니다.

5. 제어 컴포넌트 사용 시 문제점과 이를 해결하려면 어떻게 해야하나요?

제어 컴포넌트를 사용하게 되면 사용자가 입력한 모든 데이터가 동기화 되게 되는데 이는 불필요한 값도 렌더링이 될 수 있으며, 자원 낭비에 문제가 될 수 있습니다.

이를 해결하기 위해서는 쓰로틀링과 디바운싱 방식이 있고 쓰로틀링은 마지막에 호출된 함수는 일정 시간이 지나기 전까지 다시 호출되지 않습니다.

디바운싱은 연이어 호출되는 함수 중 마지막 함수 또는 맨 처음 함수만 호출되도록 하는 방법입니다.

6. ref와 state의 차이점은 무엇인가요?

가장 큰 차이점은 리렌더링 유무라고 생각합니다. state는 변경이되면 리렌더링이 발생하게 되는데, ref는 변경이되어도 리렌더링이 발생하지 않습니다.

7. Automatic Batching에 대해 설명해주세요.

React 18에서 createRoot로 변경되면서 Automatic Batching이 도입되었습니다. Automatic Batching은 여러 state가 하나의 로직 안에서 변경이 될 경우 여러번 리렌더링이 되는 것이 아니라 하나로 그룹화시켜 한 번만 리렌더링이 되도록 처리하는 것을 의미합니다.

이를 사용하므로써 불필요한 리렌더링을 줄이고, 성능을 향상 시켜 React 앱을 빠르게 실행할 수 있도록 해줍니다.

8. Automatic Batching 동작 방식에 대해 설명해주세요.

setter에는 2가지 방식으로 값을 전달할 수 있습니다.

하나는 값만 전달하는 것이고 하나는 업데이터 함수로 전달하는 것입니다.

둘의 차이로 값만 전달했을 때는 전달한 값으로 대체가 되고, 업데이터 함수로 전달했을 때는 이전 값에 접근하여 새로운 값으로 반환하도록 동작시킵니다.

setter에서 전달된 값은 바로 동작하지 않고 Automatic Batching을 수행하기 위해 react queue로 전달되고, 더이상 실행할 setter 없을 경우 react queue에 있는 값들을 실행하게되고 한 번만 리렌더링하여 변경된 값을 반영하게 됩니다.