react@18.2.0

⛏️ 공식문서

React

The library for web and native user interfaces

https://react-ko.dev/

💾스터디레포

GitHub - prgrms-web-devcourse/FEDC4-React18-Document-Study: 일주일동안 진행하는 React.js 18 공식문서 읽기 스터디

일주일동안 진행하는 React.js 18 공식문서 읽기 스터디. Contribute to prgrms-web-devcourse/FEDC4-React18-Document-Study development by creating an account on GitHub.

https://github.com/prgrms-web-devcourse/FEDC4-React18-Document-Study

📅 스터디 하는 날

🧭 스터디 진행 방법

• 자신이 담당한 부분을 학습하고, 정리한 내용과 공식 문서를 함께 읽으며 설명합니다.

• 각자 담당하는 발표 파트는 노션문서를 참고합니다.

• 발표는 함께 문서를 읽으면서 공유하는 느낌으로 “부담없이” 진행합니다.

• 학습하면서 정리한 문서나 소스코드는 스터디 진행 전까지 PR을 작성합니다.

• 마크다운 문서에 학습 내용을 정리해도 좋고, 노션 등 외부 편집기에서 정리 후 마크다운에는 링크만 작성해도 좋습니다.

💡발표 파트

reference

[Hooks]

기범

나연

이찬

• useContext

• useEffect

• useMemo

• useDeferredValue

• useSyncExternalStore

[Components]

기범

나연

이찬

• <StrictMode>

[API]

기범

나연

이찬

• forwardRef

• startTransition

[React DOM - Components]

기범

나연

이찬

• <option>

• <textarea>

[React DOM - API]

기범

• hydrate

나연

• findDOMNode

• unmountComponentAtNode

이찬

• deprecated

• render

[React DOM - Client API]

기범

이찬

• hydrateRoot

[React DOM - Server API]

기범

나연

이찬

• renderToString

• renderToNodeStream

[LegacyAPI]

기범

• Component

• createElement

• createFactory

나연

• Children

• cloneElement

• PureComponent

이찬

• createRef

• isValidElement

Learn React

[UI구성하기]

기범

• JavaScript in JSX with Curly Braces / JSX에서 JavaScript 사용하기

• Passing Props to a Component / 컴포넌트에 props 전달하기

• Conditional Rendering / 조건부 렌더링

나연

• Your First Component / 첫번째 컴포넌트

• Importing and Exporting Components / 컴포너트 import 및 export

• Writing Markup with JSX / JSX로 마크업 작성하기

이찬

• Rendering Lists / 목록 렌더링

• Keeping Components Pure / 컴포넌트 순수성 유지

[상호작용 추가하기]

기범

• Queueing a Series of State Updates / 이벤트에 응답하기

• Updating Objects in State / 객체 state 업데이트

• Updating Arrays in State / 배열 state 업데이트

나연

• State: A Component's Memory / state : 컴포넌트의 메모리

• Render and Commit / 렌더링하고 커밋하기

• State as a Snapshot / 스냅샷으로서의 state

이찬

• Responding to Events / 이벤트에 응답하기

[State 관리]

기범

• Scaling Up with Reducer and Context / reducer와 context로 확장하기

나연

• Preserving and Resetting State / state 보존 및 재설정

• Extracting State Logic into a Reducer / state 로직을 reducer로 추출하기

• Passing Data Deeply with Context / context로 데이터 깊숙이 전달하기

이찬

• Reacting to Input with State / state로 입력에 반응하기

• Choosing the State Structure / state 구조 선택

• Sharing State Between Components / 컴포넌트 간의 state 공유

[탈출구]

기범

• Referencing Values with Refs / ref로 값 참조하기

• Manipulating the DOM with Refs / ref로 DOM 조작하기

• Removing Effect Dependencies / Effect 의존성 제거하기

나연

• Separating Events from Effects / 이벤트와 Effect 분리하기

이찬

• Synchronizing with Effects / Effect와 동기화하기

• You Might Not Need an Effect / Effect가 필요하지 않을 수도 있습니다

• Lifecycle of Reactive Effects / 반응형 Effect의 생명주기

• Reusing Logic with Custom Hooks / 커스텀 훅으로 로직 재사용하기