FrontEnd/React.js24 [React.js] useCallback 예시 useCallback에 대해 질문이 들어와서 예시를 만들어 주면서 답변을 해주었는데, 짧게나마 적은 코드가 아까워서 블로그에 남깁니다. const message = 'hi'; function UseCallBackExample() { const [, renderingBtn] = useState(0); const noMemo = () => console.log('hi'); const yesMemo = useCallback(() => console.log(message), [message]); useEffect(() => { console.log('no memo called'); }, [noMemo]); useEffect(() => { console.log('.. 2023. 2. 4. [React.js] 제로초 슬랙 클론코딩 - 1. 회원가입/로그인 페이지 (SWR) 강의를 통해 배운 점 SWR을 활용해서 data fetching을 효과적으로 관리할 수 있다. 비동기 처리 뿐 아니라 다양한 방식으로 전역상태를 관리할 수 있는데, 이름 자체가 stale-while-revalidate 인것처럼 api 호출을 효율적으로 관리해주는 것이 가장 큰 장점인것 같다. SWR이 좋다는 이야기도 많이 들었고, 캐싱 기능 등이 강력하고 Next.js와 함께 사용하면 엄청 좋다는 이야기를 많이 들었는데, 이번 강의를 통해 사용해볼수 있어서 좋았다. 로그인, 회원가입, 로그아웃 시 유저정보가 있는지에 따라 Redirecting을 해주는 방법을 배웠다. 이전에 프로젝트를 진행할 땐 스토리지에 토큰이 있는지 없는지를 확인해서 리다이렉션을 진행했는데 이번엔 유저 정보를 받으면 로그인이 되어있다.. 2022. 12. 12. [React.js] 코드 스플리팅 (Loadable) [React.js] 코드 스플리팅 코드스플리팅 (Code Splitting) 코드 스플리팅이란 말 그대로 코드를 잘라주는 것을 의미한다. 리액트의 라우터파일에서 아래와 같이 Login, Signup과 같은 컴포넌트가 있을때 각 컴포넌트가 필요할 때만 import 해주는 것이 코드 스플리팅이다. 아래 코드에선 Loadable이라는 라이브러리를 활용해서 코드 스플리팅을 위한 import문을 만들었다. import React from 'react'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; import loadable from '@loadable/component'; const LogIn = loadable(() => import('@.. 2022. 12. 12. [React.js] 제로초 웹게임 - 6. 로또 (useCallback, useMemo) 강의를 통해 배운 점 1달만에 강의 수강을 다시 시작했다. 그러다보니 클래스 컴포넌트 만드는게 살짝 잊혀져서 “어떻게하더라?” 라며 멍때리게 되더라. 노션에 메모 해둔 시리즈를 보면서 다시 기억을 되살릴 수 있었는데, 정말 노션과 블로깅은 개발자에게 필수인것 같다. 한번 습득했던 기술은 언제든 기억에서 사라질 수 있고, 그럴 때 기록했던 내용을 보면서 복기하면 다시 기억을 되살릴 수 있다는걸 깨달았다. 노션 기록과 블로깅이 꽤나 귀찮은 일이지만 최대한 열심히 해야함을 제대로 느꼈다. 클래스 컴포넌트 (강의코드) import React, { Component } from 'react'; import Ball from './Ball'; import { getWinNumbers }.. 2022. 12. 1. [React.js] useContext 찍먹, useFetch 구현, loading, error 상태 관리 useContext를 찍먹해봤습니다. 원티드 프리온보딩 과제 중 useContext API를 API와 연동하라는 요구사항이 있어 급하게 학습 => 사용해보았습니다. 시간이 많이 부족해 제대로 contextAPI를 사용하지 못해 많이 아쉽습니다. 그래도 찍먹에 의미를 두고 PR 내용을 블로그에 남깁니다. 이번 과제를 통해 useFetch로 로직 분리 하는 방법을 확실히 배웠습니다. 커스텀 훅을 만드는데 두려움 없는 수준이 된 것 같습니다. 앞으로 컴포넌트에서 로직을 뺄 수 있다면 꼭!!! 커스텀훅으로 빼야겠습니다. 커스텀 훅을 통해 component의 view단이 깔끔해지니 너무 마음에 들어서 앞으로 커스텀 훅을 애용할 것 같습니다. 또한, [isLoading, errors] 상태를 만들어 loading중.. 2022. 10. 31. [React.js] axios instance.interceptor를 이용한 미들처리 interceptor interceptor 기능을 사용하면 response, request 등 axios을 활용한 통신 중간에 내가 지정한 처리를 하도록 만들수 있다. 전문용어로 미들웨어라고 부르면 이해가 빠르겠다. 이 interceptor 기능을 사용하면 아래 코드 중 가장 아래와 같이 req.headers.Authorization을 localStorage.getItem('token')을 하며 리퀘스트를 보내도록 만들 수 있다. 이렇게 하면 코드 상에서 중복되는 토큰 부분이 사라진다. 이 이외에도 인터셉터를 활용한 기능들이 많이 있다. 예를들면 이전 axios 포스팅에서 말했던 fetch문에서의 res와 axios의 res가 달라서 헷갈릴 때를 대비해 res를 res.data로 만들어서 .. 2022. 10. 29. [React.js] 리팩토링 하며 생긴 질문 - axios 의 catch() 와 try-catch의 catch가 같은건가? 리팩토링 하면서 생긴 질문들 axios…..catch(error ⇒ console.error(error)) 에러처리를 할 때 axios의 프로미스객체가 rejected 될 때를 catch 하는 형태로 해주는걸 봤다. 이걸로 에러 처리가 전부 된다면 try-catch문은 필요가 없는 것일까? 찾아봐야겠다. https://stackabuse.com/handling-errors-with-axios/ 위 링크의 글을 보면 아래 두 코드에서 catch의 역할이 완전 똑같다는 걸 알 수 있다. 심지어 res, error 마저 같은 값을 나타낸다고 한다. export async function getTodoList(token: string | null) { try { const res = await http.get(.. 2022. 10. 28. [React.js] 제로초 웹게임 - 5. 가위바위보 (life Cycle, useEffect) 강의를 통해 배운 점 useEffect에 대해 알고 있었고, 사용법 또한 알고 있었습니다. 프로젝트에서 문제없이 사용했고, 항상 의도한 대로 사용되어 왔습니다. 하지만 강의에서 오류가 생기는걸 보았고, 나는 문제가 없는데 강의에선 왜 문제가 생겼지? 라는 의문이 생겼습니다. 공식문서를 뒤져보니 강의에서의 설명이 맞았고 (rendering될 때마다 useEffect 콜백이 실행이 되고 clean-up또한 실행이 된다.는 내용) 이게 지금도 이해는 안가지만 어쨋든 공식문서에 나와 있는 것처럼 이럼에도 불구하고 문제가 안생긴것은 디펜던시 배열에 빌드 시 자동으로 추가 될 수 있기 때문이라는 것도 배웠습니다. 강의를 보고 나서 오히려 더 이해가 안가는 상황입니다. 지금 진짜 ~~ 이해 안되는 상황인데 일단은 넘.. 2022. 10. 25. [React.js] 제로초 웹게임 - 4. 반응속도체크 (useRef) 강의를 통해 알게된 것 useRef의 용법 중 DOM 요소 조작이 아닌, 변수 컨테이너로 사용하는 용법에 대해 알아보았습니다. 이걸 알았다면 부트캠프에서 진행한 팀 프로젝트가 한층 더 완성도가 높았을텐대 많이 아쉽네요. 어찌 보면 프론트엔드 공부를 아직 많이~ 못했기에 그럴수도 있겠죠. 매일 매일 부족함을 많이 느낍니다. React.memo를 사용해서 props가 변하지 않을 때 리렌더링 되지 않게 시도해보았지만 잘 되지 않았다. 내가 모르는 부분이 더 있나보다. 일단 진도를 쭉쭉 나가서 한 사이클 돌린 뒤에 생각해봐야 할 문제인것 같다. 프로페셔널 프론트엔드 개발자가 되고자 하는 사람이 아직 리액트 1회독도 못했다니 😭 얼른! 한사이클 돌리고 오겠습니다. 고지가 얼마 안남았네요. 화이팅! 처음에 내가 .. 2022. 10. 24. [React.js] 제로초 웹게임 - 3. 숫자야구 (shouldComponentUpdate, React.memo) 강의를 통해 배운 것 리액트 데브 툴을 활용하면 어디서 ReRendering이 발생하는지 확인 할 수 있다. 이를 통해 성능 최적화가 가능해지고, 이 때 불필요한 리렌더링을 막는 방법이 "shouldComponentUpdate, PureComponent, React.memo"이다. 이전 까진 리렌더링 최적화에 대해선 생각해본적이 없었고, 또한 함수 컴포넌트만 사용하다 보니 setState에 같은 값이 들어가면 (참조형 변수 포함) 리렌더링이 되지 않는다는 것 까지만 알고 있었다. 하지만 class형 컴포넌트를 사용하는 경우 shouldComponentUpdate와 PureComponent를 알아야 하고, 함수 컴포넌트를 사용한다 해도 자식 컴포넌트에서 props가 변경되지 않을 때 부모 컴포넌트의 리렌더.. 2022. 10. 24. 이전 1 2 3 다음