[유데미x스나이퍼팩토리] 프로젝트 캠프 Next.js 1기 - 7일차

 

7일 차인 오늘은 배운 내용을 토대로 Tailwind CSS를 활용해 UI 퍼블리싱과 TodoList 실습을 진행했다. Tailwind CSS는 4px을 기준으로 유틸리티 클래스 적용할 수 있다는 점을 UI 퍼블리싱 진행을 통해 추가로 알게 되었고, Checkbox 커스텀시 Label 태그를 이용한 방식을 학습할 수 있었다.

 📚 학습한 내용
- Tailwind CSS 활용한 로그인/회원가입 UI 퍼블리싱 
- 컴포넌트의 리렌더링 조건 
- useState의 setState 콜백함수 
- ⭐️ Memoization
- TodoList UI 퍼블리싱 및 기능 구현

 

React Hook인 useState의 상태 변화 함수 setState 매개변수로 콜백함수를 사용하는 이유는 컴포넌트가 화면을 업데이트 하는 방식이 state의 상태값이 변경될 때마다 업데이트를 하는 게 아니라, 일정한 시간을 두고 일괄적으로 업데이트 하기 때문에 동기 방식이 아닌 비동기 방식으로 동작한다는 점 때문에 이전의 상태값을 참조하고 싶다면 콜백함수를 사용해야 한다.

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0); // 👈🏻 state 업데이트는 3 아닌, 1로 적용됨.
  const onClick = () => {
    setCount(count + 1); // 0 + 1
    setCount(count + 1); // 0 + 1
    setCount(count + 1); // 0 + 1   
    console.log(count); // 0
  };
  return (
    <div>
      <p> 현재 state : {count}</p>
      <button type="button" onClick={onClick}>
        +3
      </button>
    </div>
  );
}

 

setState 매개변수로 이전의 값을 참조할 필요가 없다면 콜백함수를 사용하지 않아도 된다. 그러나 이전의 상태값을 참조해야 한다면 콜백함수를 사용해야 한다. 불필요한 컴포넌트의 렌더링을 방지하기 위해 Memoization을 활용한 React Hook을 학습하면서 콜백함수의 필요성을 경험할 수 있었다. 

 

학습 내용 정리 노트

 

 

 

👩🏻‍💻 학습을 통해 느낀 점 

 

최적화는 경험해보지 않아 아직은 와닿지는 않는 개념이다. 불필요한 렌더링을 방지하는 이유는 성능적 이슈가 있기에 중요한 개념이라고는 생각된다. Memoization을 활용한 Hook들을 학습하면서 느낀 건  컴포넌트 내의 상태를 업데이트하는 동작 방식을 이해하는 게  중요하다고 생각되었다. useCallback, useMemo, useEffect 등.. 의존성 배열이 필요한 이유를 조금은 알게 되었다. 완벽하게 이해한 건 아니지만, 해당 Memoization이 필요한 상황에 맞는 Hook을 적용하기 위해 Hook들의 특징과 예제를 기록해두었다. 필요할 때마다 예제를 참고할 수 있도록 최대한 상세히 적으려고 노력했다. 

 

 

 

---

 

본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성되었습니다.

 

#유데미 #udemy #웅진씽크빅 #스나이퍼팩토리 #인사이드아웃 #미래내일일경험 #프로젝트캠프 #부트캠프

#Next.js #프론트엔드개발자양성과정 #개발자교육과정