- React에 대해 설명해주세요.
: 리액트는 자바스크립트의 라이브러리로 컴포넌트 기반으로 작동합니다. 리액트는 virtual dom을 사용하는데 이는 메모리 상에 존재하는 가상의 dom으로 매번 dom 전체를 업데이트하는 것이 아니라 변경된 부분만 반영될 수 있도록 하여 성능을 향상 시킬 수 있습니다.
- React의 원리, 특징, 장단점이 무엇인가요?
: 리액트 가상 돔을 사용하여 성능을 향상시키고 컴포넌트 기반으로 애플리케이션을 관리한다는 특징이 있습니다. 또한 jsx를 사용하는데 jsx는 자바스크립트를 확장한 문법으로 HTML과 유사한 구문을 사용하여 ui를 작성합니다.
장점으로는 컴포넌트의 재사용성 높다는 점과 가상돔을 사용하면서 빠른 렌더링을 제공한다는 점입니다. 단점은 뷰 중심의 라이브러리로 다른 기능은 직접 구현하거나 라이브러리를 사용하기 때문에 러닝커브가 존재한다는 점입니다.
- Virtual DOM 이 무엇인지 설명해주세요.
가상 돔이란 실제 DOM의 가벼운 사본이라고 할 수 있습니다. 리액트에서는 실제 DOM에 접근하여 조작하는 대신 이를 추상화한 자바스크립트 객체를 구성하여 사용하는데 이것이 바로 가상 돔입니다.
- Virtual DOM 작동 원리에 대해 설명해주세요.
: 데이터가 업데이트 되면 전체 UI를 가상 돔에 리렌더링합니다. 그리고 이전 가상돔에 있는 내용과 현재의 내용을 비교하여 바뀐 부분만 실제 DOM에 적용합니다. 이러한 과정을 통해 전체적인 렌더링 비용을 줄일 수 있습니다.
- JSX에 대해 설명해주세요.
: jsx 는 react 스크립트 안에서 일반적인 HTML 형태의 문법을 사용할 수 있도록 자바스크립트를 확장한 문법입니다. 이를 통해 react 엘리먼트를 생성할 수 있고 자바스크립트의 기능을 활용할 수 있습니다.
- 엘리먼트와 컴포넌트의 차이에 대해 설명해주세요.
: 엘리먼트는 리액트에서 ui를 구성하는 가장 작은 단위로 가상 돔의 요소입니다. 이러한 엘리먼트는 타입과 속성 2가지 필드로 구성되어 있고 불변하며 화면에 표시할 데이터를 담고 있습니다. 엘리먼트를 활용하여 복잡한 ui를 구성할 수 있습니다. 컴포넌트란 엘리먼트를 반환하는 함수 혹은 클래스를 의미합니다. props와 state를 사용하여 데이터를 관리하며 여러 개의 엘리먼트를 하나의 컴포넌트로 묶어서 사용할 수 있습니다.
- 리액트에서 컴포넌트를 어떻게 생성하나요?
- 클래스형 컴포넌트를 사용해보셨나요?
- 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.
: 클래스형 컴포넌트는 es6 클래스를 사용하여 작성되며 함수형 컴포넌트는 함수를 사용하여 jsx 를 리턴하는 방법으로 사용됩니다. 클래스형 컴포넌트에서는 this.state로 직접 설정하며 객체형태로 사용하게 됩니다. 함수형 컴포넌트에서는 useStsate hook을 사용하여 state 관리할 수 있습니다. 생명주기 메서드의 경우 클래스형에서 사용할 수 있고 함수형에서는 useEffect hook을 통해 구현할 수 있습니다.
- ⭐ 라이프사이클에 대해 설명해주세요.
: 라이프 사이클은 컴포넌트가 생성, 업데이트 ,제거되는 과정을 의미합니다. 리액트의 컴포넌트 사이클은 마운트, 업데이트, 언마운드 세 가지로 구분할 수 있습니다.
- ⭐ 라이프 사이클 메소드에 대해 설명해주세요.
: 마운트 관련 메서드는 componentdidMount 메서드가 있습니다. 컴포넌트의 첫번째 렌더링이 마치고 나면 componentdidMount 메서드가 호출됩니다. 이 메서드가 호출되는 시점에는 컴포넌트가 화면에 나타난 상태입니다. 업데이트 메서드로는 componentDidUpdate가 있습니다. 이 메서드는 리렌더링이 마치고 화면에 변경사항이 반영된 후에 호출되는 메서드입니다. 마지막으로 언마운트 관련 메서드는 componentWillUpmount가 있습니다. 이 메서드는 컴포넌트가 화면에 사라지기 직전에 호출됩니다.
- 함수형 컴포넌트의 장점에 대해 설명해주세요.
- 클래스형에서는 동일한 로직을 작성했을 때 3초 안에 값이 변경된 경우 변경된 값이 보여지게 된다. 이는 클래스는 this.props, this.state로 접근하는데 props와 state는 변경불가능한 값이지만 this는 변경가능한 값이기 때문에 렌더링 결과를 보장받지 못한다.
: 클래스형 컴포넌트보다 코드가 간결하여 가독성이 높습니다 또한 함수형 컴포넌트는 render 될 때의 값들을 유지합니다. 따라서 setTimeout을 통해 버튼을 누르고 3초 후에 props를 ui로 띄울 때 함수형 컴포넌트는 클릭핸들러가 호출됐을 때의 props를 고정시켜두기 때문에 3초 사이에 props 값이 변경되어도 호출됐을 때의 값을 유지하여 보여줍니다. 따라서 함수형 컴포넌트는 props에 따른 렌더링 결과를 보장받는다는 장점이 있습니다.
- ⭐ React Hooks에 대해 설명해주세요.
: hook은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다. useState를 통해 상태관리를 하고 useEffect를 통해 렌더링 직후 작업 등을 할 수 있게 되었습니다. useState, useEffect, useRef, useCallback 등의 내장함수 뿐만 아니라 커스텀 훅을 만들어서 다양한 방법으로 사용이 가능합니다.
- ⭐ 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요. (useEffect => ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount)
: useEffect 훅을 사용하여 생명주기 함수들을 대체할 수 있습니다.useEffect 훅은 실행할 함수와 함수를 실행시킬 조건을 인자로 받게 됩니다. useEffect에 전달된 함수는 최초 렌더링 때 항상 실행되어 ComponentDidMount의 역할을 수행합니다. 의존성 배열에 조건이 추가되어 있는 경우 해당 조건이 변경될 때 마다 useEffect 가 수행되는데 이 때 componentDidUpdate의 역할을 하게 됩니다. 마지막으로 useEffect는 클린업 함수를 리턴할 수 있는데 이를 활용해 캄포넌트가 unMount될 때 정리할 수 있습니다 .즉, componentWillUnmount의 역할을 수행합니다.
- useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요.
- Pure Component에 대해 설명해주세요.
: 순수함수란 어떤 외부 상태에 의존하지 않고 변경시키지도 않는 부수효과가 없는 함수를 의미합니다. 동일한 인수를 전달하면 언제나 동일한 값을 반환하여 예측이 가능하고 외부 상태를 변경하지 않습니다. 이러한 독립된 실행 단위를 가지기 때문에 가독성이 좋고 재사용성이 가능합니다.
- shouldComponentUpdate에 대해 설명해주세요.
- Props에 대해 설명해주세요.
- ⭐ Props Drilling에 대해 설명해주세요.
- ⭐ Props Drilling을 어떻게 해결할 수 있나요?
- context api란?
- 해결을 위해선?
:프로퍼티의 줄임말로 상위컴포넌트에서 하위 컴포넌트로 값을 전달할 때 사용하며 단방향 데이터 흐름을 갖습니다. 그리고 이렇게 전달된 프로퍼티는 하위 컴포넌트에서는 수정할 수 없는 읽기 전용 데이터로 사용됩니다.
: props driilling은 props로 데이터를 전달하는 과정에서 중간 컴포넌트는 해당 데이터가 필요하지 않음에도 하위 컴포넌트에게 전달하기 위해 props로 받아서 하위로 전달하는 과정을 말합니다. 이러한 props drilling은 데이터를 빠르게 전달할 수 있다는 장점이 있지만 컴포넌트 수가 많아질수록 점점 복잡해지게 되며 컴포넌트 분리가 어려워질 수 있고 중간에 이름이 변경되면 추적이 쉽지 않다는 문제가 있습니다.
: 만약 state가 특정 위치에서 필요한 값이라면 최상위에서 관리하는 것이 아니라 필요한 컴포넌트에서 직접 관리할 수 있도록 하거나 데이터를 필요로 하는 컴포넌트들의 가장 가까운 상위 컴포넌트에서 관리하도록 할 수 있습니다, 하지만 그럼에도 여의치 않다면 context api를 사용하거나 리덕스 등의 상태관리 라이브러리를 활용하여 문제를 해결할 수 있습니다.
: 리액트에 내장된 기능으로 props를 사용하지 않고 특정 값이 필요한 컴포넌트 끼리 값을 공유할 수 있게 해줍니다. Context의 Provider를 사용하여 데이터를 제공할 수 있고 데이터를 사용하려면 컴포넌트의 Context의 Consumer를 사용하여 데이터를 사용할 수 있습니다. 하지만 context를 구독하는 모든 컴포넌트는 props가 변경되면 렌더링 되는데 이 때 하위 컴포넌트가 있다면 하위컴포넌트에서 context를 구독하지 않더라도 리덴더링되는 문제점이 있습니다.
: React.memo를 사용하여 변화가 없을 땐 리렌더링되지 않도록 할 수 있습니다.
- 데이터를 자식에서 부모로도 전달할 수 있나요?
- Props와 State의 차이에 대해 설명해주세요.
- 왜 state를 직접 바꾸지 않고 setState (useState)를 사용해야 하나요?
- 왜 감지하지 못하는가?
: state를 직접 변경하면 리액트에서 state가 변경된 것을 감지 못할 수 있기 때문입니다. 따라서 setState를 통해 비동기적으로 state를 변경하여 리액트가 변경사항을 감지할 수 있도록 해야합니다.
:state는 변경 불가능한 데이터 구조로 변경할 때 새로운 state 객체를 생성하여 기존의 state객체와 참조값을 다르게 만들어 변경합니다. 따라서 state의 참조값을 비교하여 변경을 감지하는데 state를 직접 변경하면 참조값이 변경되지 않아 리액트에서 state의 변경을 감지할 수 없습니다.
- State에 대해 설명해주세요.
: state는 컴포넌트 내부에서 관리되는 데이터의 상태를 의미합니다. staet는 setState메서드를 통해 변경할 수 있습니다. 이러한 setState는 이벤트가 끝날 시점에 state를 일괄적으로 업데이트한다는 특징이 있습니다.
- React에서 State를 어떻게 관리하나요?
state가 업데이트 될 때마다 render 함수가 호출되어 ui를 렌더링하는데 이 과정에서 새로운 state와 이전 state를 비교하여 변경된 부분을 업데이트합니다.
- React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해 설명해주세요.
- React에서 State의 불변성은 어떻게 유지할 수 있나요?
- setState는 동기적으로 동작하나요? 아니면 비동기적으로 동작하나요?
- 왜 비동기적으로 동작하나요?
- HTML과 React의 이벤트 처리 차이점에 대해 설명해주세요.
- ⭐ Key Props를 사용하는 이유에 대해 설명해주세요.
- index를 key로 사용해도 되나요?
: key를 지정하여 리액트가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 도울 수 있습니다. key를 통해 엘리먼트의 고유성을 부여할 수 있기 때문입니다. 변화가 일어나기 전 key와 변화가 일어난 후의 key와 요소를 비교하여 빠르게 변화를 감지할 수 있습니다. 따라서 리스트에서 각 항목에 대해 고유하게 식별할 수 있는 값을 사용해야 합니다.
: index를 key로 사용하는 경우 배열의 순서가 바뀌거나 요소가 삽입, 수정되었을 때 index가 변경되기 때문에 컴포넌트에서 보고 있는 key가 기존의 요소를 가리키지 않을 수 있습니다. 이 과정에서 의도하지 않은 동작이나 불필요한 렌더링이 일어날 수 있습니다. 따라서 index보단 고유한 id 값을 사용하는 것을 권장합니다.
- Ref의 용도에 대해 설명해주세요.
: 리액트에서 dom에 직접 접근할 때 사용합니다. 함수형 컴포넌트에서 useRef라는 훅을 사용하여 활용할 수 있고 jsx 태그에 ref 속성을 통해서 설정할 수 있습니다. 또한 ref의 특징은 값이 업데이트되어도 리렌더링되지 않는 다는 것입니다. 따라서 이러한 점을 활용해서 값이 변해도 리렌더링하지 않는 변수를 관리할 때 활용할 수 있습니다.
- 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.
: 제어 컴포넌트는 폼 데이터를 자신의 state로 관리하고 업데이트하여 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화됩니다. 비제어 컴포넌트는 state가 아닌 ref로 값을 관리하여 실시간으로 동기화되지 않습니다. 제어 컴포넌트는 입력이 있을 때마다 리렌더링이 발생하고 비제어 컴포넌트는 트리거 되기 전까지는 리렌더링이 발생하지 않습니다. 따라서 실시간으로 유효성 검사나 포맷 적용 등이 필요할 때 제어 컴포넌트를 활용할 수 있습니다.
- HOC (Higher-Order Components)에 대해 설명해주세요.
- redux의 connect
: 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수입니다. 이러한 방식으로 고차 컴포넌트에 인자로 전달되는 모든 컴포넌트는 고차 컴포넌트에 정의된 함수를 사용할 수 있는 새 컴포넌트가 되어 재사용성을 높일 수 있습니다.
- Context API에 대해 설명해주세요.
- React.Fragment에 대해 설명해주세요.
- 리액트는 return 안에서 jsx 문법을 사용할 땐 반드시 하나의 최상위 태그가 필요합니다. 이 때 div 태그로 감싸는 경우 최종적으로 생성되는 HTML DOM구조에는 의미 없는 div 태그가 추가되게 됩니다. 이를 피하기 위해서 플레그먼트를 사용합니다. 플레그먼트를 사용하는 경우 html 구조에는 해당 태그가 보이지 않게 됩니다.
- Portal에 대해 설명해주세요.
- 에러 바운더리에 대해 설명해주세요.
- 메모이제이션에 대해 설명해주세요.
: 메모이제이션이란 기존의 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 기법을 의미합니다. 이러한 방법을 통해 중복 연산을 피할 수 있어 성능 최적화가 가능해집니다.
- ⭐ 리액트에서 메모이제이션을 어떤 방식으로 활용할 수 있나요?
- ⭐ useMemo와 useCallback에 대해 설명해주세요.
- React.memo와 useMemo의 차이에 대해 설명해주세요.
: useMemo는 메모이제이션된 값을 반환하는 함수입니다. useMemo의 의존성 배열로 지정된 값이 변경되면 첫번째 인자로 전달된 콜백함수를 실행하고 그 함수의 반환 값을 반환 하게 됩니다.
useCallback은 메모이제이션된 함수를 반환하게 됩니다. 주로 함수의 참조값을 유지하여 자식 컴포넌트에 props로 전달하거나 불필요한 리렌더링이나 무한루프를 방지할 수 있습니다.
:react.memo는 함수 컴포넌트의 리렌더링 성능을 최적화하는 기술입니다. 컴포넌트의 props가 변경되었을 때 리렌더링을 수행하게 합니다. 이전에 렌더링된 결과를 메모이제이션하여 이전과 현재의 props가 다를 경우에 컴포넌트를 리렌더링합니다. useMemo는 함수형 컴포넌트 내에서 계산된 값을 메모이제이션하는 기술입니다. 결과적으로 react memo는 컴포넌트의 props를 최적화하고 useMemo는 컴포넌트 내에서 계산된 값을 최적화합니다.
- 리액트 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요?
- 리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?
- CSS in JS를 사용해 본 적이 있나요? 있다면 소감을 말해주세요.
- React 18 버전 업데이트 내용에 대해 말씀해주세요.
- Client Side Routing에 대해 설명해주세요. CSR vs SSR
: CSR은 초기 로드 시 빈 HTML 과 모든 로직이 담겨 있는 자바스크립트를 다운받습니다. 그 후 빈 HTML에 자바스크립트를 이용하여 DOM을 동적으로 생성하여 그려 냅니다. 원하는 내용만 업데이트할 수 있고 페이지 전환이 없다는 장점이 있습니다. 하지만 HTML 파일을 하나만 받아오기 때문에 각각의 페이지 정보를 담기 힘들어 SEO에 취약하며 첫 로드 시에 모든 자바스크립트를 다운로드하다보니 로딩 속도가 길다는 단점이 있습니다.
SSR은 서버 사이드 렌더링으로 서버에서 렌더링하여 완성된 HTML 파일을 로드해줍니다. 클라이언트에서 요청할 때마다 해당하는 HTML 파일을 넘겨주어 여러 개의 페이지로 구성되게 됩니다. SSR은 요청이 있을 때 HTML 을 다운로드하기 때문에 CSR에 비해 초기 진입 시 로딩이 빠릅니다. 또한 각 페이지에 대한 정보를 입력하기 쉬워 SEO를 높일 수 있습니다. 하지만 HTML 파일이 변경되어 화면 깜빡임 현상이 있을 수 있고 페이지 이동이 CSR에 느릴 수 있습니다.
- SPA와 MPA
:spa는 싱글 페이지 애플리케이션으로 하나의 페이지로 이루어진 홈페이지로 CSR에 적합합니다. 데이터를 수정, 조회할 때 동적으로 페이지를 구성하여 페이지가 새로고침되거나 전환되지 않습니다. MPA는 멀티페이지 애플리케이션으로 여러 개의 페이지로 이루어진 홈페이지 입니다. 여러 개의 페이지로 구성되어 있어 클라이언트에서 서버에 요청을 보내면 서버에서 렌더링하고 클라이언트에게 응답을 주는 SSR 을 사용합니다.
- Next.js 를 사용해보셨나요?
- React에서 Form 이벤트는 어떻게 제어하셨나요?
- React Hook Form 를 사용해보셨나요?
- 기억나는 Hook에 대해 전부 설명해주세요.
- React에서 컴포넌트 A가 사용하는 CSS파일과 컴포넌트 B가 사용하는 CSS파일의 선택자가 겹치는 이유가 뭘까요?
- ⭐ Redux에 대해 설명해주세요.
- ⭐ Redux를 사용하는 이유에 대해 설명해주세요.
- 미들웨어 찾아보기
- ⭐ Redux의 장단점에 대해 설명해주세요.
- Flux 패턴에 대해 설명해주세요.
- Context API와 Redux를 비교해주세요.
- Redux의 3대 원칙에 대해 설명해주세요.
: 리덕스란 react의 상태관리 라이브러리입니다. 공유되는 상태를 중앙에서 관리하는데 이러한 상태를 store라 하는 객체에 저장됩니다. store는 불변 객체이며 dispatch를 통해 변경이 가능합니다. 액션은 상태 변경을 나타내는 객체인데 액션은 dispatch를 통해 store로 보내면 리덕스는 리듀서를 호출하게되는데 리듀서는 현재 상태와 액션을 받아서 새로운 상태를 반환합니다.
: 상태를 중앙 집중화된 곳에서 관리하면서 상태 변화를 예측 가능하게 만들고 상태 변경 로직을 구조화하여 유지보수성을 향상시킵니다. 또한 컴포넌트 간 데이터 전달할 필요가 없어 관련 로직이 간소화됩니다. 리덕스는 미들웨어를 지원하여 비동기 작업 등을 처리할 수 있고 이를 활용하여 애플리케이션 로직과 상태 관리 로직을 분리할 수 있습니다.
단점: 상태관리의 복잡성으로 러닝커브가 있다는 점과 상태 변화, 액션, 리듀서 등을 정의해야 하기 때문에 코드의 양이 많아지고 보일러플레이트 코드가 많아질 수 있습니다.
- React-Query를 사용해보셨나요?
- React-Query에 대해 설명해주세요.
- React-Query의 등장 배경과 장점에 대해 설명해주세요.
- Recoil을 사용해보셨나요?
- Recoil에 대해 설명해주세요.
- Recoil에서 Loadable의 개념에 대해 설명해주세요.
- Recoil에서 비동기로 데이터를 받아올 때 State를 어떻게 관리하셨나요?
- Recoil에서 로딩, 성공, 에러와 관련된 처리를 어떻게 하셨나요?
- ⭐ Redux와 Recoil에 대해 비교 설명해주세요. (개념, 장단점)
:리덕스는 하나의 스토어를 가지고 있어 디버깅에 용이하며 redux devtools와 같은 디버깅 툴도 존재합니다. 데이터가 단방향으로 흐르며 상태를 읽기 전용으로 취급합니다. 하지만 기본적으로 작성되는 코드가 많아지면서 보일러 플레이트 코드가 많아질 수 있습니다.
리코일의 경우 contextAPI 기반으로 구현된 함수형 컴포넌트에서만 사용 가능합니다. 아톰이 상태의 단위를 의미하며 업데이트와 구독이 가능합니다. 셀렉터는 아톰이나 다른 셀렉터를 입력받는 순수함수입니다. 리액트의 훅과 사용방법이 같기 때문에 러닝커프가 낮으며 리액트에 가까운 라이브러라고 할 수 있습니다. 하지만저장소가 여러 개 존재하기 때문에 디버깅에 어려움을 겪을 수 있습니다.