프론트엔드, 리액트 면접 인터뷰

프론트엔드, 리액트 개발자 면접 기본 질문들 정리

자주 물어보는 자바스크립트와 리액트 기본 질문들을 정리하였다. 이밖에도 프로젝트나 다양한 과제를 해결하기 위해 어떻게 접근했는지, 개발 과정에서 발생한 문제와 문제 해결 능력도 준비를 해야 한다.

 

1. array 관련 함수들 (map, forEach, filter, reduce)

array 함수들과 polyfill 구현 방법 정리. 폴리필이란 네이티브로 구현되지 않은 오래된 브라우저의 최신 기능에 사용되는 코드 스니펫(JavaScript Web 아키텍처 관점)이다. 간단히 말해서, polyfill은 네이티브 자바스크립트 함수의 커스텀 구현이다.

 

1) map

map() 메서드는 배열을 반복하고 맵 본체에 기입할 로직을 계산하여 새 배열을 반환한다.

아래는 map polyfill이다.

 

myMap 메서드는 myMap 본문 내에서 실행되는 콜백을 가져온다. 기본적으로 myMap 본체 내부에 루프 네이티브가 있으며, 이 루프는 this.length로 반복된다. 이것은 myMap 함수가 호출되는 배열의 길이일 뿐입니다.

map()의 구문은 arr.map(current Element, index, array)이기 때문에 myMap() 함수는 그것을 정확하게 고려한다. 또한 map()은 새로운 배열을 반환하므로 빈 배열을 작성하고 결과를 그 배열에 푸시하여 최종적으로는 새로운 배열을 반환한다.

 

2) forEach

forEach는 map()과 비슷하지만 배열은 반환되지 않는다.

 

3) filter

이름에서 알 수 있듯이 필터 메서드는 부울 조건에 따라 배열 내의 값을 필터링한다. 조건이 true인 경우 결과가 반환되고 최종 배열에 추가된다. filter는 map 메서드와 마찬가지로 배열도 반환한다.

아래는 filter의 polyfill이다.

 

filter는 구현 측면에서 map과 매우 비슷하다. 그러나 filter는 boolean 값을 기반으로 결과를 필터링하므로 결과를 필터링하고 조건부로 배열 내에 푸시하기 위한 추가 if 조건이 있다.

 

 

4) reduce

reduce 메서드는 이전 값, 현재 값 및 어큐뮬레이터를 고려한다. reduce 메서드의 반환 값 유형은 항상 단일 값입니다. 배열의 모든 값을 처리하고 몇 가지 누적 결과를 도출하는 경우에 편리하다.

 

2. 클로저란?

클로저는, 그 주위의 상태(어휘 환경)를 참조해, 번들된( 둘러싸이는) 함수의 조합이다. 다시 말해, 클로저를 사용하면 내부 기능에서 외부 기능의 스코프에 액세스 할 수 있다. 자바스크립트에서는 함수가 작성될 때마다 함수 작성 시 클로즈가 작성된다.

 

여기서 start() 함수와 displayName() 함수 사이에 클로저가 형성된다. displayName() 함수는 start() 함수에 존재하는 name 변수에 접근할 수 있다. 즉, 내부 함수는 그 주위(어휘 환경)를 알게 된다.

 

3. 리액트 훅

프론트 엔드 코딩 인터뷰에서 리액트 훅에 관해 가장 많이 묻는 질문이다.

• useState()
• useReducer()
• useEffect()
• useRef()
• 커스텀 훅과 그 구현

 

1) useState()

컴포넌트 내부 상태를 관리하려면 useState() 훅을 사용한다.

 

useState() 메서드는 state 변수와 해당 state 변수를 변경하는 함수의 두 값을 제공한다. 위의 코드에서는 페이지 제목을 저장하는 타이틀 상태를 만들고 있다. 초기 상태는 free Code Camp로 전달된다.

버튼을 클릭하면 setTitle() 메서드를 사용하여 상태 변수를 FCC로 변경할 수 있다.

 

2) useReducer()

간단히 말해서 useReducer()는 애플리케이션의 상태를 관리하기 위한 방법입니다. 애플리케이션의 복잡한 상태를 유지하는 데 도움이 된다.

 

useReducer() 훅은 reducer 함수와 initialState 값의 두 가지 파라미터를 취한다. reducer 함수는 스위치 케이스 기반 구현으로 use Reduer()가 컴포넌트에 공급하기 위해 내부적으로 사용하는 최종 스테이트 값을 반환한다.

useReducer() 함수에서 반환되는 값은 state와 dispatch이다. state는 컴포넌트 내에서 사용할 수 있는 실제 상태 값이다. 이 경우 state에는 title과 count라는 두 가지 값이 있습니다. 이 제목과 카운트는 useReducer() 메서드에 의해 반환되는 dispatch() 메서드를 사용하여 조작할 수 있다.

위의 경우 제목을 변경하기 위해 리듀서 기능 중 제목을 변경한 경우를 예를 들었다. 이는 디스패치({type:"change-title"}) 기능을 사용하여 트리거할 수 있다. 그러면 changetitle 함수가 트리거 되어 title 속성 상태가 변경된다. 마찬가지로 애플리케이션에 있는 카운트 부분에서도 같은 일이 일어난다.

 

3) useEffect()

변화하는 상태 변수에 부작용을 일으키고 싶다면 useEffect() 훅을 사용하여 해당 변수를 트리거할 수 있다. 예를 들어 입력 상자의 입력 값이 변경된 경우 변경 후 API를 호출한다고 가정합니다. API 핸들의 로직을 useEffect() 블록에 쓸 수 있다.

 

값이 업데이트되고 렌더링 되면 useEffect() 블록이 부팅되고 콘솔 문이 트리거 되며 최신 상태 값이 출력된다.

여기서 useEffect()의 좋은 사용 예로는 API 콜을 구현하는 것을 들 수 있다. 입력 필드 값을 가진 API를 호출한다고 가정합니다. useEffect 함수 블록이 최적의 방법이다.

이것의 또 다른 부분은 의존관계 배열로 useEffect() 훅의 두 번째 인수입니다. 이는 기본적으로 값이 변경될 때마다 useEffect 내의 함수가 트리거 된다는 것을 의미한다. 의존관계 배열에 아무것도 전달하지 않으면 함수 블록은 한 번 트리거 된다.

 

4) useRef()

useRef 훅을 사용하면 DOM을 변환할 수 있다. 컴포넌트의 라이프 사이클 전체에 걸쳐 어떤 가치를 유지하는 경우 Ref를 사용한다. useRef의 기본 구현에는 DOM 요소가 포함되어 있다.

 

여기에서는 입력 블록에 ref 속성을 할당한다. 이것은 작성한 inputEl 참조와 관련이 있다. 이 입력 요소는 원하는 대로 조작할 수 있다. style 속성을 변경하여 아름답게 만들 수 있다. value 속성을 사용하여 입력 요소에 의해 무엇이 도움을 받고 있는지 value로 확인할 수 있다.

위의 예에서는 버튼을 클릭하면 입력에 포커스가 맞춰져 바로 입력을 시작할 수 있다. 이것은 input El.current의 도움을 받아 수행할 수 있다. (focus=현재 오브젝트에 존재하는 focus=메서드)