JunhOpportunity / deep-react

👀 React의 공식 문서를 뜯어보며 새롭게 깨달은 내용들을 정리해보자

deep-react

👀 React의 공식 문서를 뜯어보며 새롭게 깨달은 내용들을 정리해보자 🤔 11월 둘째주까지 공식 문서에 대한 1차 정리를 완료한 뒤에 복습을 진행하며 내용을 이해하기 쉽게 다듬는 과정을 거칠 예정입니다.

실험실(v19 버전에서 출시 예정인 훅이나 아직 연구중인 것들)

• use hook

컴포넌트 내에서 Promise 또는 Context와 같은 리소스 값을 읽을 때 사용하는 React의 Hook

RFC 문서

• 0000-first-class-support-for-promises

use hook 관련 정보들을 담은 출시 전 문서

최신 버전 (목차와 요약)

기본 개념

• JSX

HTML처럼 작성되었지만 실제로는 내부적으로는 JavaScript

• Pure Component (순수한 컴포넌트)

Props를 활용하여 컴포넌트를 순수하게 만들자

• Props

{children} 을 적극 활용하자

UI에 관하여

• 컴포넌트

컴포넌트는 MarkUP을 뿌릴 수 있는 JS 함수이다

• 컴포넌트 import & export

루트 컴포넌트에서 다른 컴포넌트들을 생성하지 말고, 새로운 파일을 생성해 따로 작성

• JSX 마크업 규칙
• JSX 안에 JS

중괄호를 사용

• 조건부 렌더링

null 반환은 혼란을 야기할 수 있다

• 렌더링

상호 작용

• useState

React 렌더링은 지역 변수에 대한 변경 사항을 고려하지 않는다.

• 이벤트 핸들러

이벤트 핸들러에 전달된 함수는 호출되지 않고 전달되어야 한다. (함수 이름만 전달)

• 렌더링

React가 컴포넌트를 호출하는 것

• 스냅샷
• 객체 형태의 상태 업데이트

객체 상태를 직접 변경해서는 안된다. 반드시 새 객체를 생성하거나 복사해서 변경해야 한다. 리엑트가 상태 변화를 감지하지 못하기 때문이다.

• 배열 형태의 상태 업데이트

상태 관리

• 상태를 사용하여 UI 반응하기

React는 UI를 직접 조작하지 않는다. 대신, 보여주고 싶은 것을 선언하면 된다.

• 상태의 구조

어떤 상황에서 어떤 구조의 상태가 가장 효율적일까

• 컴포넌트 간 상태 공유

공통 상위 컴포넌트에서 props로 상태를 전달 받는다

• 상태 보존과 재설정

컴포넌트가 살아있다면 상태는 유지되고, 죽었다가 다시 살아난다면 상태가 재설정 된다

• useReducer

useState와 비슷하지만, 상태에 대한 처리까지 한 번에 모아둘 수 있는 효율적인 훅이다.

• useContext

Props 전달 말고 컴포넌트의 데이터를 “텔레포트” 하는 방법. 전역적으로 데이터를 사용

• Reducer & Context 결합

탈출용 해치

• useRef
• useEffect

useEffect 내부의 코드는 마운트 되었을 때 실행되고, useEffect 내부의 return은 마운트가 해제될 때 실행된다.

• useEffect는 꼭 필요한 경우에만 사용하자

특정 동작을 실행시키고 싶은데, 원치 않는 다른 동작도 함께 실행된다면 useEffect에서 제거 시키거나 useEffect를 사용하지 말아야 한다.

• Lifecycle

모든 컴포넌트는 동일한 생명주기를 가진다.

• 이벤트 핸들러와 useEffect 분리

특정 상호작용을 처리해야 할 경우 이벤트 핸들러를 사용한다

• useEffect 종속성 제거하기
• 커스텀 훅