React 관련 질문을 나에게 했을때 막힘없이 대답하는것을 목표로,
https://github.com/sudheerj/reactjs-interview-questions?tab=readme-ov-file#what-is-react
이 레포 속 CORE한 질문들을 공부해 나가기로 결심했다.
총, 78개의 질문들이 있고, 여기서 추가적으로 hooks 나 router 등등의 기술들에 대해서도 다룰 예정이다.

너무 기본적인 내용들까지도 정리해 나간다기 보다, 내가 평소 오해하고 있었던 부분이나 헷갈렸던 부분들 위주로 정리할 내용이다.

React의 특징

1. SSR도 React의 특징이다.

• ssr은 Next.js !라고 너무 연관지으며 살아왔지만, 사실 ssr이 React의 특징 중 하나이다.

2. 가상 DOM을 사용한다!

• 가상 DOM을 사용함으로써 JS DOM 을 생성할때 비용이 많이 들곤 했는데, 이를 줄여주었다.
  여기에 diffing 알고리즘이 적용이 되고, 변경된 부분을 비교하며 실제 DOM업데이트를 진행한다고 한다. 그게 바로 reconciliation 이라고 한다.

3. element 와 component 는 다르다 !

• component가 element 들의 집합이 될 수 있다. element 는 단순 UI를 나타내는 가장 작은 단위이다.

Pure Component란?

1. 상태나 props가 변경될 때만 렌더링 되는 React 컴포넌트이다.

• 함수형 컴포넌트에서 이와 비슷한 역할을 하는 예시는 React.memo 가 있다.

2. 그렇다면, useState 는 PureComponent 인가? 이것도 상태가 변경될때 마다 렌더링을 하는데~??

• NO. hooks는 상태를 관리 하기 위해 사용되고, PureComponent는 렌더링 최적화를 위해 사용된다. 불필요한 렌더링을 방지하는 것이다 !

3. react-query 에서 캐싱이 이와 비슷한 기능이 아닐까?

• 맞다. React.memo 처럼 바뀐 부분만 인지하여 수정해주는 기능이 비슷한 역할을 한다 ! 즉, 데이터가 변경될때만 컴포넌트를 다시 렌더링 하는 최적화 전략이라는 것이다.

state 와 props

1. state와 props의 연관관계는 무엇일까?

• state는 내부에서 관리되고 변경될 수 있는 데이터 이고, props는 부모 컴포넌트에서 자식 컴포넌트로 전달 되는 데이터이다.
• 그렇기에 state도 props로 전달될 수 있다 ! 부모컴포넌트의 상태를 자식 컴포넌트로 넘겨서 활용할 수 있는 것이다!

HTML과 React의 이벤트 처리방식

1. 차이점이 뭐가 있을까?

• HTML에서 이벤트 처리할 생각을 안 해봤는데, 차이점은 바로, HTML에서는 이벤트 이름을 소문자로 작성하지만, React에서는 camelCase를 사용하는 점이라고 한다. (너무나 당연하게 onChange 로 사용해왔지만, html에서는 그게 아니었다 !!)
• 또한 HTML 에서는 return false 를 사용해 기본 동작을 방지한다. React에서는 preventDefault() 메서드를 명시적으로 호출해야한다.

React 에서 Synthetic Events란?

• 너무나 당연하게 event를 가져다가 쓸때 "event.어쩌구"를 활용하고 있었는데, 여기서 event를 쓸 수 있었던 이유는 synthetic events 덕분이었다.
• eynthetic events는 기본 이벤트를 감싸는 크로스 브라우저 레퍼이다.
• 이 API는 기본 브라우저 이벤트와 동일한 메서드를 제공하지만, 모든 브라우저에서 일관되게 동작하도록 해준다.

Inline Conditional Expressions

• 삼항연산자를 사용해서 코드를 작성하는 방식을 말하는데 나는 이 경우를 공통컴포넌트에서 많이 활용하곤 한것 같다.
• 하지만 페이지 뷰 전체를 바꾼 다던지 많은 코드에 대해서 무조건적으로 삼항연산자를 쓰는 것은 좋은 경우가 아니라고 생각했다.

Key prop?

• 배열 요소에서 map을 돌릴때 사용한다.
• key prop을 사용하면 좋지 않은 경우?
  - 바로, 항목의 순서에 따라 변경이 될 수 있는 경우 사용하는 것이 적절하지 않다. key prop은 문자열로 변환되어 사용되곤 하는데, 그저 의미가 없는 숫자이기 때문에, map을 돌릴때 순서대로 호출 되지 않는 경우가 있다면 내가 생각한 흐름의 배열 호출이 아니게 될 수 있다.
  

Shadow DOM과 Virtual DOM 사이의 차이점?

• 이 DOM은 브라우저의 기술이다.
  {Shadow DOM 이란?}
• 나에게 익숙하지 않았던 Shadow DOM은 스타일이 외부로부터 침범받거나 외부의 스타일을 침범하지 않도록 도와주는 DOM이다.
• Shadow DOM은 JS 생성될 때 동시에 생성 되는 것이 아니라, 명시적으로 함수를 호출해서 만들어줘야 한다 !

React Fiber는?

• Fiber는 리액트의 내부 architecture를 의미한다 ! 동기적으로 실행 되어지는 DOM 생성 렌더링이 아닌, 비동기적으로 우선순위를 따지며 실행이 되어지는 렌더링 과정을 가진다!
• 그래서 우선적으로 처리할 수 있는 text들을 먼저 띄워주고 이미지를 뒤늦게띄워주는 그러한 DOM 생성 방식이 바로 이 fiber 구조 덕분인것이다.
• 참고하기에 좋은자료 : https://d2.naver.com/helloworld/2690975

controlled components와 uncontrolled components

• 보통 우리가 React에서 onClickk onChange하는게 바로 React에서 state를 controlled하는 경우였다. 하지만, uncontrolled components는 DOM 에서 ref를 통해 값을 가져오는 것이어서 onClick 같은 state들을 사용하지 않는다.

createElement와 cloneElement

• create는 새로운 Element를 생성하는데 사용하고, clone은 이미 존재하는 엘리먼트를 복제해 새로운 props를 적용하는데 사용한다.
  {그렇다면 cloneElement에서 props로 컴포넌트를 넘겨서 컴포넌트와 컴포넌트의 합성을 할 수 있을까?}
• 가능하다. 하지만, 그 경우를 완전한 cloneElement라고 구분짓기엔 어렵다.

HOC (고차 컴포넌트)

• 컴포넌트를 인자로 받아서 새로운 컴포넌트를 반환하는 함수이다.
• 나는 종종 이 친구를 HOC으로 분류하기 보단 그저 컴포넌트로 분류했다.
  {HOC의 다양한 예시}
• 인증 처리, 데이터 패칭, 로깅 및 추적 등등
  => 다양한 컴포넌트를 받아와서 실행 시키곤 한다.