중요도가 높은 질문들 - ⭐
실무 면접을 여러 번 진행해보면서 받아본 질문들 - ✔️
1. React 란?
- React는 UI를 만들기 위한 JS 라이브러리
- React는 상태 변화에 따른 UI 변경점을 결정하기 위해 재조정 알고리즘을 사용하며, Virtual DOM을 통해 이를 구현
- React16 부터는 React Fiber 엔진을 통해 이를 정비
2. React의 특징 ⭐
- Virtual DOM : React의 브라우저 렌더링의 기반
- Reconciler는 트리의 변경점을 확인
- Renderer는 변경 정보로 애플리케이션을 업데이트
- Fiber를 통해 우선순위가 높은 업데이트 먼저 완료
- 단방향 데이터 바인딩
- HTML에 바인딩한 데이터를 JS에서 수정 시, 화면에 반영
- 화면에서 해당 요소의 값을 변경 시, JS의 데이터는 수정되지 않음
3. Element와 Component
- Element : JS 객체, 화면을 그리는 기본 요소, 한번 생성되면 변형되지 않음
- Component : Element를 반환하는 함수(클래스), 코드의 재사용성↑
4. React에서 Component 생성법
-
함수형 컴포넌트
export const Component = () => { ... return(<></>)}
-
클래스형 컴포넌트
class내에render()를 통해 정의 후, React element 반환
-
Component의 이름은 언제나 대문자로 시작해야한다.
5. Component의 Life Cycle ⭐
-
마운트 → 업데이트 → 언마운트
-
마운트 : Component의 생성 시점
constructor→getDerivedStateFromProps→render→componentDidMount
-
업데이트 : Component 업데이트 시점
getDerivedStateFromProps→shouldComponentUpdate→render→getSnapshotBeforeUpdate→componentDidUpdate
-
언마운트 : Component가 화면에서 사라지는 시점
- 사라지기 직전에
componentWillUnmount호출
- 사라지기 직전에
6. React Hooks에 대해 ⭐
- 코드의 재사용성을 위해 사용
- 훅은 호출되는 순서에 의존하는데,
state가 JS의 클로저를 이용해 구현되었기 때문이다. - 훅을 조건문 내에서 사용하면 순서에 문제가 발생할 여지가 있으므로 조건문 내 훅 사용은 X
7. useEffect와 useLayoutEffect
useEffect: 비동기적 작동, Network 요청이나 DOM 접근, 비동기 작업에 사용useLayoutEffect: 동기적 작동, 성능 모니터링, 애니메이션 구현 등
8. State란?, State 관리 방식은?
-
state는 Component가 정보를 기억하는 방식(기능)useState,useReducer를 통해state를 추가한다.
-
state는 배열을 통해 관리되며, 배열의 인덱스와state의 값을 클로저 내에 관리한다.useState()함수 반환 후에도 별도의 메모리 공간에 값 저장
9. Props란? ⭐
- Component에 전달되는 값, 매개변수와 같은 역할
- 자식에서 부모로 데이터를 전달하기 위해선 자식에게
setter함수를props로 전달
※ Props Drilling 과 해결방안? ✔️
props를 트리 깊숙이 지속적으로 전달하는 과정을 의미ContextAPI,Redux등을 통해 해결할 수 있다.
10. Key Props란? ✔️
key란 어떤 항목을 추가, 변경, 삭제할 지 식별하는 지 도움- 배열 내부의 엘리먼트에 지정해야 함
11. ContextAPI?
- React 컴포넌트 트리 내의 전역 데이터를 공유할 수 있는 방법
- 로그인 정보, 테마, 언어 속성 등
12. state의 직접 변경이 아닌 useState의 setState()를 사용하는 지?
-
state값의 변화는 리렌더링을 초래한다. -
setState를 통해서state의 주소 변경을 해야만 React가 반응해 리렌더링 과정을 거칠 수 있다. -
추가적으로
setState는 비동기적으로 동작하나 비동기 함수는 아니다.
13. State 불변성을 유지하는 방법은?
- 기본적으로
setState사용,state가 객체인 경우,...spread 연산자를 이용해 깊은 복사를 진행해 상태를 업데이트 해야한다.
14. HTML과 React의 이벤트 처리 차이점은?
-
HTML은 전달할 함수를 문자열의 형태로 전달onclick처럼 소문자로false반환 식으로 이벤트의 기본동작을 방지
-
React는 함수 그 자체로 핸들러를 전달onClick처럼 camelCase로preventDefault를 명시적으로 호출해 이벤트의 기본동작을 방지해야 함
15. Ref란?
- DOM요소에 액세스 할 때 주로 사용
input에focus를 두거나, 스크롤 이벤트 등의 DOM 조작
- Component가 특정 정보를 기억하지만, 해당 정보가 새 렌더링을 촉발시키지 않아야 할 때 사용
15. HOC란?
- HOC, 고차 컴포넌트란 컴포넌트를 인자로 받아 새로운 컴포넌트를 리턴하는 함수를 의미한다.
16. Portal이란?
- 컴포넌트가 일부 자식 컴포넌트를 DOM의 다른 위치로 렌더링
Portal은 오직 DOM노드의 물리적 배치만 변경
17. React에서의 Memoization ⭐
-
Memoization : 계산된 값을 다시 계산하지 않게 자료구조에 저장해 다시 사용하는 것.
-
퍼포먼스 최적화를 위해 주로 사용된다.
-
useMemo: deps 배열의 요소의 변경이 없는 한, 함수의 반환값을 새로 계산하지 않기 위해- 주로 계산 비용이 높은 함수의 결과값 저장에 사용
-
useCallback: deps 배열의 요소가 변경이 없는 한, 함수를 새로 생성하지 않기 위해- 자식 컴포넌트에 함수를 넘겨줄 때 사용
18. React 렌더링 성능 향상 방법 ⭐ ✔️
state,props의 변경은 리렌더링을 초래하므로 이를 최소화map()을 통해 컴포넌트 렌더 시,key값으로index를 사용하지 않는 방법 ✔️
useMemo,useCallback등의 사용으로 불필요한 렌더링의 발생 빈도를 낮춘다.
19. Suspense란?
- React18에 도입된 새로운 기능으로 트리에 완전히 추가되기 전의 컴포넌트의 비동기 작업을 기다린 후,
작업이 완료되면 다시 처음부터 렌더링을 시도.
20. Redux란? ⭐ ✔️
-
JS 상태관리 라이브러리로 모든 상태의 업데이트를
action으로 정의.
action정보를 기반해reducer에서 상태를 업데이트 -
상태 예측이 쉬워지며 유지보수에 용이하다.
-
Redux-thunk를 통해 비동기 작업을 처리할 수 있다.
프로젝트에 왜 Redux를 도입했는지? ✔️
- 다양한 상태관리 라이브러리들 중 커뮤니티가 가장 활성화 되어 정보를 접하기 쉬웠다.
Recoil을 접해보지 않은 상태에서 프로젝트를 진행했기 때문에 전환 시기를 놓쳤다.
21. React-Query란? ✔️
-
React Component내부에서 간단하고 직관적으로 API를 사용할 수 있는 원격 및 비동기 데이터를 관리하기 위한 라이브러리
-
GETMethod에는useQuery,POSTMethod에는useMutation이 사용된다. -
queryKey: 쿼리를 식별하고 캐시하기 위해 사용 -
fetchData 함수: Data를 가져오는 로직 수행 -
data,isLoading,error의 속성 반환 -
장점
- 비동기 동작에 대한 코드 수 감소
- Data Fetching 방식의 규격화
enabled를 통한 동기적 실행
22. Recoil이란?
Redux와 달리 React에 최적화된 상태관리 라이브러리Redux의 복잡함을 감소시켜 사용하기에 편하다.Recoil은 Hooks 기반 사용으로 배우기 편하고 사용이 쉽다.
Atoms: 컴포넌트가 구독할 수 있는Recoil상태의 단위atom(key, default)
Selector:atom혹은 다른selector상태를 입력 받아 동적인 데이터를 반환하는 함수
