-
React에 대해 설명해주세요.
보기리액트는 UI를 구축하기 위한 선언적이고, 효율적이며, 유연한 자바스크립트 라이브러리로 컴포넌트라 불리는 작은 단위의 코드 모음을 이용하여 복잡한 ui를 구성하도록 합니다. -
React의 원리, 특징, 장단점이 무엇인가요?
보기원리 : 가상 DOM을 통해 변경된 부분의 UI만 업데이트 해주어, 효율적인 업데이트를 가능하게 해준다.
특징 : 선언적 구조, 단방향 데이터 바인딩, 컴포넌트 구조
장점 : MVC 패턴이 아닌 Component 하나로 관리한다.
많은 사용자를 가지고 있다.
단점 : 로딩시간이 길다. -
Virtual DOM 이 무엇인지 설명해주세요.
보기우선 DOM은 HTML element들을 tree 형태로 표현한것으로, 기존의 DOM은 하나의 elemet만 업데이트 되어도 전체 화면을 리렌더링 했지만, 리액트는 이전의 화면 내용을 담고있는 Vitrual DOM과 업데이트 이후 발생되는 Vitrual DOM를 비교해 차이가 발생한 부분만을 실제 DOM에 적용하여 불필요한 리렌더링을 방지한다. -
Virtual DOM 작동 원리에 대해 설명해주세요.
보기리액트는 이전의 화면 내용을 담고있는 Vitrual DOM과 업데이트 이후 발생되는 Vitrual DOM를 비교해 차이가 발생한 부분만을 실제 DOM에 적용하여 불필요한 리렌더링을 방지한다. -
JSX에 대해 설명해주세요.
보기jsx는 리액트에서 사용하는 JavaScript를 확장한 문법입니다. jsx는 브라우저에서 직접 실행되지 않으므로 babel 같은 트랜스파일러를 통해 js로 변환되어 작동합니다. -
엘리먼트와 컴포넌트의 차이에 대해 설명해주세요.
보기엘리먼트는 리액트 앱의 가장 작은 단위로 자바스크립트 객체이다. 컴포넌트는 이러한 엘리먼트를 반환하는 재사용가능한 코드 블록이다. 엘리먼트는 불변, 리액트는 상태나 props를 통해 동적 데이터 처리 가능하다. -
리액트에서 컴포넌트를 어떻게 생성하나요?
보기우선, 리액트는 function컴포넌트와, class컴포넌트를 지원합니다. class는 리액트의 초기 버전에서 상태와 생명주기 메서드를 사용하기 위해 사용되었으나 Hooks를 통해 function컴포넌트로 상태와 생명주기 메서드를 관리하면서 사장되고 있다. function 키워드를 통해 컴포넌트를 생성하고, props를 받고, jsx를 반환하는 구조로 컴포넌트를 생성합니다. -
클래스형 컴포넌트를 사용해보셨나요?
보기사용해본전 없습니다. -
클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.
보기클래스형 컴포넌트는 React.component를 상속받고, render() 메소드를 포함해야 합니다. 함수형 컴포넌트는 React.component을 상속 받을 필요 없고, jsx를 반환값으로 작성합니다. 클래스형은 this.state, this.setState(), componentDidMount등 상태관리, 생명주기 메소드들을 사용하지만 함수형 컴포넌트는 useState, useEffect등 Hook을 사용해 더 간단하게 구현 및 관리합니다.(훅의 사용 가능 여부) -
라이프사이클에 대해 설명해주세요.
보기리액트에서 컴포넌트가 DOM에 마운트, 업데이트, 언마운트 되는 주기를 말한다. -
라이프 사이클 메소드에 대해 설명해주세요.
보기클래스형 컴포넌트에서 특정 메서드를 선언하여 컴포넌트가 마운트 되거나 언마운트 될 때 일부 코드를 작동할 수 있습니다. 이러한 메서드들을 라이프 사이클 매서드라 합니다.
단계 메서드 설명 Mounting constructor 컴포넌트를 초기화합니다. 초기 상태를 설정하거나 props를 사용한 준비 작업을 수행합니다. static getDerivedStateFromProps props에 기반해 상태를 업데이트할 수 있습니다. (드물게 사용) render UI를 렌더링합니다. JSX를 반환합니다. componentDidMount 컴포넌트가 DOM에 삽입된 후 호출됩니다. 초기 데이터 로드, 이벤트 리스너 등록 등 비동기 작업에 주로 사용됩니다. Updating static getDerivedStateFromProps 상태를 변경하기 전에 호출됩니다. shouldComponentUpdate 리렌더링 여부를 결정합니다. 성능 최적화를 위해 사용됩니다. render 상태 또는 props 변경 후 UI를 다시 렌더링합니다. getSnapshotBeforeUpdate DOM이 업데이트되기 직전의 상태를 캡처합니다. componentDidUpdate DOM이 업데이트된 후 호출됩니다. Unmounting componentWillUnmount 컴포넌트가 DOM에서 제거되기 직전에 호출됩니다. 리소스 정리, 이벤트 리스너 제거 등에 사용됩니다. 에러 처리 componentDidCatch 하위 컴포넌트에서 발생한 오류를 처리합니다. </div> -
함수형 컴포넌트의 장점에 대해 설명해주세요.
- 리렌더링 될 때의 값을 유지한다.
class 문법 없이 함수로 간결하게 작성가능
리액트의 최적화 기능 (memo, useCallbak, useMemo)등을 사용 가능
리액트 hooks를 사용 가능
- 리렌더링 될 때의 값을 유지한다.
-
⭐ React Hooks에 대해 설명해주세요.
- 함수형 컴포넌트에서 상태 및 라이프사이클을 관리할 수 있도록 도와주는 기능이다.
-
⭐ 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요. (useEffect => ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount)
- useEffect(() =>{},[]) => ComponentDidMount
useEffect(()=> {}, [state]) => ComponentDidUpdate
useEffect(()=>{return()=>{...},[])
- useEffect(() =>{},[]) => ComponentDidMount
-
useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요.
- useEffect는 렌더링이 완료된 후, 비동기적으로 실행한다.
레이아웃을 차단하지 않습니다.
UI변경 이후 실행됩니다.
useLayoutEffect 렌더링 직후, 동기적으로 실행합니다.
UI변경 이전에 동작합니다.
레이아웃을 측정하거나 직접 DOM을 조작할 때 사용합니다.
- useEffect는 렌더링이 완료된 후, 비동기적으로 실행한다.
-
Pure Component에 대해 설명해주세요.
- 불필요한 렌더링을 방지하는 클래스형 컴포넌트로 shouldComponentUpdate()를 자동으로 구현합니다. 상태나 props가 변경되지 않으면 렌더링하지 않습니다.
-
shouldComponentUpdate에 대해 설명해주세요.
- shouldComponentUpdate(nextProps, nextState)
현재 value와 변경된 value가 갔다면 렌더링하지 않습니다.
- shouldComponentUpdate(nextProps, nextState)
-
State에 대해 설명해주세요.
- 컴포넌트 내부에서 관리되는 동적인 값입니다.
-
React에서 State를 어떻게 관리하나요?
- 컴포넌트 내부에서 useState를 사용해서 관리합니다.
-
Props에 대해 설명해주세요.
- 부모컴포넌트에서 자식컴포넌트로 전달하는 값입니다.
-
⭐ Props Drilling에 대해 설명해주세요.
- props를 부모컴포넌트에서 자식컴포넌트로 전달하는 과정에서 여러 단계를 거치면서 발생하는 문제입니다.
-
⭐ Props Drilling을 어떻게 해결할 수 있나요?
- Context API를 사용하여 Provider 내부의 모든 컴포넌트에서 접근할 수 있도록 한다. 부모에서 자식으로 props 다중으로 전달하는 과정이 사라진다.
-
데이터를 자식에서 부모로도 전달할 수 있나요?
- 기본적으로는 안되지만 callback 함수를 이용하면, 부모가 자식에게 함수를 전달하고, 자식에서 부모로 데이터를 보낼 수 있습니다.
지금 하고 있는 그거 그거아냐