나 혼자서 보려고 정리하는 프론트엔드 면접 질문
개념에 대한 기억이 흐릿해서 면접 준비겸 다시 정리해보는 프론트엔드 관련된 내용들
자세한 내용은 더 찾아보고 틈나는대로 공부하자!
면접 질문 정리 링크는 아래와 같다
지금까지 받았던 신입 프론트 엔드 면접 질문들
프론트 엔드 신입 기술 면접 질문 20선
계속 추가해 나가면서 정리할 예정!!
아 빨리 취직하고싶다---REACT 질문 정리
앵귤러와 리액트의 차이점은 양방향과 단방향 등이 있다!!!!
REACT란?
: 웹 프레임워크 중 하나로 사용자 인터페이스를 구축하고 관리를 쉽게 할 수 있는 사용자측 라이브러리.
작동 원리와 장점
: 상태 값이 변경될 때마다 UI를 자동으로 업데이트 해주는데 Virtual DOM 을 만들고 다시 그릴 때 마다 실제 DOM과 비교하여 전후 상태를 비교해 변경 된 부분만 효율적으로 업데이트 하는 방식이다. 컴포넌트 기반 구조로 코드의 생산성과 유지보수가 좋다. 공식문서 가이드 및 방대한 자료를 통해 쉽게 배울 수 있다.
Virtual DOM 이란? 작동방식은?
: DOM을 가볍게 만드는 JS표현이라고 할 수있다. 실제 스크린인 DOM에서 처리하는 방식이 아닌 가상 DOM과 메모리에 미리 처리하고 저장한 후 실제 DOM과 동기화 하는 프로그래밍 개념
DOM : 웹페이지나 웹 앱에 있는 HTML 요소 전체를 트리 데이터 구조적으로 표현 한 것 (노드의 수가 많아질 수록 속도가 느려지거 DOM 업데이트에 잦은 오류를 발생 시킬 수 있다)
JSX란?
: 리액트 프로젝트로 개발할 때 사용되는 문법 JavaScipt에 XML을 추가한 문법이며 반드시 부모 요소하나가 감싸는 형태여야 한다.(div나 선언한 컴포넌트등으로)if문 대신 삼항연산자를 사용하며 HTML 어트리뷰트 대신 camelCAse프로퍼티 규칙을 사용한다 (font-size -> fontSize)
function App() {
return (
<Fragment>
<div>Hello</div>
<div>GodDaeHee!</div>
</Fragment>
);
}엘리먼트와 컴포넌트의 차이
엘리먼트 : 태그를 지정하는 객체, 불변. 우리가 화면에서 보는 것 들
컴포넌트 : props로 입력받을 수 있고 엘리멘트를 반환하는 함수 혹은 클래스.
클래스 컴포넌트와 함수형 컴포넌트의 차이점, 함수형 컴포넌트의 장점
클래스 컴포넌트 : ES6의 클래스(class)를 사용하여 컴포넌트를 정의. 이 방식은 React의 컴포넌트의 상태(state)와 생명주기(lifecycle)를 다룰 때 매우 유용.
함수형 컴포넌트 : ES6의 화살표 함수(arrow function)를 사용하여 컴포넌트를 정의합니다. 이 방식은 훅(hook) API와 함께 많이 사용되며, 컴포넌트의 상태와 생명주기를 다룰 때도 유용합니다.
: 차이점은 상태와 생명주기의 다루는 방식입니다. 클래스형 컴포넌트는 상태를 this.state로 정의하고, 생명주기 메서드를 오버라이드하여 다양한 작업을 수행합니다. 반면에 함수형 컴포넌트는 상태를 useState 훅을 사용하여 정의하고, useEffect 훅을 사용하여 생명주기를 다룹니다. 또한, 클래스형 컴포넌트에서는 this 키워드를 사용하여 상태나 메서드를 참조하며, 함수형 컴포넌트에서는 this 키워드를 사용하지 않습니다. 이러한 차이점 때문에, 함수형 컴포넌트는 더 간결하고 가독성이 좋아지며, 테스트와 리팩토링이 쉽게 이루어질 수 있습니다.
라이프 사이클과 메소드란?
: 리액트는 컴포넌트 기반의 view를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 생명주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 랜더링되기 전인 준비 과정에서 시작하며 페이지에서 사라질 때 끝이난다.
Mount(탄생) > Update, Re-render(변화) > Unmount(죽음)
consturctor : 컴포넌트를 새로만들때 마다 호출되는 클래스 생성자 메서드이다.
getDerivedStateFromProps : props에 있는 값을 state에 넣을때 사용하는 메서드이다.
render : 준비한 UI를 랜더링하는 메서드이다.
componentDidMount : 컴포넌트가 웹 브라우저 상에 나타난 후 호출되는 메서드이다.
getDerivedStateFromProps : 이 메서드는 마운트 과정에서도 호출되며, 엡데이트가 시작하기 전에도 호출된다. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용한다.
shouldCompoentUpdate : 컴포넌트가 리랜더링을 해야할지 말아야한지 결정하는 메서드이다. true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고, false를 반환하면 작업을 중지합니다.
getSnapshotBeforeUpdate : 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출되는 메서드이다.
componentDidUpdate : 컴포넌트의 업데이트 작업이 끝난 후 호출되는 메서드이다.
componentWillUnmount : 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드이다.
리액트 훅 이란?
: 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요 없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리. 함수형 컴포넌트에 맞게 만들어진 것 으로 함수형 컴포넌트에서만 사용 가능하다.
규칙
1. 최상위에서만 Hook을 호출한다.
2. 리액트 함수 내에서만 Hook을 호출한다
종류
- useState :초기값 설정 가능 / 숫자, boolean, 배열, null,객체 등 여러가지 다양한 값을 넣을 수 있다.
- useEffect : ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount 등 기존에 클래스형 컴포넌트에서 사용하던 것을 하나의 API로 통합한 것이다.
실행시킬 함수와 deps에는 의존성 배열을 담는다. - useRef :특정 DOM에 접근하여 조작하게하는 훅. 특정 요소를 선택해야만 하는 상황이 생길 수 있는데 이러한 상황에서 사용한다.
- useMemo, useCallback
memo : 갑반환 callback : 함수 반환 - useContext
state와 관리하는 방법
: 상태의 정의는 웹 어플리케이션을 render하는데 있어 영향을 미칠 수있는 값 이라고 말한다. react에서 페이지가 리랜더링 되는 가장 큰 예시 두가지는 props와 state라고 익히 들어 알고 있을 거라고 생각한다. 상태가 렌더링에 영향을 주기 위한 값으로 존재하기 위해서는 한 가지 요소가 필요하다. 바로 동적인 값, 즉 변하는 값이라는 조건이다. 그게 다시 말해서 State값이다!
왜 state를 직접 바꾸지 않고 setState (useState)를 사용해야 하나?
Props Drilling과 이에 대한 해결법
: props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정입니다.
과도한 props의 전달은 props를 추적하기 힘들어지고 유지보수도 더욱 어려워집니다.
이에따라
1. 전역 상태관리 라이브러리를 사용합니다(useContext 등)
2. children 을 적극적으로 사용합니다.
Props와 State의 차이
props : 외부(부모 컴포넌트)에서 상속 받는 데이터이며, 데이터를 변경할 수 없음.
불변의 데이터 / 부모로부터 전달
state : 내부 (컴포넌트)에서 생성하고 활동하고, 데이터를 변경할 수 있음.
가변의 데이터 / 구성 요소에 의해 유지 / 변경 가능
state가 불변성을 가져야 하는 이유
React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지.
:React는 상태를 불변성을 띄게 변경합니다. 그로 인해 상태 객체의 주소값이 변경이 되면 변화가 되었다는 것을 알 수 있습니다.
setState는 동기적으로 동작하나? 아니면 비동기적으로 동작하나? 왜 비동기적인가?
: state는 동기적으로 업데이트되어도 props는 업데이트가 불가능하고 이에 따라 state, props, refs 사이 일관성이 깨져 이에 따라 다른 문제가 발생한다는 것과 비동기적으로 동작한다면 내부적으로 일어나는 동작의 우선순위 조정이 가능하다는 설명을 하고 있습니다.
Key Props를 사용하는 이유에 대해 설명.
:map 함수 적용시 사용하는 key props는 element list를 만들 때 포함해야 하는 문자열 속성으로, 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.
리액트에서 메모이제이션을 어떤 방식으로 활용할 수 있나?
메모이제이션 : 연산의 결괏값을 메모리에 저장해 두고 이전 값과 결과가 동일할 때 재사용하는 기법. 보통 애플리케이션의 최적화를 위해 사용된다.
React에서 메모이제이션을 하는 방법
- useMemo
useMemo를 사용하면 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. 이전 값을 기억해두었다고 조건에 따라 재활용하여 성능을 최적화 하는 용도로 사용된다. 메모이즈 된 값을 return하는 Hook이다. - React.memo
함수 컴포넌트에서는 라이프 사이클을 사용할 수 없다. 그래서 React.memo라는 함수를 사용한다. 컴포넌트의 props가 바뀌지 않았다면, 리렌더링하지 않도록 설정하여 함수 컴포넌트의 리렌더링 성능을 최적화 해 줄 수 있다. - useCallback
useCallback을 사용하면 만들어 놨던 함수를 재사용할 수 있다. 컴포넌트가 렌더링 될 때마다 내부적으로 사용된 함수가 새롭게 생성되는 경우, 자식 컴포넌트에 Prop으로 새로 생성된 함수가 넘겨지게 되면 불필요한 리렌더링이 일어날 수 있다.
React.memo와 useMemo의 차이
React.memo의 경우에는 컴포넌트를 받아 컴포넌트를 반환한다. useMemo의 경우에는 값을 계산하는 과정을 최적화해 값을 반환받는다.
Redux와 사용하는 이유 장단점 context와 비교
: 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있습니다. 단순히 전역 상태 관리만 한다면 Context API를 사용하는 것만으로도 충분합니다. 하지만 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋습니다. 코드의 유지 보수성도 높여 주고 작업 효율도 극대화해주기 때문입니다. 추가로 아주 편리한 개발자 도구도 지원하며, 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해주기도 합니다.
reducer 함수를 이용하여 상태 변경을 예측 가능하게 만들고, 사이드이펙트 및 저장소 확장 개념으로 미들웨어를 사용합니다. 또한 Redux Devtools 를 이용하여 앱의 작업 기록 및 상태 확인 할 수 있습니다.
context는 상태관리가 아니며 실제로 아무것도 관리하지 않습니다. 단순 값을 전달하는 파이프와 같습니다. 사용하는 주요 목적은 prop-drilling 을 피하는 것입니다.
단점: 그렇지만 작은 상태 하나를 변경하려고 해도, actions, reducer, type 등 보일러 플레이트 코드를 많이 작성해야 하는 번거로움이 있다.
Recoil과 Redux와의 비교 개념 및 장단점
Recoil : context API 기반으로 구현된 함수형 컴포넌트에서만 사용 가능한 페이스북에서 만든 라이브러리입니다.
장점: 가장 강점은 React의 useState 훅과 비슷하게 동작하는, 직관적이면서 간단한 구조를 가지고 있다. 이에 따라 코드의 양은 매우 줄어들게 됩니다.
단점: 그러나 Redux처럼 따로 안정적인 Devtool이 아직 없습니다. snapshot이라는 개념이 존재하지만, 직관적으로 볼 수 있는 것은 아니고 콘솔을 이용하는 형태로 볼 수 있습니다.
좋은 정보 얻어갑니다, 감사합니다.