what to do
23.02.10-23.02.16 주특기 숙련 주차 / React
23.02.17-23.02.19 주특기 심화 주차 / React
라이프사이클
React의 컴포넌트는 생명주기가 있고, 라이프 사이클의 순서에 따라 생성되고 업데이트되고 사라진다. 즉, 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 의미한다.
라이프사이클은 크게 세 단계로 나누어 볼 수 있다.
Mount, Update, Unmount
Mount: 처음 컴포넌트를 불러와서 생성하는 단계
Update: 아래 4가지 경우로 인해 데이터가 바뀌거나 부모 컴포넌트가 랜더링할 때 일어나는 단계
1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
4. 강제로 업데이트 했을 때 (forceUpdate())
Unmount: 페이지를 이동하거나, 사용자의 행동으로 인해 컴포넌트가 화면에서 사라지는 단계
React Hooks
React Hooks은 리액트의 새로운 기능으로 React 16.8버전에 새로 추가된 기능으로 state, component에 대한 것들을 바꿔놓았다.
간단하게는 function component에서 state을 가질 수 있게 됨으로써 react hook을 사용하여 만든다면 class component, render 등을 안해도 된다는 뜻으로 모든 것리 하나의 function이 되는 것 즉, 함수형 프로그래밍이 가능해지는 것이라고 할 수 있다.
예를 들어 가장 대표적 훅인 useState는 현재의 state 값과 이 값을 업데이트하는 함수를 제공하며, 이 함수를 핸들러나 다른 곳에서 호출할 수 있습니다. 클래스에서 사용하던 this.setState와 유사하지만 이전 state와 새로운 state를 합치지 않는다는 차이점이 존재하게 되는 것이다.
가장 많이 쓰이는 hook들
useState, useEffect, useContext, useReducer, useMemo, useCallback, useRef, 커스텀 Hooks ...
각각의 종류별 기능이 워낙 사용법이 방대하고, 리액트에서 너무 잘 사용되어지므로 숙지는 필수라고 생각된다.
금주회고
지난주 목표 : 주어진 리액트 숙련주차 Lv2 완료 + 일찍 완료했다면 Lv3 도전
지난주 목표 달성률 90/100
과제는 모두 완료했으나, 온전히 다 알고 완료한 과제는 아니었다 생각해 90점을 주었다.
Lv3의 경우 배우지않고 사용하라 유도하는 단계였으므로 구글링한 코드를 맞게 적용시켰다는 점에 의의를 두고자 한다.
또한, 스타일 컴포넌트 복습 차원에서 가져온 코드 css 파일 중 몇가지를 스타일 컴포넌트화 하였다.
금주 목표 : 주어진 리액트 심화주차 Lv4 완성 및 3주간 배운 내용 복습
➕ 일찍 완료했다면 Lv5 도전
