ReacTree 질문 작성

Unit 1

• React
• React를 사용하는 이유는 무엇인가요??

• JSX
• JSX란 무엇일까요??

• Component
• Component란 무엇일까요??

• Functional Component
• 함수형 컴포넌트(Functional Component)가 React에 도입된 배경을 조사하여 설명해주세요

• Props and State
• Props와 State의 차이가 무엇인지 설명해 주세요

• Life Cycle
• React 생명주기에 대해 설명해주세요

• Hook
• Hook이란 무엇일까요??

• useState
• useState란 무엇일까요??

• useEffect
• useEffect란 무엇일까요??

• useMemo
• useMemo란 무엇일까요??

Unit 2

• useContext
• useContext란 무엇일까요??

• useReducer
• useReducer란 무엇일까요??

• useCallback
• useCallback이란 무엇일까요??

• useRef
• useRef란 무엇일까요??

• Component re-rendering
• Component가 re-rendering되는 조건 3가지를 설명해주세요

• React memo
• React.memo란 무엇일까요??

• Portal
• Portal이란 무엇일까요??

• PropTypes
• Component 사이에서는 데이터 전달이 잦게 일어납니다. PropTypes를 써야 하는 이유를 설명해주세요

• CRA
• create-react-app

• Eslint and Prettier
• Eslint 와 Prettier의 차이점을 설명해주세요

Unit 3

• Virtual DOM
• Virtual DOM이란 무엇인지, HTML DOM과는 어떤 차이가 있는지 설명해주세요

• Browser
• 브라우저 동작과정(렌더링 과정)에 대해 조사하여 설명해주세요

• SPA
• Single Page Application이란 무엇인지 조사하여 설명해주세요

• Pros and Cons
• React의 장점과 한계에 대해 설명해주세요

• Composition
• React Component를 합성(Composition)하는 방법에 대해 설명해주세요

• HOC
• 고차 컴포넌트(HOC, Higher Order Component)란 무엇인지 설명해주세요

• Reconciliation
• React는 렌더링 과정에서 재조정(Reconciliation)을 수행합니다 재조정이란 무엇인지 설명해주세요

• State Management
• React에서의 상태관리란 무엇인지 설명해주세요

• Global State Management
• 전역 상태관리(Global State Management)란 무엇이고, 전역 상태관리를 위한 툴에는 무엇이 있는지 조사하여 설명해주세요

• Rewards
• 여기까지 오시느라 고생 많으셨습니다.

공부할 때 참고 링크

• HTML DOM 관리 관련 링크
Manage HTML DOM with vanilla JavaScript - HTML DOM
Manage HTML DOM with vanilla JavaScript
https://htmldom.dev/

• 전반적인 리엑트 학습 관련 링크
벨로퍼트와 함께하는 모던 리액트
본 강의자료는 패스트캠퍼스 온라인 강의 에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있다는 전제하에 진행됩니다. 이 튜토리얼의 이름은 왜 "모던 리액트" 일까요? 사실, 개발 관련 튜토리얼에서 "모던함"을 오랫동안 유지하는 것이 솔직히 어렵기 떄문에, "모던" 이라는 키워드를 붙이는게 조금 조심스럽기도 합니다.

https://react.vlpt.us/

• useScroll Hooks 최적화 관련 링크
스크롤 이벤트 최적화
⚠ 이 포스팅은 자바스크립트의 비동기 처리에 대한 이해를 기반으로 작성되었습니다. 이 포스팅을 읽기 전, JavaScript의 Event Loop와 자바스크립트 비동기 처리 과정 일독을 추천 드립니다. 우리는 아래처럼 브라우저의 스크롤에 이벤트를 추가할 수 있습니다. 함수에 를 추가해보겠습니다. 함수가 마구 실행됩니다. 위 예시에서는 console을 찍는 function을 추가해줬지만 조금 무거운 이벤트를 등록하면 어떻게 될까요?

https://jbee.io/web/optimize-scroll-event/

window.requestAnimationFrame() - Web API | MDN
화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메소드를 호출하는것이 좋습니다. 이는 브라우저가 다음 리페인트를 수행하기전에 호출된 애니메이션 함수를 요청합니다. 콜백의 수는 보통 1초에 60회지만, 일반적으로 대부분의 브라우저에서는 W3C 권장사항에 따라 그 수가 디스플레이 주사율과 일치하게됩니다. 대부분의 최신 브라우저에서는 성능과 배터리 수명 향상을 위해 requestAnimationFrame() 호출은 백그라운드 탭이나 hidden 에서 실행이 중단됩니다.

https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

• useResize Hooks ResizeObserver API
Resize Observer - 요소의 크기 변화 관찰
Resize Observer는 설정한 요소의 크기 변화를 관찰하며,크기 변화를 제어할 경우 발생할 수 있는 무한 콜백 루프나 순환 종속성(Circular dependency) 등의 다양한 문제 없이 사용할 수 있습니다. ResizeObserver는 표준화 초안 단계(ED, Editor's Draft)이므로 브라우저 버전에 따라 네이티브 ResizeObserver의 사용법이 다를 수 있으니 폴리필(Polyfill) 사용을 적극 추천 합니다. 이 포스트에서는 @juggle/resize-observer 를 사용합니다.

https://heropy.blog/2019/11/30/resize-observer/

• useAsync Hooks 관련 자료
3. useAsync 커스텀 Hook 만들어서 사용하기
데이터를 요청해야 할 때마다 리듀서를 작성하는 것은 번거로운 일 입니다. 매번 반복되는 코드를 작성하는 대신에, 커스텀 Hook 을 만들어서 요청 상태 관리 로직을 쉽게 재사용하는 방법을 알아봅시다. src 디렉터리에 useAsync.js 파일을 생성하고, 다음 코드를 작성해보세요. useAsync.js useAsync 함수는 두가지 파라미터를 받아옵니다.

https://react.vlpt.us/integrate-api/03-useAsync.html

• 가끔씩 react를 하다가 만나는 eslint 경고인 display-name 관련 자료
React.Component - React
This page contains a detailed API reference for the React component class definition. It assumes you're familiar with fundamental React concepts, such as Components and Props, as well as State and Lifecycle. If you're not, read them first. React lets you define components as classes or functions.

https://reactjs.org/docs/react-component.html#displayname](https://reactjs.org/docs/react-component.html#displayname)

Higher-Order Components - React
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component.

https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging

• useEffect Hook 에 대한 이해
How the useEffect Hook Works (with Examples)
The useEffect hook is the Swiss Army knife of all the hooks. It's the solution to many problems: how to fetch data when a component mounts, how to run code when state changes or when a prop changes, how to set up timers or intervals, you name it.

https://daveceddia.com/useeffect-hook-examples/

A Simple Explanation of React.useEffect()
I am impressed by the expressiveness of React hooks. You can do so much by writing so little. But the brevity of hooks has a price - they're relatively difficult to get started. Especially useEffect() - the hook that manages side-effects in functional React components.

https://dmitripavlutin.com/react-useeffect-explanation/

• npm - package-lock.json 이란?
package-lock.json | npm Docs
package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.

https://docs.npmjs.com/cli/v7/configuring-npm/package-lock-json

• useRef 에 대한 이해
Hooks API Reference - React
Hook 는 React 16.8에서 새로 추가된 개념입니다. Hook을 통해 class를 작성하지 않고도 state와 같은 React 기능들을 사용할 수 있습니다. 이 페이지는 React에 내장된 Hook API를 설명합니다. Hook이 생소하다면 Hook 개요를 먼저 읽어 보기 바랍니다. 혹은 frequently asked questions 에서 유용한 정보를 찾을 수도 있습니다. 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다.

https://ko.reactjs.org/docs/hooks-reference.html#useref