03. 면접대비 react

https://velog.io/@developer-sora/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8-%EC%A0%95%EB%A6%AC-Part1CS-JSReact

프론트엔드 면접 질문 정리 Part1(CS, JS,React)

 

 

해당 사이트의 질문을 참고 했습니다.

---

Virtual DOM이 무엇이고 작동 원리에 대해 설명해주세요

자바스크립트는 DOM 요소에 직접 접근하여 조작하는데, DOM의 요소가 많거나 접근과 조작이 빈번한 경우 성능의 문제가 발생할 수 있습니다. 이에 대한 방안으로 Virtual DOM 을 활용할 수 있습니다. 

 

Virtual DOM은 실제 DOM을 추상화하여 만든 자바스크립트 객체로 트리 구조로 표현됩니다. 

1. 초기 상태를 담은 Virtual DOM을 메모리 상에 하나 생성
2. state나 props가 변경시, 새로운 버전의 Virtual DOM을 메모리 상에 하나 더 생성
3. 두 Virtual DOM을 비교하여 어떤 부분이 변경되었는지 확인
4. 변경된 부분만 실제 DOM에 적용합니다.

https://js0616.tistory.com/291

 

 

React를 사용하는 이유에 대해 말씀해주세요.

가상 DOM 을 사용하여 실제 DOM 조작을 최소화하여 성능을 개선할 수 있습니다.

컴포넌트 기반 개발이 가능하여 재사용성과 유지보수에서 유리합니다.

또한, React Native를 사용하여 모바일 앱을 쉽게 만들 수 있습니다.

 

 

클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.

클래스형 컴포넌트

• ES6의 클래스 문법을 사용하며 React.Component를 상속받아 구현합니다.
• this.state와 this.setState를 사용하여 상태를 관리
• 라이프사이클 메서드를 사용하여 컴포넌트의 생성, 업데이트, 제거에 대한 로직을 구현

 

함수형 컴포넌트

• 일반 함수 형태로 작성됩니다.
• useState Hook을 사용하여 상태를 관리
• useEffect Hook을 사용하여 라이프사이클 메서드와 유사한 기능을 구현

코드가 간결하며 인스턴스를 생성하지 않는 함수형 컴포넌트와 Hook 을 사용하는것이 선호됩니다.

 

https://teawon.github.io/react/fuction-vs-class/#4-%EC%B0%A8%EC%9D%B4%EC%A0%90

 

 

생명 주기 메서드에 대해 설명해주세요.

마운트(Mount) 단계

1. constructor():  컴포넌트 생성시 호출, 초기 상태 설정을 합니다.
2. render(): 컴포넌트의 UI를 렌더링하는 메서드입니다. 
3. componentDidMount(): 컴포넌트가 화면에 마운트된 직후에 호출되는 메서드입니다. DOM 조작이나 외부 데이터 요청 등의 비동기 작업을 수행하기에 적합합니다.

업데이트(Update) 단계

1. render(): 변경된 상태나 프로퍼티(props)에 따라 UI를 업데이트합니다.
2. componentDidUpdate(prevProps, prevState, snapshot): 컴포넌트의 업데이트가 완료된 직후에 호출되는 메서드입니다. 이전 props나 state에 접근하여 업데이트 이후의 작업(?)을 처리할 수 있습니다.

언마운트(Unmount) 단계

1. componentWillUnmount(): 컴포넌트가 제거되기 직전에 호출되는 메서드입니다. 이벤트 리스너의 해제나 타이머의 중지 등의 정리 작업을 수행합니다.

 

 

https://js0616.tistory.com/manage/posts/

 

 

리액트에서 JSX 문법이 어떻게 사용되나요?

 

{} 를 사용하여 JavaScript 표현식을 사용할 수 있습니다.

style 속성은 객체 형태로 지정해야 합니다 (style={{ color: 'red' }}).

className (css 클래스) 카멜케이스를 사용

 

 

왜 state를 직접 바꾸지 않고 useState를 사용해야 하나요?

React는 상태나 props가 변경되었는지를 판단할 때, 객체의 메모리 주소를 비교 합니다.

직접 변경할 경우 메모리 주소는 일정하기 때문에 변화를 알 수 없고 리렌더링이 일어나지 않는다. 

 

https://wnsdufdl.tistory.com/473

 

useMemo와 useCallback에 대해 설명해주세요.

 

+ useMemo와 useState의 차이

 

+ useMemo, React.memo

 

리액트에서 메모이제이션을 어떤 방식으로 하나요?

 

리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?

 

React-query에 대해 설명해주세요.

 

 

React 18 버전 업데이트 내용에 대해 말씀해주세요.

React 18 에서는 자동 배칭(Automatic Batching) 을 지원합니다. 

setTimeout , promise, native event 같은 처리에 대해서도 같은 주기에 배치 됩니다.

 

 

useEffect와 useLayoutEffect의 차이점에 대해 말씀해주세요.

useEffect

컴포넌트들이 render 와 paint 된 후 실행됩니다. 

비동기적(asynchronous) 으로 실행됩니다.

useEffect 내부에 dom 에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됩니다.

 

useLayoutEffect

컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가 됩니다.

이 작업은 동기적(synchronous) 으로 실행됩니다.

paint 가 되기전에 실행되기 때문에 dom 을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않습니다.

 

 

https://medium.com/@jnso5072/react-useeffect-%EC%99%80-uselayouteffect-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-e1a13adf1cd5

 

 

 

ContextAPI에 대해 설명해주세요.

 

Key Props를 사용하는 이유는 무엇인가요?

리스트와 같은 반복 요소를 식별하여 효율적으로 관리하기 위해 사용합니다.

 

제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.

 

 

props와 state의 차이는 무엇인가요?

props 는 부모에서 자식으로 전달받은 값이며

state 는 컴포넌트 내부에서 관리되는 값입니다. 

 

 

pure component에 대해 설명해주세요.

 

shouldComponentUpdate에 대해 설명해주세요.

 

리액트 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요?