티스토리

studyHard
검색하기

블로그 홈

studyHard

studyhard-everyday.tistory.com/m

언젠간 내가 제일 잘함;

구독자
13
방명록 방문하기
공지 2023.02.13 ~ 0.3.0.4⋯ 모두보기

주요 글 목록

  • [React Query] stale/cache time React Query에서 캐싱 기능을 제대로 사용하기 위해 stale time, cache time 등에 대해 잘 알고 있어야 한다. 몇 번을 봤지만 자주 잊어버리기에 간단히 정리해 보고자 한다. Cache? React Query는 설정한 cacheTime 만큼 데이터를 메모리에 저장해 놓는다. React Query에서의 cache는 QueryCache 객체의 query 배열과 queriesInMap 객체에 Query 객체가 존재하는 것을 말한다. 여기서 cache가 존재한다고 해서 refetching을 하지 않는 것은 아니다(데이터가 stale 상태라면 refetching). Stale? stale의 사전적 정의는 위와 같이 '탁한', '신선하지 않은'이라는 뜻이다. 가져온 데이터가 stale 하다면,.. 공감수 0 댓글수 0 2023. 9. 27.
  • [Recoil] selector Selector selector는 recoil에서 함수 또는 파생된 상태(atom의 상태에서 파생된 데이터, 즉 atom의 상태에 의존하는 동적인 데이터), atom의 상태에 대해 항상 동일한 값을 반환하는 순수함수. 공식문서: https://recoiljs.org/docs/basic-tutorial/selectors/ selector를 사용하는 이유 최소한의 state만 atom에 저장하고 다른 모든 파생되는 데이터는 selector의 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지할 수 있다. state 관리를 위해 recoil을 사용하고 화면과 분리하여 state를 관리하고자 recoil을 사용하는데, 화면에서 다시 state를 관리하는 로직이 있다면 본래 취지와 어긋나서 로직이 파.. 공감수 0 댓글수 0 2023. 9. 26.
  • 클래스 컴포넌트, 함수 컴포넌트 React 컴포넌트의 역할 리액트에서는 화면에 보이는 인터페이스를 설계할 때 ‘컴포넌트’ 단위로 설계가 이루어진다. 컴포넌트는 선언 방식에 따라서 함수형 컴포넌트, 클래스형 컴포넌트로 나눠진다. 함수형(Function) 컴포넌트 자바스크립트의 함수 형태로 표현되는 컴포넌트이다. return 뒤에 JSX 코드를 넣어줘서 반환을 하게 된다. function about() { return ( Hello React ) } export default about; 자바스크립트에 익숙한 개발자라면 확실히 직관적이며, 메모리 지원도 클래스형 컴포넌트보다 덜 사용하게 된다. 빌드 후 배포할 때도 함수형 컴포넌트가 파일크기도 더 작아진다. 클래스형(Class) 컴포넌트 import React, {Component} fro.. 공감수 0 댓글수 0 2023. 9. 8.
  • Virtual DOM 저번 브라우저의 레더링 과정 포스팅에서 DOM이 HTML을 파싱 한 결과물이란 것을 알게 되었다. 그렇다면 Virtual DOM이 무엇이고 왜 등장한 건지 정리해보려고 한다. Virtual DOM DOM은 노드 하나를 조작할 때마다 리플로우나 리페인트가 수행되면서 브라우저의 성능 저하를 유발하기 때문에 동적인 UI를 구성하는 것에 적합하지 않다. 이러한 문제점을 해결하기 위해 Virtual DOM이 등장하게 되었는데 이 Virtual DOM은 실제 DOM을 모방하는 형태로 메모리 상에서만 존재하는 가상의 DOM을 의미한다. 실제로 화면에 렌더링 하는 과정을 거치지 않고 메모리 상에서만 그려지는 DOM이기 때문에 오버헤드(어떤 처리를 하기 위해 들어가는 간접적인 처리 시간/메모리 등)가 훨씬 작다는 특징이.. 공감수 0 댓글수 0 2023. 9. 6.
  • custom hook을 이용하여 input 로직 분리하기 문제 App.js 더보기 import { useState } from "react"; import useInput from "./util/useInput"; import Input from "./component/Input"; import "./styles.css"; export default function App() { //input에 들어가는 상태값 및 로직을 custom hook으로 만들어봅니다. //until 폴더의 useInput.js 파일이 만들어져 있습니다. const [firstNameValue, setFirstNameValue] = useState(""); const [lastNameValue, setLastNameValue] = useState(""); const [nameArr, s.. 공감수 0 댓글수 0 2023. 5. 22.
  • useMemo, useCallback useMemo useMemo는 리액트에서 컴포넌트의 성능을 최적화하는 데 사용되는 훅이다. memo는 memoization을 뜻하는데, 이는 그대로 해석하면 '메모리에 넣기'라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 즉, 동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때 마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것. 리액트에서 함수형 컴포넌트는 렌더링 ➡️ 컴포넌트 함수 호출 ➡️ 모든 내부 변수 초기화의 순서를 거친다. function Component() { let value = cal.. 공감수 0 댓글수 0 2023. 4. 28.
  • 리덕스 (Redux) 리덕스(Redux) 리덕스는 가장 사용률이 높은 상태관리 라이브러리로서, 리액트의 복잡한 컴포넌트 구조속에서 보다 간편하게 모든 컴포넌트들이 state를 쉽게 공유할 수 있게 해주는 방식이다. 리덕스는 리액트 내부에 있는 기술이 아니며 순수 HTML, JavaScript 내에서도 사용이 가능하다. 리액트와 시너지가 좋으니 대체적으로 리덕스를 사용할 뿐이다. 리덕스를 언제 써야 할까? 프로젝트의 규모가 큰가? Yes: 리덕스 No: Context API 비동기 작업을 자주 하게 되는가? Yes: 리덕스 No: Context API 리덕스를 배워보니까 사용하는 게 편한가? Yes: 리덕스 No: Context API 또는 MobX 리덕스에서 자주 사용되는 키워드 액션(Action) State에 어떤 변화가 .. 공감수 0 댓글수 0 2023. 4. 19.
  • useRef useRef useRef는 저장공간(변수 관리), DOM 요소에 접근을 위해 사용이 되는 React Hooks이다. Ref는 'Reference'의 약자로, '참조'라는 뜻이다. 저장공간(변수 관리) 리액트 컴포넌트는 State가 변할 때마다 리렌더링이 되면서 컴포넌트 내부 변수들이 초기화가 된다. 내부 변수들이 초기화 된다는 것은 해당 컴포넌트 함수의 변수들이 모두 초기화가 되고 모든 함수 로직 등이 다시 실행되는 것을 의미합니다. 이렇게 원하지 않는 렌더링 때문에 곤란할 때, State 대신 Ref안에 값을 저장하면 불필요한 렌더링을 막을 수 있다. 또한 컴포넌트가 아무리 렌더링이 되어도 Ref안에 저장되어 있는 값은 변화되지 않고 유지가 된다. 변경 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때.. 공감수 1 댓글수 0 2023. 4. 18.
  • State 끌어올리기 State 끌어올리기란? 상위 컴포넌트의 상태 변경 함수를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행하는 것이다. export default function ParentComponent() { const [value, setValue] = useState("날 바꿔줘!"); const handleChangeValue = () => { setValue("달라진 값"); }; return ( 값은 {value} 입니다 ); } function ChildComponent() { const handleClick = () => { // 이 버튼을 눌러서 부모의 상태를 바꿀 순 없을까? }; return 값 변경; } 상태를 변경하는 함수는 handleChangeValue 전달은 props. Chi.. 공감수 0 댓글수 0 2023. 3. 31.
  • React state, probs State, Props React에서 props와 state는 데이터를 다루는 개념입니다. 둘 다 JavaScript 객체이고 렌더링에 영향을 줍니다. props는 단방향 데이터 흐름의 리액트에서 상위에서 하위로의 데이터 전달을 위해 사용하고, state는 컴포넌트 내부에서 관리되는 데이터의 상태를 의미합니다. 좀 더 간단하게 설명하면 props는 함수에 전달하는 매개변수, state는 함수 내부에 선언된 변수 정도로 볼 수 있습니다. Props Props (Properties)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터를 말합니다. 부모 컴포넌트로부터 받는 데이터이므로 자식 컴포넌트에서는 변경할 수 없습니다. 이는 한 컴포넌트의 속성과 같음을 의미합니다. const Text = ({text}).. 공감수 0 댓글수 0 2023. 3. 24.
  • React SPA, Router SPA SPA는 Single Page Application으로 페이지가 한 개인 웹 애플리케이션을 의미하며, CSR(Client Side Rendering) 방식으로 렌더링 합니다. SPA는 기존 페이지에 컴포넌트화된 서브 페이지나 적절한 테이터만을 넘겨주어, 첫 요청 시에 딱 한 페이지만 불러오고 페이지 이동 시 기존 페이지 내부를 수정하는 방식을 사용합니다. 장점 단점 필요한 리소스만 부분적으로 로딩하여 성능에 좋다 초기 로딩 시간이 비교적 느리다 UI 개발을 빠르게 할 수 있다 검색엔진최적화가 어렵다 해당 부분만 수정이 가능하여 유지보수에 좋다 CSR 방식은 클라이언트측에서 사용자에 대한 정보를 저장하기에 보안 이슈가 있을 수 있다 컴포넌트별로 코딩을 하기 때문에 코드 재사용성이 좋다 리액트는 SP.. 공감수 0 댓글수 0 2023. 3. 23.
  • React Intro 리액트 는 사용자 인터페이스(UI)를 구축하기 위한 선언적이고 효율적이며 유연한 자바스크립트 라이브러리이다. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트 해준다는 점과 선언적인 개발이 가능하게 된다. UI를 자동으로 업데이트하는 과정에서 Virtual DOM을 통해서 최적화를 구현한다. JSX (JavaScript Syntax Extension) 자바스크립트 확장 문법으로 자바스크립트와 HTML을 합쳐놓은 듯한 형태이다. 마크업을 편리하게 작성하기 위한 문법으로 HTML에서 마크업 하고, 자바스크립트에서 로직을 연결하고 붙이는 과정을 하나의 자바스크립트 파일 내에서 편리하게 처리할 수 있다. JSX로 작성한 코드는 자바스크립트가 인식할 .. 공감수 0 댓글수 2 2023. 3. 22.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.