- Keyword
React / localStorage / useRef
- Quiz 정리
Q1.
React의 개념과 장점, 그리고 컴포넌트란 무엇인가요?
A1.
페이스북에서 만든 UI를 만들기 위한 JavaScript 기반 라이브러리입니다.
장점으로는 사용자와의 인터렉션을 UI로 쉽게 구현이 가능하고, 대규모의 복잡한 동적 웹페이지를 관리할 수 있습니다.
Virtual DOM을 사용하여 불필요한 렌더링을 줄임으로써 성능을 향상 시킵니다. 또한, 컴포넌트별로 나눠서 개발하기 때문에 모듈화를 할 수 있고 유지 보수가 쉽습니다.
SSR, CSR 모두 가능하고 라이브러리다보니 다른 프레임워크와 혼용도 가능합니다.
컴포넌트란 UI를 구성하는 개별 단위입니다. 페이지는 컴포넌트의 조합인 느낌으로 이해하면 좋습니다.
컴포넌트를 통해 재사용성을 높이고 유지보수의 효율을 높였습니다.
Q2.
React의 내부 작동 원리를 재조정(Reconciliation) 개념과 함께 설명하세요.
A2.
React에서는 실제로 DOM을 제어하지 않고 Virtual DOM을 이용하여 Virtual DOM이 변경될 때, 실제 DOM을 변경하도록 설계되어있다. Virtual DOM과 DOM을 비교하여 DOM을 갱신하는 작업을 재조정이라고 한다.
Virtual DOM의 렌더링이 일어나는 상황은 props가 변경되거나 state가 변경 되었을 때, 상위 컴포넌트가 렌더되었을 때, forceUpdate가 호출되었을 때 등이 있다.
*Q3.
React에 있는 Lifecycle과 각 Lifecycle의 역할을 설명하세요.
A3.
React는 컴포넌트 기반의 View를 중심으로 한 라이브러리다보니 각각의 컴포넌트에는 라이프 사이클이 존재한다.
컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.
Lifecycle을 크게 생성(Mount) 될 때, 업데이트(Update) 할 때, 제거(Unmount)할 때 3가지로 나눌 수 있다.
각 대표적인 메서드를 설명하자면
componentDidMount() : 최초로 컴포넌트 객체가 생성될 때 한 번 수행하는 메서드
componentDidUpdate() : 컴포넌트의 속성 값 또는 상태값이 변경되면 호출
componentWillUnmount(): 컴포넌트가 소멸될 때 호출
render() : 초기에 화면을 그려줄 때와 업데이트가 될 때 호출
(추후 포스팅 예정)
Q4.
React Router 같은 Client Side Routing에 대해서 설명하세요.
A4.
웹 페이지의 렌더링이 클라이언트쪽에서 일어나는 것을 말합니다.
서버와 클라이언트 간의 데이터 트래픽이 감소하고 렌더링이 한 번만 되기 때문에 페이지 이동이 빠르지만,
SEO(검색 최적화) 사용이 불가하고 초기 로딩 시간이 길 수 있습니다.
Q5.
state를 직접 변경하지 않고 setState를 사용하는 이유에 대해서 설명하세요.
A5.
state는 immutable(불변성)을 유지해야하기 때문입니다.
컴포넌트는 현재의 this.state와 setState를 비교하여 업데이트가 필요한 경우에 render 함수를 호출하는데,
state를 직접 수정하게 되면 React에서 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있습니다.
Q6.
React Hooks의 장점은 무엇인가요?
A6.
함수 컴포넌트도 클래스 컴포넌트 처럼 사용할 수 있고, 로직의 재사용이 가능하고 관리가 쉽습니다.
함수 안에서 다른 함수를 호출하는 것으로 새로운 hook을 만들어 볼 수 있습니다.
Q7.
Virtual DOM이 무엇인가요? Virtual DOM이 좋은 이유에 대해서 설명하세요.
A7.
Virtual DOM은 실제 DOM을 기반으로 만든 가상의 DOM입니다.
Virtual DOM은 View에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달합니다.
그렇기 때문에 Virtual DOM은 실제 DOM 변화를 최소화하여 불필요한 렌더링을 줄여주는 역할을 하여 효율적인 렌더링을 가능하게 해줍니다.
Q8.
JSX가 무엇인가요?
A8.
JavaScript XML의 약어로 React Element를 생성하는 언어입니다.
자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 더 편리한 개발이 가능합니다.
Q9.
웹 성능 향상을 위해 최적화를 해 본 경험이 있나요? 혹은 useMemo와 useCallback 메소드를 활용해 최적화하는 원리에 대해서 설명하세요.
A9.
useMemo나 useCallback은 렌더링 할 때마다 메모리가 많이 소모되는 값은 계산하지 않고 최적화하는데 도움을 줍니다.
dependency 리스트를 생성해서 그 중 하나가 변경되면 바로 로직을 실행시킵니다.
useMemo는 값을 기억하는 대신 useCallback은 함수를 기억합니다.
Q10.
React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해서 설명하세요.
A10.
React는 상태를 immutable하게 변경하기 때문에 상태 객체의 주소값이 변경되면 상태가 변화되었다는 것을 감지 할 수 있습니다.
Q11.
여러가지 상태 관리 라이브러리(Apollo, Redux, MobX 등)의 차이점에 대해서 설명하세요.
A11.
추후 공부해서 수정 예정
Q12.
useEffect 메소드로 componentWillUnmount 가 동작할 수 있는 방법에 대해서 설명하세요.
A12.
useEffect 내부에 return 하는 arrow function을 작성하여 componentWillUnmount를 구현할 수 있습니다.
- 오늘 하루 느낀 점
저번 주 모의 면접보다는 문제 수도 적고 React는 공부했던 내용들도 꽤 있어서 저번 보단 나았지만, 그래도 여전히 부족하다. 팀 과제 구현도 하면서 면접 준비 거기다가 코딩 테스트 준비까지 한다면 시간이 정말 없을 것 같다.
벌써 2월의 마지막 날이다. 앞으로 3월 한달만 지나면 이 교육도 끝이날텐데 그 때의 내가 궁금하다.
조금만 더 집중하자!