Nowon Leeblog.nwlee.com·Dec 16, 2024NextJS에서 캘린더 컴포넌트 개발하기요구사항 캘린더 컴포넌트를 개발하게 된 계기는 다음과 같다. 공개된 라이브러리는 프로젝트에 맞게 UI를 변경하기 까다롭다. 서버 사이드 렌더링 프레임워크의 경우 렌더링에서 에러가 발생하는 경우가 종종 있다. 라이브러리마다 지원하는 기능의 범위가 다르다. Next.js 프로젝트를 세팅하고 기본적인 달력 기능을 하는 페이지를 만들어 본 과정을 기록했다. 컴포넌트를 작성하기 전 다음과 같은 작업을 거쳤다. create-next로 Next....Next.js
Nowon Leeblog.nwlee.com·Dec 16, 2024React 웹 페이지에서 Quill 에디터 텍스트 수정 페이지 작업하기Quill Quill은 웹에서 사람들이 텍스트를 편하게 입력할 수 있도록 도와주는 텍스트 에디터이다. Quill을 도입한 이유는 다음과 같다. Quill은 다양한 서식의 텍스트를 작성할 수 있는 위지윅 에디터이다. 다양한 플랫폼을 지원한다. 오픈소스로 공개되어 도입하기 어렵지 않다. 프로젝트에서 필요로 하는 모듈만 도입하여 에디터를 개발할 수 있다. React에서 Quill 공식문서에서는 에디터를 리액트 웹 페이지에 렌더링하는 방법을...React
Reme Le Haneremelehane.dev·Dec 10, 2024Using useReducer for Complex State LogicSkill: Manage Complex State with useReducer Instead of juggling multiple useState calls, you can use useReducer to handle state transitions in a more structured way, similar to how Redux works. When to Use useReducer When your state has multiple int...React
Nowon Leeblog.nwlee.com·Dec 9, 2024타입스크립트 라이브러리 프로젝트 진행하면서 겪은 시행착오계기 리액트 프론트엔드 프로젝트에 참여해서 캘린더 컴포넌트를 작성했던 적이 있었다. 외부 라이브러리로 제공되는 캘린더 컴포넌트는 디자인을 변경하거나 라이브러리에 없는 필요한 기능을 추가하는데 시간이 많이 소요됐던 적이 있었다. 디자인에 관계없이 캘린더 기능을 제공해주는 리액트 훅이 있었으면 좋겠다고 생각했다. 깃허브에서 찾아볼 수 있는 라이브러리 저장소는 여러 패키지로 이뤄진 단일 저장소로 구성되어있는 경우가 많았다. 실제 라이브러리 예시 ...TypeScript
Nowon Leeblog.nwlee.com·Dec 8, 2024합성 컴포넌트 패턴에서 컨텍스트 Api합성 컴포넌트 합성 컴포넌트 패턴은 UI를 작성할 때 여러 개로 분리된 컴포넌트를 조합하여 컴포넌트를 개발하는 패턴이다. 컴포넌트의 조합을 활용함으로써 다양한 상황에서 컴포넌트를 도입할 수 있다. 해당 패턴으로 개발한 헤더 컴포넌트의 예시이다. 컴포넌트는 왼쪽, 가운데, 오른쪽 총 세 가지 구역으로 나뉘어져 있다. Children.toArray 메소드로 하위 컴포넌트를 배열 타입으로 변환한 다음 각 컴포넌트의 타입을 비교함으로써 헤더 내 어디에...React
Eddie Qiaoeddieqiao.hashnode.dev·Dec 4, 2024把 nextjs netflix clone 教程学完了https://www.youtube.com/watch?v=mqUN4N2q4qY 跟着教程，一个半月时间，67个半小时。终于学完了。代码跟着写了一遍，注册登录部分只写了登录。在这里做一些零碎的总结，算是收尾了。 // zustand, 全局状态管理工具。状态变了，使用状态的组件会更新 const {openModal} = useInfoModalStore() import useSwr from 'swr' import fetcher from '@/libs/fet...react hooks
Eddie Qiaoeddieqiao.hashnode.dev·Dec 3, 2024子组件向父组件通信子组件向父组件通信，用自定义事件，onChange 是自定义事件 import { useState } from "react"; function ToggleButton({ value, onChange }) { const handleClick = () => { onChange(!value); }; return ( <button style={{ width: "60px" }} onClick={handleClick}> <s...react hooks
Eddie Qiaoeddieqiao.hashnode.dev·Dec 3, 2024为什么用 useCallback别的文章讲，当将一个方法A作为prop传递给子组件的时候，假如不用useCallback，每次A都是新的，子组件接受新的方法A会重新渲染，这样导致了不必要的重复渲染。 在其他情况下，似乎没什么用处，比如下面这个情况 import { useCallback, useState } from "react" const Counter = ()=> { const [count, setCount] = useState(0) // 每次都会执行，这种情况下 useCallback ...react hooks
Eddie Qiaoeddieqiao.hashnode.dev·Dec 3, 2024用函数式写法更新stateimport { useState } from "react" const Counter = ()=> { const [count, setCount] = useState(0) console.log(111); const handleCount = ()=> { // react 状态更新是异步的，这么写不保证拿到最新值 // 当前页面这么写测试没问题，可能是按钮点击的速度不够快 // setCount(count + 1) // ...react hooks
Eddie Qiaoeddieqiao.hashnode.dev·Dec 3, 2024不用管函数组件执行了几次https://codepen.io/eddieeddieeddiejones/pen/pvzjoar?editors=1111 import React, { useEffect, useState } from "react"; function BlogView({id}) { // 打开页面，执行两次 // blogContent 为 null 执行一次，请求有内容执行一次 // 其实不用管执行了几次，函数组件，state 和 props 相同，那么组件输出相同。也...react hooks
