패스트캠퍼스 챌린지 11일차 - 한 번에 끝내는 React의 모든 것 초격차 패키지 Online

수강 인증샷

 

---

패스트캠퍼스 챌린지란?

 패스트캠퍼스에서 진행하는 '50일 공부 루틴 챌린지' 행사로 50일 동안 매일 수강 인증샷과 함께 학습 기록을 게시글로 남기는 행사다.

---

11일차

 11일차에는 Part 1. React 기초 Ch 01. React 맛보기 챕터에서 16. Hook Flow 이해하기 1과 17. Hook Flow 이해하기 2 강의 내용에 대해 기록하려 한다.

 Part 1. React 기초 Ch 01. React 맛보기 챕터에서 16. Hook Flow 이해하기 1 강의에서는 컴포넌트와 React Hook들이 어떤 흐름으로 진행되는지 간단하게 알아보는 시간을 갖는다. 먼저, useState에서 두 번째 배열인 setState 함수는 처음에 인자로 이전 state 값을 받는다. 따라서, prev와 같은 방식으로 인자를 받고 그 값을 이용하여 상태를 바꿀 수 있다. 다음으로, 컴포넌트와 React Hook들의 흐름을 보면 먼저 컴포넌트가 렌더링을 시작하면 setState와 같이 상태를 렌더하고 렌더가 끝나면 그다음에 useEffect를 렌더한다. useEffect는 사이드 이펙트이기 때문에 일단 모든 것이 다 그려지고 나서 그 이후 동작들에 대한 것을 기록한다.

 17. Hook Flow 이해하기 2 강의에서는 부모 - 자식 컴포넌트 간에 흐름, 그리고 useEffect에서 cleanup이 들어갔을 때의 흐름을 자세하게 공부한다. 먼저, 자식 컴포넌트가 조건부로 걸려있고 부모 컴포넌트를 렌더링하면 시작 - useState - 끝 - useEffect와 같은 흐름이다. 여기서 자식 컴포넌트를 시작하면 부모 시작 - 부모 끝 - 자식 시작 - 자식 useState - 자식 끝 - 부모 useEffect cleanup - 자식 useEffect - 부모 useEffect 순서로 진행된다. 만약 자식 컴포넌트에 상태 변화가 일어난다면 자식 시작 - 자식 끝 - 자식 useEffect cleanup - 자식 useEffect 가 일어난다. 만약 여기서 자식 컴포넌트를 닫아주면 부모 시작 - 부모 끝 - 자식 useEffect cleanup - 부모 useEffect cleanup - 부모 useEffect 순서로 진행된다.

---

본 게시글은 이벤트 참여를 위해 작성된 게시글입니다.

 

---

패스트캠퍼스 공식 홈페이지 : https://bit.ly/37BpXiC