Virtual DOM 작동원리에 대해 설명해주세요
데이터를 업데이트를 하면 전체 UI를 Virtual DOM에 리렌더링
이전 Virtual DOM에 있던 내용과 현재 내용을 비교한다.
바뀐 부분만 실제 DOM에 적용
변경 사항을 DOM에 직접 수정하는게 아니라 중간 단계로 Virtual DOM을 수정하고 Virtual DOM을 통해서 DOM을 수정하게 했다. Virtual DOM에 변경 내역을 한 번에 모으고(버퍼링) 실제 DOM과 변경된 Virtual DOM의 차이를 판단한 후, 구성요소의 변경이 된 부분만 찾아 변경하고 그에 따른 렌더링을 한 번만 하는 것으로 랜더링을 줄이게 되었다.
키워드 :
실제 DOM, Virtual DOM, 비교
Virtual DOM 이 무엇인지 설명해주세요
실제 DOM을 모방한 가상의 DOM을 구성해서 원래 DOM 과 비교해서 달라진 부분을 리렌더링 시켜주는 방식으로 작동한다.
이유:
실제 DOM은 모든 정보가 담겨져있기때문에 무거운 작동방식이어서 깜빡 거림 없이 부드러운 UX를 제공하기 위해 변경사항만 빠르게 파악하고 리렌더링하는 가상 DOM 비교방식을 채택했다.
React는 성능 향상을 위해 실제 렌더링 된 UI를 내부적으로 JavaScript 객체로 따로 관리한다.
브라우저 렌더링과정을 변경 횟수만큼 반복할 정도로 비효율적
키워드 :
DOM, 가상, 리렌러링
클래스형 컴포넌트와 함수형 컴포넌트의 차이
클래스형 컴포넌트
상속
메모리를 더 사용한다.
render() 메서드, 상속
state를 객체 형식으로 처리
this.props를 활용하여 props 관리
생명주기함수
함수형 컴포넌트
렌더함수여서 render()메서드 x
자체적으로 state x , useState로 처리가능
parameter로 props
생명주기함수 x , React Hook을 통해 생명주기 기능을 연동하게 도와준다.
키워드 :
render(), state, 생명주기함수, 메모리, 상속
생명 주기 메서드에 대해 설명해주세요
생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다.
componentDidMount / componentDidUpdate / componentWillUnmount
useEffect로 대체
라이프사이클 메서드 이해
라이프사이클 메서드 종류는 총 9가지이다.
will 접두사가 붙은 메서드 👉 어떤 작업을 작동하기 전에 실행
Did 접두사가 붙은 메서드 👉 어떤 작업을 작동한 후에 실행
라이프사이클은 총 3가지, Mount, Update, Unmount 카테고리로 나눈다.
키워드 :
Component, Mount, useEffect, 라이프 사이클
React에서 JSX 문법이 어떻게 사용 되나요?
브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.
즉, 자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해 주는 것이 JSX의 가장 큰 장점이자, 이를 사용하는 이유가 됩니다.
부모 태그로 감싸는 이유는, 리액트가 사용하는 Virtual DOM 방식에서는 컴포넌트 변화를 감지할 때 효율적으로 비교하고자 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문입니다.
삼항연산자를 사용한다
키워드 :
JS, HTML, Babel, 번들링
https://chanhuiseok.github.io/posts/react-3/
Key props을 사용하는 이유는 무엇인가요?
아래와 같이 key값이 없는 element로 이루어진 트리에서 새로운 element가 추가될 경우, React는 모든 자식요소를 다시 변경하므로 비효율적이고 성능이 좋지 않다.
자식요소들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인하므로 트리의 변환이 효율적으로 이루어진다.
키워드:
트리, 자식, 효율성
왜 state를 직접 바꾸지 않고 useState를 사용해야하나요?
state를 쓰면 안되는 이유
리액트의 컴포넌트는 Mount 상태에서 한번 render() 를 실행하고,
후에는 Update 상태에 진입하여 shouldComponentUpdate === true 일때만 render() 를 실행한다.
그래서 변경한 state가 화면에 보이게 되려면 Update상태에 들어가야 하는데 그러려면...
- state 또는 Props가 변경
- 부모 컴포넌트가 렌더링
- forceUpdate 사용
해야한다.
state가 변경되면 update가 돼야 하는거 아닌가? 라고 생각할 수 있으나, 리액트가 이 값이 변경 됐다는 것을 판단하는 기준이 객체의 메모리 주소이기 때문에, 객체의 주소가 변경되지 않고 내부의 값만 바뀌면 바뀐것으로 인식을 안하기 때문이다.
state는 일반 변수와 다르게 값이 변하면 렌더링이 일어난다.
setState는 state를 변경할 때 사용하는 함수다. setState가 쓰일 때 컴포넌트의 state 객체에 대한 업데이트를 실행한다. state가 변경되면, 컴포넌트가 리렌더링 된다.
useState 사용법
state는 값이 변경되면 리렌더링이 발생한다. 그런데 변경되는 state가 많을 경우 리렌더링이 계속 일어날테고 속도도 저하될것이다.
따라서 React는 성능을 위해서 변경된 값들을 모아 한번에 업데이트를 진행하여 렌더링을 줄이고자 배치(Batch) 기능을 사용해 비동기로 작동한다고 볼 수 있다. 배치 업데이트는 16ms 주기이다.
updater 함수란?
state와 props를 인자로 받는 state를 변화시키는 함수.
(state, props) => 변경할 상태 값에서 state는 와 props는 최신상태로 보장된다.
키워드 :
state, 객체, update
https://rinrin-dev.tistory.com/93
Context API에 대해 설명해주세요
context는 컴포넌트안에서 전역적으로 데이터를 공유하도록 나온 개념입니다. 그런 데이터는 로그인 데이터, 웹 내 사용자가 쓰는 설정파일, 테마, 언어 등등 다양하게 컴포넌트간 공유되어야할 데이터로 사용하면 좋습니다
키워드 :
컴포넌트, 전역적, redux
React를 사용하는 이유에 대해 말씀해주세요
흔히 우리가 자주 보는 Instagram, facebook 같은 사이트의 새로고침이 없이 변경되는 모습, 마치 앱처럼 보이는 동적인 웹 페이지 SPA(Single Page Application), CSR(Client Side Rendering)의를 사용한 페이지라고 할 수 있습니다.
Single Page Application : 서버로부터 새로운 페이지를 불러오지 않고,
현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트
정적인 페이지는 웹 서버에 이미 저장되어 있는 HTML 문서를 클라이언트에게 전달하여 받은 페이지입니다. 단순한 기업소개 페이지는 유저의 인터랙션은 중요하지 않는 요소로 볼 수 있기에 단순한 HTML과 CSS로만으로도 구현이 가능합니다.
정적, 동적 페이지.
동적인 페이지는 유저의 행동과 흐름에 따라 웹페이지의 구성을 달리해주어야 하는 페이지를 말합니다. 즉 유저의 요청 정보를 처리한 후 제작한 HTML 문서를 전달받게 됩니다.
이처럼 정적인 페이지를 만드는 것이 목적이라면 프레임워크의 도움은 필요하지 않을것입니다. 하지만 요즘은 웹이 정적이고 단순한 페이지에서 벗어나 복잡하고 동적이 되었습니다.
그에 프로젝트의 규모도 커지면서 유저의 인터랙션(Interaction)이 전달되면 그만큼 DOM 요소들이 변화를 가져야 하고 이러한 과정이 반복되면 브라우저는 많은 연산을 해야 하고 DOM 요소의 변화를 관리하는 개발자에게는 적지 않은 짐이 될 것입니다.
React를 사용하는 이유는 아래의 이유들 때문인거 같습니다.
- Virtual DOM의 존재
- React Native의 앱 개발 가능
- 수 많은 커뮤니티
- Component를 사용한 재사용이 가능하고 유지보수의 용이함
키워드 :
virtual DOM, React Native의 앱, 커뮤니티, 재사용, 유지보수
제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요
제어 컴포넌트
제어 컴포넌트의 값은 항상 최신값을 유지한다. 새로운 입력 값이 생길때 마다 상태를 새롭게 갱신한다. 이는 데이터와 UI에서 입력한 값이 항상 동기화됨을 알 수 있다.
ex: onChange
아래 기능들을 사용하여 효율적으로 가능
쓰로틀링: 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것
디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것
https://www.zerocho.com/category/JavaScript/post/59a8e9cb15ac0000182794fa
비제어 컴포넌트
필드에서 값을 트리거 해야 값을 얻을 수 있다. 사진에선 [전송] 버튼을 클릭하면 console에 값이 찍힌다. [전송]버튼을 클릭해 트리거 하기 전까지의 값은 변경되지 않는다.
ex: useRef
차이점
제어컴포넌트는 React 컴포넌트에서 다루어짐, 비제어컴포넌트는 DOM 자체에서 폼데이터가 다루어짐
키워드 :
DOM, Component, 동기화
props와 state의 차이
Props와 State
React에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 사용됨.
Props
불변의 데이터
부모로부터 전달되는
변경 불가
State (상태)
가변 데이터
구성 요소에 의해 유지
변경 가능
Props와 State 차이점
State는 내부 (컴포넌트)에서 생성하고 활동하고, 데이터를 변경할 수 있음.
Props는 외부(부모 컴포넌트)에서 상속 받는 데이터이며, 데이터를 변경할 수 없음.
키워드 :
불변, 가변, 부모, 컴포넌트, 변경유무
pure Component에 대해 설명해주세요
변경 사항을 자동으로 체크하고 re-render 여부 결정
일반 컴포넌트를 shouldComponentUpdate() 에서 정의한것과 동일
일반 - setState 실행 시 state, props 변경여부와 무관하게 랜더링
pure - setState 실행 시 state, props 얕은 비교 후 변경 시에만 랜더링
불필요한 랜더링을 줄일수 있기때문에 성능향상에 도움
shouldComponentUpdate에 대해 설명해주세요
변경된 값만 변경되도록 하게 도와준다.
useMemo와 useCallback에 대해 설명해주세요
useMemo는 메모이제이션된 값을 반환하는 함수입니다.
- 컴포넌트 랜더링 시 내부 표현식도 매번 다시 선언되어 사용 됨
- 컴포넌트는 상태변화 시 리랜더링 되므로 최적화 필요
키워드 :
Rendering
React에서 메모이제이션을 어떤 방식으로 하나요?
먼저 메모이제이션이라고 하는 개념에 대해 확실히 알아가야하는데, 메모이제이션은 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법입니다.
이것을 적절하게 활용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화 할 수 있습니다.
키워드 :
재사용, 동일한 입력, 중복
React 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요?
startTransition 함수를 이용하여 검색창을 세련되게 꾸밀 수 있어서 좋다고 생각했습니다.
React 렌더링 성능 향상을 위해 어떻게 해야하나요?
useMemo, useCallback을 사용하여 메모이제이션,
useRef 사용하여 비제어 컴포넌트 사용
캐싱으로 불필요한 서버호출 방지
useEffect 효율적 운용
React 18버전 업데이트 내용에 대해 말씀해주세요
1.2. 2. Transitions(전환)
전환은 긴급 업데이트와 긴급하지 않은 업데이트를 구분하기 위한 React의 새로운 개념이다.
긴급 업데이트(Urgent updates) : 직접적인 상호 작용 반영(타이핑, 오버, 스크롤링 등)
전환 업데이트(Transition updates) : 하나의 뷰에서 다른 뷰로의 UI 전환
긴급 업데이트는 사용자의 입력에 따라 즉각적으로 업데이트되지 않으면 문제(화면 멈춤, 렉 등)가 있다고 느끼는 영역이다. 반면 전환 업데이트는 화면에 즉시 나타나는 걸 기대하지 않는 영역이다.
useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요
레이아웃이 그려지기전에 동작하는 것이 useLayoutEffect 초기값을 사용할 수 있다.
