React & TypeScript21 [React] React 라이프 사이클 이해하기 + useEffect의 동작 순서 React의 렌더링이란?React 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 의미한다. 만약 컴포넌트가 props와 state와 같은 상태값을 가지고 있지 않다면 오직 해당 컴포넌트가 반환하는 JSX 값에 기반해 렌더링이 일어난다. 쉽게 말해, 브라우저 화면에 요소를 보여주는 것을 렌더링이라고 한다.React의 컴포넌트들은 모두 이 생명주기를 가지고 있다. 렌더링 과정mount : 처음 화면에 보여주는 최초 렌더링이다.update : 화면의 요소 하나라도 바뀌면 업데이트 된 것이다. ex) 0 -> 1로 변경unmount : 보여줄.. 2024. 12. 17. [React] 페이지 이동 시 스크롤 위치가 하단에 있을 때 ScrollToTop 사이드 프로젝트에서 푸터를 만들고 난 뒤하단에 스크롤 위치한 상태에서 다른 카테고리 페이지로 이동하면그 페이지 역시 스크롤이 하단에 위치한 채 렌더링되는 문제가 생겼다. 그래서 렌더링될때 스크롤이 항상 상단에 위치시키기 위한 컴포넌트를 만들었다.import { useEffect } from "react";import { useLocation } from "react-router-dom";function ScrollToTop() { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); return null;}export default ScrollToTop;"/"와 같은 pathnam.. 2024. 12. 16. React 프로젝트 성능 및 최적화 개선하기 사이드 프로젝트를 어느 정도 마무리하고 성능을 확인해봤는데 ....... 왜이리 점수가 짜나요....랜딩페이지와 디자인에 힘을 많이 주는 프로젝트라 이미지 최적화가 시급했다.최적화 방법을 찾아보던 중 코드 스플리팅을 주로 사용한다는 것을 알았다.아래는 개선 전 코드 .. import { createBrowserRouter } from "react-router-dom";import App from "../App";import Home from "../pages/home";import Login from "../pages/auth/components/Login";import Signup from "../pages/auth/components/Signup";import Recipes from "../pages.. 2024. 12. 12. [TIL] zustand 사용 시 state.state와 getState()의 차이 1. useUserStore((state) => state.isLoggedIn)특징React 컴포넌트에서 주로 사용: 이 방식은 Zustand 상태를 React 컴포넌트에 연결합니다.Zustand의 상태(isLoggedIn)를 구독(subscribe) 합니다.상태가 변경되면 컴포넌트가 자동으로 다시 렌더링됩니다.상태 관리와 React의 재렌더링 메커니즘이 결합됩니다.예시function Header() { const isLoggedIn = useUserStore((state) => state.isLoggedIn); return {isLoggedIn ? "Logged In" : "Logged Out"};}장점React와 상태의 동기화가 자동으로 이루어짐.상태가 변경되었을 때 React 컴포넌트를 다시 렌.. 2024. 11. 17. [React] input 값을 useState로 상태 관리 할 때 defaultValue를 왜 사용하면 안될까? 사이드프로젝트 하는 중 마이페이지에서 닉네임을 가져와야하는데 작은 문제가 생겼다.처음에 로그인한 유저의 닉네임을 그대로 가져오기 위해 input 태그에 defaultValue={user.nickname}을 하고,닉네임 변경하기 위해 새로운 닉네임 값으로 value={nickname}을 속성에 넣었더니 아래처럼 에러 메세지가 찍혔다. value와 defaultValue를 같이 쓰지 말라는 거였다. 왜 안될까? 이유는 value와 defaultValue가 서로 다른 방식으로 동작하기 때문이다.defaultValue: 컴포넌트가 처음 렌더링될 때만 적용되는 초기 값. 상태가 아닌, 기본적으로 입력될 값으로 한 번만 설정된다.value: 컴포넌트의 상태를 직접적으로 반영한다. useState로 상태를 관리하고.. 2024. 11. 15. [TIL] zustand로 로그인 상태 유지 및 로그아웃 구현 (+supabase, typescript) + 수정 supabase를 통하여 로그인과 회원가입 기능을 구현했다. 그런데 막상 구현하고 나니 또 뭘 해야할지 모르겠는거임..!로그인을 했으니까 마이페이지가 생기고 이동할 수 있어야 하고 그럴려면 로그인한 유저의 상태가 유지되고 데이터도 브라우저가 갖고 있어야겠고 그러기 위해서 유저데이터를 필요할 때마다 필요한 곳에 불러와야겠는거임.그래서 지금 하고 있는 사이드프로젝트의 규모가 크지 않으니 context api를 사용할까 했음.그런데 그렇게 되면 원하지 않은 곳에서 불필요한 리렌더링 일어날 것 같아 zustand를 사용하기로 함!zustand는 필요할 때에 원하는 데이터만 바로 불러와 쓸 수 있는 간편함이 좋았고,provider를 쓰지 않아 상태 변경 시 불필요한 리렌더링을 제어할 수 있기 때문임! 선행 작업으.. 2024. 10. 26. [TIL] tailwindcss 설치하기 react 앱 설치 후npm install -D tailwindcss postcss autoprefixernpx tailwindcss init 명령어 각각 입력 // tailwind.config.js 파일에 아래 추가module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [],} // 최상위 css 파일에 아래 추가@tailwind base;@tailwind components;@tailwind utilities; 2024. 10. 21. [TIL] Hydration 이란? 웹사이트는 두가지 방식으로 작동한다. 하나는 서버이고 하나는 클라이언트이다.서버 : 웹사이트의 데이터를 저장하고, 웹사이트의 페이지를 제공해주는 역할클라이언트 : 웹사이트를 보기 위해 사용하는 브라우저(크롬, 사파리 등)로 클라이언트는 서버에서 받은 데이터를 화면에 보여주는 역할 Hydration이란리액트같은 프레임워크를 사용할 때, 서버에서 먼저 웹페이지를 만들고, 그 페이지를 클라이언트에 보낸다. 그러면 클라이언트는 그 페이지를 받아서 화면에 보여주고, 리액트가 그 페이지에 기능을 추가하여 클릭이나 스크롤 같은 인터랙션을 할 수 있게 해준다. 이 과정을 hydration이라고 한다. Hydration Error하이드레이션 오류는 서버에서 보낸 웹페이지와 클라이언트에서 그 페이지를 처리할 때 서로 다르.. 2024. 8. 20. [TIL] React에서 key가 필요한 이유가 뭘까? DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경을 생성한다. first second first second third Duke Villanova Connecticut Duke Villanova 위처럼 단순하게 구현하면 리스트의 맨 앞에 엘리먼트를 추가하는 경우 성능이 좋지 않다.React는 Duke와 Villanova 종속 트리를 그대로 유지하는 대신 모든 자식을 변경한다. 이러한 비효율은 문제가 될 수 있다. 이를 해결하기 위해 key 속성을 지원합니다. 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다. 예를 들어, 위 비효율적인 예시에 key를 .. 2024. 7. 24. [TIL] supabase 연동 시 'url'과 'anone key'를 .env파일로 보안하는 방법 supabase를 사용할때 url과 anone key를 앱에 그대로 삽입하여 github에 올리면 보안에 취약할 수 있다.이럴때는 .env 파일에 넣어 github에 올릴 때 제외 시킬 수 있다. 그 방법을 알아보자 ! 1. supabase에 프로젝트를 생성한다. 2. 진행중인 프로젝트 앱에 'supabase'폴더 - 'supabaseClient.js'을 생성한다.(가독성 & 유지보수를 위해) 3. 진행중인 프로젝트 앱에 '.env.local' 이름의 파일을 생성한다.4. '.env.local' 파일에 supabase에 있는 'url'과 'anone key'를 넣어준다.VITE_SUPABASE_URL="프로젝트 URL"VITE_SUPABASE_KEY="프로젝트 anone key"//vite 기반으로 앱설.. 2024. 6. 28. [TIL] TanStack Query란 TanStack Query는 웹 개발에서 데이터를 쉽게 가져오고 서버 상태(서버와의 통신을 통해 가져오는 데이터)를 관리할 수 있게 도와주는 도구(라이브러리)이다. 이전에는 React Query라고 불렸는데 리액트 뿐만 아니라 다른 SPA 프레임워크에서도 사용 가능하기 때문에 이름이 바뀌었다고 한다.이 도구를 사용하면 웹사이트가 서버에서 데이터를 가져오거나 업데이트할 때 생기는 복잡한 문제를 더 쉽게 해결할 수 있다. 예를 들어, 블로그 글 목록이나 상품 목록을 서버에서 가져오는 작업을 쉽게 해준다.왜 TanStack Query가 필요할까?데이터를 자동으로 관리: TanStack Query는 데이터를 서버에서 가져오거나 업데이트하는 일을 자동으로 관리해준다. 만약 데이터를 가져오다가 에러가 나면, 그걸 .. 2024. 6. 21. [TIL] useQuery 사용중 데이터가 undefined로 뜰때 supabase에 있는 데이터를 가져와서 구현하던 중처음에는 잘 구현되었으나 로직을 변경하지 않았는데도 새로고침했더니 데이터가 undefined으로 뜨면서 오류가 났다.// 오류 코드// 생략function MyPage() {// supabase에서 데이터 가져오기 const selectMapData = async () => { const { data: placeData } = await supabase.from('places').select('*'); return placeData; };// useQuery로 관리하기 const { data: mapData, isPending } = useQuery({ queryKey: ['mapData'], queryFn: selectMap.. 2024. 6. 20. 이전 1 2 다음
