Thumbnail
개발 · 프로그래밍 프론트엔드

리액트 공식문서 함께 공부하기 대시보드

(5)
6개의 수강평 ∙  3,245명의 수강생

무료

지식공유자: 정재남
총 71개 수업 (31시간 54분)
수강기한: 
무제한
수료증: 미발급
난이도: 
입문
-
초급
-
중급이상
지식공유자 답변이 제공되는 강의입니다
폴더에 추가 공유

입문자를 위해 준비한
[프론트엔드, 풀스택] 강의입니다.

2023년 리뉴얼된 React 공식 문서를 함께 학습해요.

✍️
이런 걸
배워요!
리액트 공식문서를 처음부터 끝까지 함께 읽어요
종종 리액트 외적인 자바스크립트 지식들도 다뤄요

혼자가 외롭다면 시간차 스터디는 어때요?
함께하는 리액트 공식문서 스터디

📢 알려드립니다

  • 해당 강의는 지식공유자가 진행한 React 공식문서 스터디의 녹화분입니다.
  • React 공식문서 스터디는 《React 공식문서》를 함께 읽으며 번역 및 공부하는 취지의 모임으로서, 함께 번역한 내용을 지식공유자가 낭독하고 예제 코드를 실행하며 참가자들과 함께 해석, 유추, 보충 설명하는 방식으로 진행되었습니다.

함께 배우는 React 💡

혹시 내 얘기라면 주목하세요!

“실무에서 React를 쓰고는 있지만 정확한 사용법을 이해하고 있진 않아요.”
“React 공식문서를 읽어보려 해도, 영어와 분량의 압박 때문에 선뜻 도전하지 못하고 있어요.”

이 강의는 함께 《React 공식문서》를 읽고 예제 코드를 실행하는 방식으로 진행된 React 공식문서 스터디의 진행 과정을 담고 있습니다. 함께 React를 공부해 보아요!

  • ✅ React 전반에 대한 이해 수준을 대폭 끌어올릴 수 있습니다.
  • ✅ 기존에 잘못 작성한 코드를 발견하고 리팩토링하기 위한 명확한 기준을 세울 수 있게 돼요.
  • ✅ 새로운 기능도 쉽게 이해하고 바로 적용해볼 수 있어요.

영어 문장 바로 아래에 한글 번역이 있어요. 원문만 있을 때나 번역글만 있을 때보다 훨씬 이해하기 좋습니다.

React 외적인 내용도 많이 다루어서, JavaScript 생태계의 전반적인 지식을 두루 섭렵할 수 있어요.

💡 학습 전 참고해주세요

  • 학습 자료는 https://react-ko.dev 를 확인해주세요.
  • HTML, CSS 및 기본적인 Javascript 지식은 갖추고 있어야 합니다.
  • 레퍼런스 파트 뒷부분은 향후 순차적으로 업데이트될 예정입니다. (최종 업데이트 예상 시기: 7월 말)

지식공유자의 다른 강의가 궁금하다면?

이런 분들께 추천드려요!

🎓
학습 대상은
누구일까요?
공식문서를 읽어본 적 없는 현직 개발자
공식문서로 공부하는 데에 어려움을 느끼는 취준생 등
📚
선수 지식,
필요할까요?
자바스크립트

안녕하세요
정재남 입니다.
정재남의 썸네일

안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.

저서: 코어 자바스크립트

유튜브 채널: FE재남

아티클 및 인터뷰 영상:

커리큘럼 총 71 개 ˙ 31시간 54분의 수업
이 강의는 영상이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 학습 | UI 구성하기
첫번째 컴포넌트 25:18
컴포넌트 import 및 export 14:51
JSX로 마크업 작성하기 12:38
JSX에서 JavaScript 사용하기 21:57
컴포넌트에 props 전달하기 49:49
조건부 렌더링 19:20
목록 렌더링 29:19
컴포넌트 순수성 유지 32:19
섹션 2. 학습 | 상호작용 추가하기 (Adding Interactivity)
이벤트에 응답하기 35:27
state: 컴포넌트의 메모리 34:46
렌더링하고 커밋하기 10:28
스냅샷으로서의 state 23:35
여러 state 업데이트를 큐에 담기 22:47
객체 state 업데이트 52:38
배열 state 업데이트 29:31
섹션 3. 학습 | state 관리 (Managing State)
state로 입력에 반응하기 33:31
state 구조 선택 45:53
컴포넌트 간의 state 공유 21:25
state 보존 및 재설정 36:25
state 로직을 reducer로 추출하기 38:28
context로 데이터 깊숙이 전달하기 24:54
reducer와 context로 확장하기 16:57
섹션 4. 학습 | 탈출구 (Escape Hatches)
ref로 값 참조하기 45:06
ref로 DOM 조작하기 01:11:07
Effect와 동기화하기 01:19:32
Effect가 필요하지 않을 수도 있습니다 55:53
반응형 Effect의 생명주기 01:09:35
이벤트와 Effect 분리하기 30:39
Effect 의존성 제거하기 42:05
커스텀훅으로 로직 재사용하기 53:11
섹션 5. 레퍼런스 | react | Hooks
useState 41:52
useReducer 23:23
useContext 21:42
useRef 18:52
useImperativeHandle 07:59
useEffect 44:52
useLayoutEffect 07:40
useInsertionEffect 09:40
useMemo 49:53
useCallback 12:24
useTransition 25:35
useDeferredValue 19:06
useDebugValue 03:10
useId 21:40
useSyncExternalStore 14:18
섹션 6. 레퍼런스 | react | Components
<Fragment> 07:33
<Profiler> 12:22
<StrictMode> 07:45
<Suspense> 30:25
섹션 7. 레퍼런스 | react | APIs
createContext 08:53
forwardRef 11:45
lazy 03:55
memo 12:04
startTransition 14:16
섹션 8. 레퍼런스 | react | Components
Common(e.g. <div>) 40:14
<input> 13:29
<option> 01:52
<progress> 01:45
<textarea> 07:38
섹션 9. 레퍼런스 | react-dom
APIs - createPortal 15:18
APIs - flushSync 05:53
APIs - deprecated APIs 25:57
Client APIs 27:25
Server APIs 25:56
Legacy APIs 20:37
강의 게시일 : 2023년 07월 06일 (마지막 업데이트일 : 2023년 08월 06일)
수강평 총 6개
수강생분들이 직접 작성하신 수강평입니다.
5
6개의 수강평
5점
4점
3점
2점
1점
VIEW 추천 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
쿠카이든 thumbnail
5
리액트 공부를 하고 있습니다! 항상 좋은 강의 감사드립니다!
2023-07-13
김성현 thumbnail
5
좋은 강의 감사합니다.
2023-08-24
daum081308 thumbnail
5
무료로 이런 강의를...! 말도 안되게 대박입니다... 리엑트 두루뭉실하게만 알고 실무에서도 대충 이거면 되겠지? 라는 생각으로 썼는데 강사님 강의듣고..내가 멍청했구나를 알게됬습니다. 기초부터 차근차근 알게 되서 부족한 부분도 채울수 있게 됩니다. 꼭 들으세요 ^ ^
2024-01-15
조하민 thumbnail
5
리액트를 통해 문서를 쓰는 방법을 공부할 수 있었고 서류 작업에 있어서 도움이 되었습니다.
2023-07-11
pchanwan thumbnail
5
2024-04-18