[TIL] 230912

리액트

1. React에 대해 설명해주세요.

2. React의 원리, 특징, 장단점이 무엇인가요?

3. Virtual DOM 이 무엇인지 설명해주세요.
   Virtual DOM 이란 실제 DOM 과 같은 내용을 담고 있는 복사본입니다. 실제 DOM 을 직접 조작하는 방식이 아니라 원래 DOM 과 비교해서 달라진 부분을 리렌더링 시켜줍니다.

4. Virtual DOM 작동 원리에 대해 설명해주세요.
   리액트는 두 개의 가상돔을 가지고 있는데, 첫번째는 변경 이전의 내용을 두번째는 변경 이후의 내용을 담고 있습니다.
   상태 변화가 감지되면, 변경 이전의 가상돔과 변경 이후의 가상돔을 비교하게 됩니다. 비교 과정에서 Diffing 알고리즘을 통해 변경된 부분을 감지합니다. 바뀐 부분만 실제 DOM에 반영하게 업데이트합니다. 여러 개의 상태 변화가 있을 경우에는 일괄적으로 한번에 업데이트하는 Batch Update 를 하는 Reconciliation 재조정 과정을 거칩니다.
   작은 규모의 리플로우가 여러 번 발생하는 것보다는 큰 규코믜 리플로우가 한 번 발생하므로써 가상돔을 사용하여 실제돔보다 성능을 최적화하고 불필요한 리렌더링을 최소화할 수 있습니다.

5. JSX에 대해 설명해주세요.
   JSX 란 JavaScript XML 으로 JavaScript 에 XML 을 추가한 확장한 분법입니다.
   JSX 는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환되어 매우 편하게 UI를 렌더링할 수 있습니다. JSX 는 공식적인 자바스크립트 문법은 아닙니다. 바벨을 통해 개발자들이 임의로 만든 문법으로 사용할 수 있는 것입니다.

6. 엘리먼트와 컴포넌트의 차이에 대해 설명해주세요.
   엘리먼트는 컴포넌트를 이루는 작은 단위로 태그를 지정하는 객체로 불변성을 띱니다. 사용하기 위해서는 컴포넌트에서 리턴받아 사용됩니다.
   컴포넌트는 데이터를 가진 props 객체인자를 받아 엘리먼트를 반환하는 함수 혹은 클래스를 의미합니다. UI 를 재사용 가능한 개별적인 여러 조각으로 나눈 것으로 엘리먼트 트리를 캡슐화합니다.

7. 리액트에서 컴포넌트를 어떻게 생성하나요?

8. 클래스형 컴포넌트를 사용해보셨나요?

9. 클래스형 컴포넌트와 함수형 컴포넌트의 차이에 대해 설명해주세요.
   리액트 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트로 두 가지 종류가 있습니다.
   상태에 따라 주기적으로 업데이트 되어야 한다면 클래스 컴포넌트를, 상태가 없고 항상 정적으로 데이터가 표기되어야 한다면 함수 컴포넌트를 사용합니다.
   클래스 컴포넌트에는 상태와 라이프 사이클 메서드가 존재하므로 상태의 변화에 따라 렌더 함수가 실행됩니다.
   반면에 함수 컴포넌트는 상태와 라이프 사이클 메서드가 없지만, 리액트 훅을 사용하여 클래스 컴포넌트처럼 사용이 가능하고 상태를 가질 수는 있습니다.

10. ⭐ 라이프사이클에 대해 설명해주세요.
    라이프 사이클이란 컴포넌트의 생명주기로, 쉽게 말해 컴포넌트가 브라우저 상에 나타나고 업데이트되고 사라지게 되는 과정을 말합니다. 컴포넌트의 수명은 보통 페이지에가 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝이 납니다.
    

(https://velog.io/@devyouth94/%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4)

11. ⭐ 라이프 사이클 메소드에 대해 설명해주세요.
    라이프 사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있고 함수형 컴포넌트에서는 hook 기능처럼 useEffect 처럼 사용됩니다. 라이프 사이클 메서드는 컴포넌트를 처음으로 렌더링할 떄 또는 업데이트하기 전 후 특정 작업을 처리해야하는 경우나 불필요한 업데이트를 방지해야하는 경우 사용됩니다.
    종류는 총 9가지로 will 접두사가 붙은 메서드는 특정 작업을 작동하기 전에 실행되고 did 접두사가 붙으면 특정 작업 후에 실행됩니다.
    (https://velog.io/@imjkim49/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%EB%A9%94%EC%84%9C%EB%93%9C1)

12. 함수형 컴포넌트의 장점에 대해 설명해주세요.
    함수형 컴포넌트는 render() 가 필요없어서 마운트 속도가 빠르고 가독성이 좋습니다.
    Hook의 개념이 등장함에 따라 상태관리와 생명주기에 따른 부수효과(side effect)를 간단히 사용할 수 있게 되면서 점차 클래스형 컴포넌트의 사용이 줄어들게 되었습니다.
    그리고 리렌더링될 때의 값을 유지하는 불변성을 가지고 불변성을 가지는 props 에 따른 렌더링 결과를 보장받을 수 있습니다.

13. ⭐ React Hooks에 대해 설명해주세요.
    리액트 훅은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리입니다. 함수형 컴포넌트에 맞게 만들어진 것으로 함수형 컴포넌트에서만 사용이 가능합니다.
    Hook은 최상위에서만 호출해야하고 리액트 함수 내에서만 호출해야합니다.
    자주 사용되는 hook 으로는 useState, useEffect, useRef, useMemo, useCallback 등이 있습니다.
    Hook 을 사용하므로써 컴포넌트로부터 상태관리 로직을 추상화하여 독립적인 재사용이 가능하게 합니다. 이때문에 가독성을 높일 수 있고 유지보수가 용이합니다.

14. ⭐ 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요. (useEffect => ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount)

15. useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요.
    렌더는 DOM 트리를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정이고, 페인트는 실제 스크린에 레이아웃을 표시하고 업데이트하는 과정입니다.
    useEffect 는 컴포넌트들이 렌더와 페인트 된 후에 실행되고 비동기적으로 실행됩니다. 페인트 된 후에 실행되기 때문에 useEffect 내부에 DOM 에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게 됩니다.
    useLayoutEffect 는 컴포넌트들이 렌더된 후 실행되고 그 이후에 페인트가 됩니다. 이 작업은 동기적으로 실행됩니다. 페인트 되기 전에 실행되기 때문에 DOM 을 조작하는 코드가 존재하더라도 깜빡임을 경험하지 않습니다.
    로직이 복잡할 경우 useLayoutEffect 를 사용하면 사용자가 레이아웃을 보는데까지 시간이 오래걸리기 때문에 useEffect 의 사용이 권장됩니다.

(https://www.howdy-mj.me/react/useEffect-and-useLayoutEffect)

16. Pure Component에 대해 설명해주세요.

17. shouldComponentUpdate에 대해 설명해주세요.

18. State에 대해 설명해주세요.
    상태란 컴포넌트 내부에서 가지고 있는 값으로써 변경할 수 있는 값입니다.
    useState 훅을 사용해 state를 초기값을 설정할 수 있고, 상태 변경 함수 호출로 변경되어야 합니다. 이렇게 변경될 때마다 컴포넌트는 새롭게 호출되고 리렌딩됩니다.

19. React에서 State를 어떻게 관리하나요?
    useState 훅을 사용해 state를 초기값을 설정할 수 있고, 상태 변경 함수 호출로 변경되어야 합니다. 이렇게 변경될 때마다 컴포넌트는 새롭게 호출되고 리렌딩됩니다.

20. Props에 대해 설명해주세요.
    props 는 부모 컴포넌트에서 자식 컴포넌트로 전달받은 값으로 함수의 전달인자처럼 전달하고 전달받을 수 있습니다.
    props는 읽기 전용으로 함수로 변경될 수 없는 불변성을 가지는 객체입니다.

21. ⭐ Props Drilling에 대해 설명해주세요.
    props drilling 은 props 를 오로지 하위 컴포넌트로 전달하는 용도로 쓰이는 컴포넌트를 거치면서 중간 컴포넌트는 그 데이터가 필요없음에도 불구하고 자식 컴포넌트에 전달하기 위해 props 를 전달해야하는 과정을 말합니다.
    컴포넌트 간에 데이터를 가장 쉽고 빠르게 전달할 수 있는 장점이 있지만,
    규모가 증가함에 따라 컴포넌트의 수도 많아지면 그만큼 전달하는 props 는 이동해야하는 구간이 많기 때문에 코드도 복잡해지고 가독성이 떨어지고 유지보수도 어려워지는 단점이 있습니다.

22. ⭐ Props Drilling을 어떻게 해결할 수 있나요?
    먼저, 전역 상태 관리 라이브러리인 redux , recoil 를 사용하는 방법입니다. 전역관리를 함으로써 그 데이터가 필요한 컴포넌트에서 그 값만 직접 불러 사용할 수 있습니다.
    두번째는 children 을 사용하여 하나의 컴포넌트에서 값을 관리하고 그 값을 하위요소로 전달할 때 코드 추적이 어려워지지 않게 됩니다.

23. 데이터를 자식에서 부모로도 전달할 수 있나요?
    네 전달할 수 있습니다.
    부모 컴포넌트에서 함수를 정의하고 이를 자식 컴포넌트에 props 로 전달해주면,
    자식 컴포넌트의 데이터를 부모 컴포넌트에게 전달받은 함수의 인자로 전달하게 되면서
    파라미터로 넣어 호출하는 방식으로 동작할 수 있습니다.

24. Props와 State의 차이에 대해 설명해주세요.
    props는 불변의 데이터로 변경이 불가하며 부모 컴포넌트에서 상속받는 데이터입니다.
    state 는 변경이 가능한 가변 데이터로 내부 컴포넌트에서 생성하고 활동할 수 있습니다.

25. 왜 state를 직접 바꾸지 않고 setState (useState)를 사용해야 하나요?

state 는 컴포넌트 렌더링에 영향을 주는 데이터를 갖고 있는 객체입니다. 직접 state 를 수정하면 리액트는 render 함수를 호출하지 않아서 렌더링이 일어나지 않기 때문에 setState 나 useState 를 호출하여 state 를 변곃아면 리액트 엔진이 render 함수를 이용해서 렌더링을 실행할 수 있습니다.
리액트에서 상태값을 일정 시간 동안 변화하는 상태를 모아 한번에 비동기적으로 처리합니다. 이는 불필요한 렌더링 수를 줄여 더 빠른 속도로 동작하기 위함입니다.

(28. setState는 동기적으로 동작하나요? 아니면 비동기적으로 동작하나요?
29. 왜 비동기적으로 동작하나요?)

26. React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해 설명해주세요.
    React 는 state 를 immutable 하게 관리하기 때문에 상태가 변경되면 상태의 주소값이 변경되게 되면서 이 변화를 알아채게 됩니다.

27. React에서 State의 불변성은 어떻게 유지할 수 있나요?
    불변성: 어떤 값을 직접적으로 변경하지 않고 새로운 값을 만들어내는 것

기본적으로 setState 를 사용합니다. state 가 객체인 경우 setState 를 통해 상태값을 업데이트할 때, spread 연산자를 이용하여 깊은 복사를 통해 기존의 state 값은 유지시키고 복사해서 업데이트한 값으로 상태를 바꿔줍니다.

(https://velog.io/@_seeul/React-React%EC%9D%98-state%EA%B0%80-%EB%B6%88%EB%B3%80%EC%84%B1%EC%9D%84-%EA%B0%80%EC%A0%B8%EC%95%BC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0)

30. HTML과 React의 이벤트 처리 차이점에 대해 설명해주세요.
    html 이벤트의 이름은 소문자, react 이벤트는 camelCase 를 사용합니다.
    이벤트의 기본동작 방지를 위해 html 에서는 false 를 반환하는 prevent default behavior 를 사용하지만,
    react는 preventDefault()를 사용합니다.

31. ⭐ Key Props를 사용하는 이유에 대해 설명해주세요.
    key props 는 react 가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는 역할을 합니다.
    엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야합니다.
    리스트나 배열의 항목들 사이에서 해당 항목을 고유하게 식별하기 위해 문자열을 사용하거나 id를 사용합니다.
    이를 사용하지 않으면 식별하는데 어려움을 겪게 되면서 전체를 불필요하게 리렌더링이 발생하게 되서 속도 저하 및 의도치 않은 오류 등을 발생시킬 수 있습니다.

32. Ref의 용도에 대해 설명해주세요.
    HTML을 작성할 때 DOM 요소에 이름을 달 경우 id 를 설정하여 DOM 에 직접 접근할 수 있었습니다.
    React 에서도 DOM 을 선택하여 직접 접근하기 위해 혹은 자식 컴포넌트를 직접 접근하여 수정할 때, Ref 를 사용합니다.
    ref 를 사용하는 예로는 포커스, 텍스트 선택 영역, 미디어의 재생을 관리할 때 혹은 애니메이션을 직접적으로 실행할 때 등이 있습니다.
    엘리먼트 ref 용 값을 선언할 때 useRef 훅을 사용합니다.

33. 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.

34. HOC (Higher-Order Components)에 대해 설명해주세요.

35. Context API에 대해 설명해주세요.

36. React.Fragment에 대해 설명해주세요.
    리액트에서는 하나의 컴포넌트가 여러 개의 엘리먼트를 반환하는데 jsx 문법상 하나의 태그로 묶어 return 을 꼭 필요합니다. 이때 Fragment 를 사용한다면 DOM 에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있습니다.
    자바스크립트에서는 두 개 이상을 리턴할 수 없기 때문에 요소들을 하나의 태그로 감싸거나 의미없는 태그의 사용을 피하기 위해 React Fragment 를 사용합니다. Fragment 에 전달가능한 유일한 속성으로 key 가 있습니다.

37. Portal에 대해 설명해주세요.
    Portal 을 사용하면, 컴포넌트가 일부 자식 컴포넌트를 DOM의 다른 위치로 렌더링할 수 있습니다. 오로지 DOM의 물리적 배치만 변경하며, 다른 모든 면에서는 이를 렌더링하는 react 컴포넌트의 자식 노드 역할을 합니다.
    자식은 부모 컴포넌트의 컨텍스트에 접근할 수 있고, 이벤트는 자식에서 부모로 버블링됩니다.

38. 에러 바운더리에 대해 설명해주세요.

39. 메모이제이션에 대해 설명해주세요.
    메모이제이션은 컴퓨터가 동일한 계산을 반복해야할 때, 이전의 계산한 값을 메모리에 저장함으로서 동일한 계산을 하지 않도록 기억해 속도를 높이고 최적화를 위해 사용합니다.

40. ⭐ 리액트에서 메모이제이션을 어떤 방식으로 활용할 수 있나요?
    리액트에서 메모이제이션을 하는 방법은 useMemo, React.memo, useCallback 을 사용할 수 있습니다.
    먼저 useMemo 는 메모이즈 된 값을 return 하는 훅입니다. 함수 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다. 두번째 인자로 넘어온 의존 인자 중에 하나라도 값이 변경되면 첫번째 인자의 함수를 재실행하고 인자를 전달하지 않는다면 새롭게 계산해 리턴합니다.
    함수 컴포넌트에서는 라이프 사이클 메서드를 사용할 수 없기 때문에 React.memo 라는 함수를 사용합니다. 컴포넌트의 props 가 바뀌지 않는다면 리렌더링하지 않도록 설정해 렌더링 과정을 스킵하고 가장 최근에 렌더링된 결과를 재사용하면서 성능을 최적화합니다.
    useCallback은 두번째 의존 인자가 변하지 않으면 만들어놓았던 함수를 재사용하면서 리렌더링을 방지할 수 있습니다.
    (https://velog.io/@hsk10271/TIL-30)

41. ⭐ useMemo와 useCallback에 대해 설명해주세요.
    둘의 차이는 useMemo는 함수의 연산량이 많을 경우 이전의 결과값을 재사용하는 것이 목적이고,
    useCallback 은 함수가 재생성되는 것을 방지하는 것이 목적입니다.

42. React.memo와 useMemo의 차이에 대해 설명해주세요.
    둘의 차이는 사용하는 시점과 적용대상입니다
    React.memo 는 함수형 컴포넌트 자체를 메모이제이션하기 때문에 컴포넌트 자체를 감싸서 사용하고,
    useMemo는 특정 값을 캐싱하기 위해 사용되어 컴포넌트 내에서 사용됩니다.
    따라서 useMemo 는 특정 값이 변경될 때마다 새로 계산해야하는 상황에서 사용하며,
    React.memo는 props 가 변경될 때마다 불필요한 렌더링을 방지하고자 할 때 사용합니다.

43. 리액트 관련 패키지 중에 제일 좋다고 생각한 것은 무엇인가요?

44. 리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?

45. CSS in JS를 사용해 본 적이 있나요? 있다면 소감을 말해주세요.
    네 styled-component 라이브러리를 사용해본 적이 있습니다.
    기존의 css 파일을 만들 경우에는 특정 요소에 class 나 id 값을 주어야 했는데,
    styled-component 는 이를 고려할 필요가 없고 파일을 굳이 분리시키지 않아서 시공간적인 비용을 줄일 수 있었습니다.

46. React 18 버전 업데이트 내용에 대해 말씀해주세요.

47. Client Side Routing에 대해 설명해주세요.
    CSR 은 클라이언트 , 브라우저에서 페이지를 렌더링하는 방식입니다.
    주소가 변경될 때마다 매번 서버에서 페이지를 받아오지 않아도 되기 때문에 서버와 클라이언트 간의 데이터 트래픽이 감소한다는 이점이 있습니다. 또한, 페이지 전환시 새로고침을 방지할 수 있기때문에 보다 자연스러운 페이지 이동과 사용자 경험을 제공할 수 있습니다.
    다만, 검색 엔진 최적화 SEO 에 불리합니다. 라우팅 시 콘텐츠 구성이 완료된 HTML을 서버에서 받아오는 것이 아니라 화면 구성에 필요한 모든 HTML 을 클라이언트 측에서 처리하기 때문에 검색엔진에서 페이지 파악이 불리해져 검색 결과에서 더 높은 순위를 점하는 것이 어렵습니다. 또한, 사용자 정보 저장이 기존 서버 기반이 아니라 상대적으로 보안이 취약한 클라이언트 기반의 쿠키에서 이루어지기 때문에 보안에 취약하다는 단점이 있습니다.

48. Next.js 를 사용해보셨나요?

49. React에서 Form 이벤트는 어떻게 제어하셨나요?

50. React Hook Form 를 사용해보셨나요?

51. 기억나는 Hook에 대해 전부 설명해주세요.

52. React에서 컴포넌트 A가 사용하는 CSS파일과 컴포넌트 B가 사용하는 CSS파일의 선택자가 겹치는 이유가 뭘까요?

53. ⭐ Redux에 대해 설명해주세요.
    리덕스는 상태 관리 라이브러리입니다.

54. ⭐ Redux를 사용하는 이유에 대해 설명해주세요.
    state 끌어올리기나 props drilling 등의 이슈가 되면서 state을 전역 관리법으로 redux 를 사용합니다.

55. ⭐ Redux의 장단점에 대해 설명해주세요.
    props drilling 과 같은 문제점을 해결할 수 있는 상태를 쉽게 전역으로 관리할 수 있는 것이 장점입니다.
    어떤 액션을 통해 어떤 데이터가 변경되었는지 쉽게 알 수 있기 때문에 상태를 좀 더 예측하기 쉽습니다.
    다만, 리덕스를 사용하려면 많은 패키지를 설치해야하고 리덕스 스토어 설정이 복잡합니다. 더 사용하기 쉽게 redux-toolkit 을 사용하는 법도 또다른 방법입니다.

56. Flux 패턴에 대해 설명해주세요.

57. Context API와 Redux를 비교해주세요.

58. Redux의 3대 원칙에 대해 설명해주세요.

• single source of truth : 상태 관리 저장소는 단일 저장소로 존재해야합니다.
• state is read-only : 상태는 읽기전용으로 변경을 하기 위해서는 action 을 reducer 에 전파하는 것이 유일합니다.
• changes are made with pure functions : 상태 변경 로직을 정의하는 리듀서들은 순수함수로 작성되어야 합니다.

59. React-Query를 사용해보셨나요?

60. React-Query에 대해 설명해주세요.

61. React-Query의 등장 배경과 장점에 대해 설명해주세요.

62. Recoil을 사용해보셨나요?

63. Recoil에 대해 설명해주세요.

64. Recoil에서 Loadable의 개념에 대해 설명해주세요.

65. Recoil에서 비동기로 데이터를 받아올 때 State를 어떻게 관리하셨나요?

66. Recoil에서 로딩, 성공, 에러와 관련된 처리를 어떻게 하셨나요?

67. ⭐ Redux와 Recoil에 대해 비교 설명해주세요. (개념, 장단점)