[React 면접대비]

🎃 Immer가 무엇이며, Immer를 사용하지 않고 불변성을 유지하는 다른 방법은 무엇인가요?

구조가 복잡한 객체도 매우 쉽고 짧은 코드를 사용해 불변성을 유지하며 업데이트할 수 있게 해주는 라이브러리입니다. immer는 객체를 직접 변경하지 않고 original data(base_)를 그대로 두고, copy data(copy_)를 생성하고 변경하는 동작을 진행합니다.
(immer의 produce 함수가 불변성 유지 작업을 대신해주면서 새로운 상태를 생성해주므로, 불변성을 유지하며 원하는 값만 업데이트할 수 있습니다.) 변경한 객체는 modified flag를 true로 바꿔 root tree에서 leaf tree까지 순회할 수 있도록 합니다.변경이 완료된 뒤 modifed flag를 확인해서 변경된 객체들만 copy data를 사용하고 변경되지 않은 객체들은 original data를 사용해 합성하는 과정을 진행합니다.

 

immer를 사용하지 않으면 불변성을 유지하기 위해  전개 연산자(...)와 concat, filter, map과 같이 원본을 해치지 않는 배열의 내장 함수 사용해 배열 또는 객체를 복사해주어야 합니다. 이는 객체의 구조가  깊어지면 하나의 값을 업데이트하는 데에도 전개 연산자를 여러 번 사용해 코드가 매우 길어진다는 단점이 있습니다.

 

출처)

https://corner-ds.tistory.com/75

https://hmos.dev/deep-dive-to-immer

 

 

🎃 리액트는 라이브러리인가요? 프레임워크인가요?그 이유는 무엇인가요?

리액트는 사용자 인터페이스를 만들기 위한 JS 라이브러리입니다.

프레임 워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 갖고 있는 것을 말하고, 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것을 말합니다.

리액트는 전적으로 UI를 렌더링 하는 데에 관여하기 때문에 라이브러리입니다. 라우팅, 상태관리, 빌드, 테스팅을 위해선 각각 react-router-dom, redux, webpack, eslint등을 사용하기 때문에 프레임워크라 부를 수 없습니다.

리액트는 흐름을 제어할 수 있다는 점에서 라이브러리입니다.

 

🎃 리액트를 적용한 페이지는 바닐라 자바스크립트보다 속도가 빠른가요? 이유를 함께 말씀해주세요!

무엇이 더 빠르다고 단정지을 수 없습니다.

리액트는 가상 DOM(Virtual DOM)을 사용하여 UI 업데이트를 최적화하고, 컴포넌트 기반 아키텍처를 통해 코드를 구성할 수 있도록 해줍니다. 이로 인해 리액트는 큰 규모의 애플리케이션에서 UI 업데이트를 효율적으로 처리할 수 있습니다. 리액트 적용 페이지의 속도를 빠르게 하기 위해선 reactMemo & useCallback & useMemo 등을 적절하게 활용해 컴포넌트들의 렌더링을 최적화 시키는 과정이 필요합니다.

리액트는 로딩될 때 가상 DOM을 초기화하고 컴포넌트를 렌더링하기 위한 초기 설정 작업이 필요해서 추가적인 오버헤드가 발생할 수 있으므로 작은 규모의 애플리케이션에서는 바닐라 자바스크립트가 더 간단하고 빠를 수 있습니다

 

'리액트는 초기 로딩 시에 추가적인 오버헤드가 발생할 수 있으며' 에 대한 추가설명

리액트 애플리케이션이 로딩되면, 가상 DOM을 초기화하고 컴포넌트를 렌더링하기 위한 초기 설정 작업이 필요합니다. 이로 인해 바닐라 자바스크립트로 작성된 간단한 페이지에 비해 초기 로딩 속도가 느릴 수 있습니다.

이러한 오버헤드는 코드 스플리팅과 같은 기술을 통해 필요한 자원을 더 효율적으로 관리하고 로딩시간을 최적화함으로써 극복할 수 있습니다.

 

🎃 state가 변경될 시 컴포넌트가 렌더링 되는 과정을 설명해주세요.

우선, setState 또는 useState 훅을 통해 state가 변경됩니다. 상태가 변경되면 컴포넌트의 render메소드가 호출됩니다.

클래스 기반 컴포넌트에서는 render() 메소드로, 함수형 컴포넌트에선 함수 자체가 렌더링 역할을 합니다.

다음으로 가상 DOM이 생성됩니다. 가상 DOM은 현재 상태를 기반으로 UI를 표현하는 가상의 트리 구조입니다.

생성된 가상DOM을 이전 렌더링에서 생성된 가상 DOM과 비교하여 어떤 부분이 변경되었는지를 파악합니다.

그리고 변경된 부분만 실제 DOM에 적용됙, DOM 업데이트가 완료되면 렌더링 프로세스가 종료됩니다. 

 

 

🎃 리액트에서 state변이를 권장하지 않는 이유는 무엇인가요?

1. 디버깅
 : 렌더링 사이에 state가 어떻게 변경되었는지 명확하게 확인 가능

2. 최적화

 : state를 변이하지 않으면 변경이 있었는지 여부를 확인하는 것이 매우 빨라 최적화할 수 있음.

3. 새로운 기능을 활용하기 위해

 : react는 state가 스냅샷처럼 취급되는 것을 기반으로 새로운 기능을 만들기 때문

4. 요구사항 변경

 : 추가적인 기능을 구현해야할 때 유용.(ex. 실행 취소/ 다시 실행, 변경 내역 표시 등)
   복사본을 메모리에 보관하고 필요할 때 재사용할 수 있기 때문!

5. 더 간단한 구현

 : 많은 “반응형” 솔루션처럼 프로퍼티를 가로채거나, 항상 프록시로 감싸거나, 초기화할 때 다른 작업을 할 필요가 없음

(https://react-ko.dev/learn/updating-objects-in-state#why-is-mutating-state-not-recommended-in-react)

 

🎃 왜 state를 직접 변경하는 대신 useState를 사용해야 하나요?

state는 객체 형태로 저장됩니다.

값을 변경되었다는 걸 판단하기 위해 리액트는 객체로 저장된 state를 비교 연산합니다.

객체이기 때문에 이때 비교하는 판단 근거가 객체의 메모리 주소입니다. 따라서 직접 state값을 수정할 경우 변경이 안된 것으로 판단하기 때문에 update할 수 없습니다. 이러한 이유로 직접 state를 변경하지 않고, 새로운 객체를 만들어서 할당해 변경해야 하고 이때 useState를 사용합니다. 

 

추가공부하기)
https://jisu-y.github.io/react/React-useState%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0/

출처)

https://velog.io/@wjdcksdud29/React-setState-useState%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-TIL-53

 

🎃 함수형 컴포넌트에서의 순수성이란 무엇인가요? 순수성의 어떤 점이 사이드 이펙트를 방지하는 데 도움이 되는지 간략히 설명해주세요.

함수형 컴포넌트에서 '순수성'은 함수가 동일한 입력에 대해 항상 동일한 출력을 반환하며 side effect를 일으키지 않는 특성을 말합니다. 함수 내부에서 외부 상태를 변경하지 않기 때문에 외부 환경에 영향을 미치지 않습니다.(함수 실행중에 어떤 전역 변수를 수정하거나 외부 파일에 쓰기 작업 수행 X)

 순수성을 지키면 입력과 출력만으로 동작을 검증하기 쉽기에 테스트에 용이하고, 동작을 예측하기 쉽습니다. 또한 side effect를 일으키지 않으므로 유지보수에 용이합니다. 코드를 수정할 때 다른 부분에 영향을 미치는 위험이 적어지기 때문입니다. 동작을 이해하기 쉽기에 성능 개선 작업이 더 효율적으로 이뤄질 수 있어 성능 최적화를 하기에도 용이합니다. 예기치 않은 버그를 방지하기 위해서 순수성을 지키는 것이 좋습니다.