Frontend (10) 썸네일형 리스트형 [React] useMemo 사용해보기 컴포넌트 내부에 계산 비용이 큰 함수가 있으면, 리렌더링될 때마다 매번 실행돼서 화면이 버벅일 수 있다.그런 상황을 방지하기 위한 Hook인 useMemo를 실습하며 정리해보았다. useMemo란?useMemo는 계산 비용이 큰 작업의 결과를 기억(Memoization) 해서불필요하게 다시 계산되지 않도록 막아주는 Hook이다const memoizedValue = useMemo(() => expensiveFunction(input), [input]);- input이 바뀌었을 때만 expensiveFunction()이 실행됨- 의존성 배열의 값이 바뀌지 않으면 이전 결과를 그대로 반환함 왜 쓸까?React 컴포넌트는 상태가 바뀌면 전체가 다시 렌더링되는데단순히 렌더링만 해도 느린 계산 함수가 다시 실행된다.. [React] useRef 사용해보기 useRef란?useRef는 변경 가능한 ref객체를 생성하며, 이 객체는 .current라는 property를 가진다.이 값을 DOM 요소에 연결하거나, 렌더링 사이에 유지해야하는 값을 저장하는데 사용할 수 있다. const ref = useRef(초기값);ref.current = 저장할 값;- 값이 바뀌어도 컴포넌트는 다시 렌더링되지 않는다.- DOM 요소에 직접 접근할 때도 사용된다. 실습해보기input에 포커스 주기버튼을 눌렀을 때 input에 포커스가 가도록 만들어봤다.useRef로 해당 DOM 요소에 직접 접근할 수 있다.import { useRef } from "react";const FocusInput = () => { const inputRef = useRef(null); const ha.. [React] useContext 사용해보기 useContext란?useContext는 컴포넌트가 가장 가까운 MyContext.Provider에서 제공하는 context 값을 읽게해주는 Hook이다.값을 읽기만 하며, context 값을 설정하려면 Provider를 사용해야 한다.const value = useContext(MyContext);MyContext는 createContext()로 만든 객체이다.useContext()는 현재 컴포넌트가 어떤 Provider 안에 위치해 있을 때만 동작한다.하위 컴포넌트 어디에서든 값을 꺼내 쓸 수 있다는 점이 핵심이다. 왜 사용할까..?React에서 props로 상태를 전달할 때 종종 이런 구조가 생긴다. 이 구조에서 까지 상태를 전달하려면App 에서 ThemeToggl.. [React] useEffect 사용해보기 [React] useState 사용해보기멘토님께서 React에서 제공하는 useHook 중 몇 개를 써보았는지 물어보시며한번씩 다 써보는걸 추천하셨다. 그래서 하나씩 직접 써보고 정리해보기로 했다.🙂 React에서 가장 자주 사용되는 Hook인 usmin-i0212.tistory.com이전 편에 이어 이번엔 useEffect를 사용해보자 React에서 컴포넌트의 렌더링 외 작업이 필요한 순간이 있다. 예를 들자면- API 요청- 이벤트 리스너 등록- 타이머 설정- 외부 상태 동기화등등.. 이런 작업들을 사이드 이펙트라고 하며, 이를 처리하기 위해 useEffect라는 Hook을 제공한다. useEffect란?컴포넌트가 마운트(렌더링)된 이후 실행되는 코드 블록을 정의할 수 있게 해주는 Hook이다.us.. [React] useState 사용해보기 멘토님께서 React에서 제공하는 useHook 중 몇 개를 써보았는지 물어보시며한번씩 다 써보는걸 추천하셨다. 그래서 하나씩 직접 써보고 정리해보기로 했다.🙂 React에서 가장 자주 사용되는 Hook인 useState는 컴포넌트의 상태를 관리할 때 사용된다.상태 관리에도 여러 종류가 있지만 나는 숫자, 객체, 배열의 상태를 다뤄보았다. useState란?useSate는 React에서 컴포넌트의 상태(state)를 저장하고 갱신할 수 있는 Hook이다.const [state, setState] = useState(초기값);여기서 state는 현재 상태 값, setState는 상태를 업데이트하는 함수이다. 실습해보기숫자 상태 관리const Counter = () => { const [count, set.. [vscode] ESLint, Prettier 적용하기 예전 팀 프로젝트인 Web IDE 만들기 프로젝트에서 prettier를 개인적으로 적용한 상태라저장 한 번에 전체 파일 포맷이 바뀌는 상황이 많았고,내가 작업하지 않는 파일도 git diff에 떠서 많은 스트레스를 받았다. 그래서 이번에는 Prettier + Lint를 명확하게 설정하여 vscode에서도 자동 적용 되도록 환경을 만들어해당 이슈가 재발하지 않도록 해야겠다는 결심을 했다. 다른 팀원분께는 위 작업을 위해 내가 이번에 구조 작업을 맡겠다고 제안드렸고 흔쾌히 ok하심 Prettier 설정하기(.prettierrc){ "singleQuote": false, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", .. Next.js + SockJS + STOMP로 실시간 채팅 구현하기 구름에서 진행한 Web IDE 프로젝트에서 실시간 채팅 구현을 맡게 되었고,해당 기능을 SockJS + STOMP 조합으로 구현했다.나름 고생했던지라.. 작업 내용과 트러블 슈팅을 기록으로 남기려한다.실시간 채팅 구현하기사용 기술 스택- Next.js- TypeScript- Zustand(v 5.0.3) - 상태 관리- sockjs-client(v 1.6.1) - WebSocket 연결- @stomp/stompjs(v 7.1.1) - 메시징 프로토콜 타입 스크립트에서 STOMP 사용을 위한 declarestompjs와 sockjs-client는 브라우저 전용으로 작성되어 있어, TypeScript 환경에선 타입 에러가 발생한다.`declare module "sockjs-client";`이렇게 declar.. [React] Router를 활용하여 모달띄우기 들어가기 전에React 수업을 들은 후, 팀 과제로 TMDB를 활용한 넷플릭스 클론 프로젝트를 진행하게 되었다.프로젝트에서 각자 맡을 역할을 나누는 과정에서, 나는 자발적으로 모달 화면 구현을 담당했다. 사실 React 수업에서도 넷플릭스와 유사한 형식을 따라 개발했지만, 당시에는 개념적으로 헷갈리는 부분이 많았다.그래서 이번 프로젝트를 통해 부족했던 부분을 더 깊이 이해하고자 했다. Modal 화면을 구현하면서 수업에서 배웠던 방식(setModalOpen이라는 플래그를 사용해 모달을 띄우는 방식)을 떠올렸다.그러나 넷플릭스의 실제 페이지를 살펴보니, 모달이 뜰 때 URL이 변경되는 것을 발견했다.이와 같은 동작을 구현해보고 싶어 검색을 시작했고, React Router를 사용하면 모달을 URL 변경과 .. 이전 1 2 다음
