좌충우돌 개발자의 길

1. 리액트에서 성능 개선을 해보자 useMemo에 이어서... 2. useCallback 함수를 memorization하기 위해 사용 2-1. useCallback의 장점 리액트 컴포넌트 아넹 함수가 선언되면, 컴포넌트가 렌더링 될 때마다 새로 생성된다. 하지만 useCallback을 사용하면 컴포넌트가 렌더링 되어도 의존성 배열에서 참조한 값이 변경되지 않으면 새롭게 생성되지 않는다. 2-2. useCallback의 구조 첫번째 인자 : 콜백함수 두번재 인자 : 의존성 배열로 배열 내의 갑싱 변경될 때까지 함수를 저장해노혹 재사용할 수 있도록 함 2-3. 주의점 자바스크립트 함수 동등성으로 값이 변화하면 부모 컴포넌트가 렌더링되고 그 값을 전달받은 자식 컴포넌트도 렌더링된다. 이러헥 두번 렌더링되는 ..

hook hook 불면 기능이 넘치는 커다란 리액트 훅~ 1. hook은 리액트에서 제공하는 내장 hook과 내가 직접 만든 custom hook으로 나뉜다 - 리액트에서 제공해주는 내장 hook : useState, useEffect, useParams,.... 등등 - custom hook : use___ 이렇게 작성! (여태 나는 반대로 알고 있었다 머쓱~) 2. hook 사용 시, 꼭 지켜야 할 규칙들 - 최상위에서만 hook 호출하자 (반복문, 조건문, 중첩된 함수 내에서 실행 금지!) - React 함수 컴포넌트 내에서만 hook 호출하자 3. 내장 hook - 기본 hook 1) useState 2) useEffect => 이 두 hook은 다른 글에서 자세히 다루었으므로 생략! 3) use..

문제점 - 이전 글에서 말했듯이 또다른 복병이 생겨났다. 바로 초기화면에서 댓글이 아예 보이지 않는 것이다. 원인을 파악했더니 useState에 초기값을 아무것도 설정하지 않아서 발생한 것이었다. 내가 생각한 해결방안 - 그래서 이전에 댓글 불러오는 컴포넌트를 따로 만들었었는데 그 컴포넌트를 재활용해서 초기 댓글 불러오기 위한 용도로 사용했다. const commentsInit = useAxios(`/api/comment/${userId}`); //이렇게 먼저 db에 저장된 초기 댓글을 가져와 commentInit에 담고 const [comments, setComments] = useState(commentsInit); //그 commentInit을 초기값으로 설정하자고 생각했다. 문제점 발생 - 하지만..

- 구현 목표 : 댓글을 쓰면 새로고침없이 댓글창이 바로 나올 수 있도록 바꾸는 기능 구현하기 (카톡처럼!) - 내가 생각한 방법 : useEffect를 써서 comment가 새로 들어올 때마다 업데이트할수 있도록 짜자 import { useEffect, useState } from "react"; import axios from 'axios'; export default function useAxios(url) { const [data, setData] = useState([]); useEffect(() => { axios.get(url) .then(res => { return res.data.body; }) .then(data => { setData(data); }) .catch(error => { ..