혹시나 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장의 도움이 됩니다

React hook 과제

useParams

현재 URL에서 path parameter를 추출할 수 있는 메서드

  • react-router-dom 에서 제공하는 Hook
  • 객체를 리턴
import { useParams } from 'react-router-dom';
let { userId } = useParams();


useNavigate

URL 경로를 변경해주는 hook
cf. 뒤로가기 기능도 구현할 수 있다. navigation(-1)

  • react-router-dom 에서 제공하는 Hook
  • 함수를 리턴
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate(이동할패스);


커스텀 훅 : useFetch

  • hook은 컴포넌트의 최상위 위치에서 사용
    : useEffect, 이벤트 함수 속에서 hook을 호출하면 아래와 같은 에러가 발생한다.


PUT vs PATCH

  • PUT : 전체 수정(완전 교체), 없으면 추가
  • PATCH : 부분 수정

주의할 점

  • json 형식으로 fetch요청에 body를 보낼 때,
    • JOSN.stringify() 로 변환
    • header에 "Content-Type": "application/json" 추가



참고

Json-server 라이브러리

Json으로 된 데이터 객체 파일로 REST API 서버를 대신하여 구축해주는 라이브러리
-> 요청 후 실제 해당 파일이 수정되어 데이터가 변경됨

  • 테스트용
    : 실제 서비스를 만들 때 서버를 구축하는 것 대신 사용하지는 말아야 한다.

  • id key 자동생성
    : key 속성을 추가하지 않아도 자동으로 생성되지만, 요청이 제대로 들어가지 않았을 경우에도 id속성만 추가될 수도 있으므로 주의한다.

사용법

  1. npm으로 라이브러리 설치
    npm i -g json-server

  2. json 데이터 디렉토리에서 서버 실행
    json-server --watch <파일명> --port <서버포트>

json-server 화면


form 안에 버튼이 있는 경우

버튼의 type 속성의 기본값이 submit이므로, 버튼을 누르면 onSubmit 이벤트가 발생

<form onSubmit={handleSubmit}>
    <label>내용</label>
    <textarea
            required
            value={body}
            onChange={(e) => setBody(e.target.value)}
            placeholder="내용을 입력해주세요."
    ></textarea> 
    <button /* type="submit" 기본 */ >등록</button>
</form>

상태변경함수 setState의 비동기적 처리

  • 상태변경함수는 비동기적으로 처리
    : 위에서 차례대로 처리되지 않고 이벤트 핸들러가 종료된 후에 갱신된다.

    const [state, setState] = useState(false);
    
     const handleLikeClick = () => {
        console.log("1번", state);
        setState(!state);
        console.log("2번", state);
      };
      // 이벤트 처음 적용 될 때 : 1,2번 콘솔 동일하게 false
      // 이벤트 두번째 적용 될 때 : 1,2번 콘솔 동일하게 true
      // 이벤트 세번째 적용 될 때 : 1,2번 콘솔 동일하게 false
  • 중복된 상태 갱신은 마지막 명령만 적용

    const [count, setCount] = useState(1);
     const handleCount = () => {
        setCount(9);
        setCount(3);
     };
     console.log(count); // 3




이해도 자가 점검 리스트

Chapter1. React 심화

Chapter1-1. Virtual DOM

  • Virtual DOM이 나오게 된 배경에 대해 이해합니다.
  • DOM의 조작 속도가 느려지는 이유와 어떻게 가상 DOM이 더 빠른 지에 대해 이해합니다.
  • Virtual DOM의 형태에 대해 이해합니다.

Chapter1-2. React Diffing Algorithm

  • React Diffing Algorithm의 두 가지 가정에 대해 이해합니다.
  • React가 DOM 트리를 탐색하는 방법에 대해 이해합니다.
  • 다른 타입의 DOM 엘리먼트인 경우와 같은 타입의 DOM 엘리먼트인 경우의 알고리즘 동작 방식을 이해합니다.
  • 자식 엘리먼트의 재귀적 처리와 key에 대해 이해합니다.

Chapter2. React Hooks

Chapter2-1. Compoenet와 Hook

  • Function Component와 Class Component에 대해 이해합니다.
  • Hook에 대해 이해합니다.
  • Hook 사용 규칙에 대해 이해합니다.

Chapter2-1. useMemo

  • useMemo을 어느 때에 사용하는지 이해합니다.
  • Memoization의 개념에 대해 이해합니다.
  • 실습을 통해 useMemo을 직접 작성해보고 어떻게 작성하는지 이해합니다.

Chapter2-2. useCallback

  • useCallback을 어느 때에 사용하는지 이해합니다.
  • useCallback과 참조 동등성에 대해 이해합니다.
  • 실습을 통해 useCallback을 직접 작성해보고 어떻게 작성하는지 이해합니다.

Chpater2-3. Custom Hooks

  • custom hook을 어느 때에 사용하는지 이해합니다.
  • custom hook의 작성 규칙과 작성 방법에 대해 이해합니다.

Chapter3. React의 주목해야 할 기능

  • React가 버전 18로 업데이트 되면서 어떤 점이 바뀌었는지 이해한다.

Chapter3-1. 코드 분할(Code Spliting)

  • 번들링한 앱들이 코드 분할이 필요한 이유에 대해 이해합니다.
  • React는 어떤 방식으로 코드 분할을 하는지 이해합니다.

Chapter3-2. React.lazy()와 Suspencse

  • React.lazy()의 사용법과 어느 때에 사용하는지 이해합니다.
  • React.Suspense의 사용법과 어느 때에 사용하는지 이해합니다.

과제 - React Hooks 적용하기

  • Hook의 사용법을 익히며 직접 앱을 최적화하고 명료하게 만들 수 있습니다.
  • React Suspense를 직접 Route에 적용해 볼 수 있습니다.

자기주도적 학습 가이드

이해도 자가 점검 리스트의 결과를 토대로 자기주도적 학습 계획을 수립하고 실천해 보세요.

오늘 학습이 어려웠다면(0~15개)

  • 개념학습 다시 보기
  • 퀴즈 다시 풀어보기
  • 이해되지 않는 개념 아고라스테이츠에 질문하기

오늘 학습이 수월했다면(15~20개)

  • 해당 유닛의 주요 개념을 블로그에 정리하기
  • 이해되지 않은 개념은 검색을 통해 자기주도적 학습 후 블로그에 정리하기
  • 아고라스테이츠에 올라온 다른 수강생의 질문에 답변하기

추가적인 학습을 하고 싶다면(21~25개)

**

0개의 댓글