항해99 5기 (정규 트랙)_4주차 WIL
1. What I did
(토요일에도 18시간 정도 했는데 update되지 않은 시간이다.)
1. Chapter 3-2. 주특기 숙련 주차
- 기간: 2022년 1월 28일 (금) @ 09:00 ~ 2022년 2월 3일 (목) @ 21:00
- 개인 과제 및 팀 과제 완료
- 개인 과제 도메인: https://nevergettingold.shop/
- 개인 과제 Github: https://github.com/nevergettingold/React_my_dictionary
- 팀 과제: https://www.notion.so/React-5-48f248607aa04d7d8f41d8c27645d1de
2. Chapter 3-3. 주특기 심화 주차
- 기간: 2022년 2월 4일 (금) @ 09:00 ~
- 리액트 심화반 강의 수강 완료, (추가 기능 제외) 게시글 작성 시 레이아웃 선택 추가 필요
3. This week's Keywords
1. 라이프사이클
- 컴포넌트의 수명 주기가 존재하는데, 이는 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.
- Mount: DOM이 생성되고 웹 브라우저 상에서 나타나는 것
- Mount 될 때 생하는 생명주기들
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
- Mount 될 때 생하는 생명주기들
- Update: 컴포넌트의 첫 번째 렌더링이 마치고 나면 호출되는 메서드
- 발생 시점
- props가 바뀔 때
- state가 바뀔 때
- 부모 컴포넌트가 리렌더링 될 때
- this.forceUpdate로 강제로 렌더링을 트리거할 때
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
- Unmount: 컴포넌트가 화면에서 사라지는 것
- componentWillUnmount
- 발생 시점
- 함수형 컴포넌트는 react hook 중 하나인 useEffect를 통해 라이프사이클을 관리할 수 있다.
(출처: https://react.vlpt.us/basic/25-lifecycle.html, https://kyun2da.dev/react/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4%EC%9D%98-%EC%9D%B4%ED%95%B4/,
https://guiyomi.tistory.com/21)
2. React hooks
-
Hooks 는 리액트 v16.8 에 새로 도입된 기능이며, 함수형태의 컴포넌트에서 사용되는 몇 가지 기술을 Hook이라고 부른다.
-
사용 규칙
- 최상위(at the top level)에서만 Hook 호출!
- 반복문, 조건문, 중첩된 함수 내에서 Hook 실행 X
- React 함수 컴포넌트 내에서만 Hook 호출!
- 일반 JavaScript 함수에서는 Hook을 호출 X
- 직접 작성한 custom Hook 내는 호출 가능!
-
State Hook (useState)
-
함수 컴포넌트 state를 추가하여, 다시 렌더링 되어도 그대로 유지
-
useState는 현재의 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공
-
이벤트 핸들러나 다른 곳에서 호출 가능; class의 this.setState와 거의 유사하지만, 이전 state과 새로운 state를 합치지 않는다는 차이점이 있다.
import React, { useState } from 'react'; function Example() { // "count"라는 새 상태 변수를 선언합니다 const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
-
useState는 인자로 초기 state 값을 하나 받는데, count는 0부터 시작하기 때문에 위 예시에서는 초기값으로 0 설정. 이 초기값은 첫 번째 렌더링에만 딱 한번 사용
- Effect Hook (useEffect)
- 함수 컴포넌트 내에서 side effects (컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업, 등)를 수행할 수 있게 해준다.
- React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것
import React, { useState, useEffect } from 'react';
function FriendStatus(props) {
const [isOnline, setIsOnline] = useState(null);
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
useEffect(() => {
ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
return () => { //해제하는 함수 반환
ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
};
});
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
React는 DOM을 바꾼 뒤에 “effect” 함수를 실행하고, Effects는 컴포넌트 안에 선언되어있기 때문에 props와 state에 접근할 수 있다. 기본적으로 첫 번째 렌더링도 포함하여 매 렌더링 이후에 effects가 실행된다.
Effect를 “해제”할 필요가 있다면, 해제하는 함수를 반환해준다.(이는 optional)
(출처: https://devbirdfeet.tistory.com/52, https://ko.reactjs.org/docs/hooks-overview.html)
2. How I felt
skip
Author And Source
이 문제에 관하여(항해99 5기 (정규 트랙)_4주차 WIL), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ne_ol/항해99-5기-정규-트랙4주차-WIL저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)