TIL (46) 썸네일형 리스트형 [TIL] async / await Async/Await는 ES8에서 도입된 비동기 처리 방식 문법으로 함수 내에서 await 키워드를 사용하여 비동기 작업이 끝날 때까지 기다린다. Async/Await를 사용하면 코드가 간결해지고 가독성이 좋다. Async/Await는 try/catch로 에러를 처리한다. Async/Await는 Promise객체를 반환한다. (then()을 사용 가능) Promise는 비동기 작업을 다룰 때 사용하는 객체다. 비동기 작업이 끝나면 성공(resolve) 또는 실패(reject)를 알려준다. Promise는 .catch()를 사용하여 에러를 처리한다. 작업이 성공 시에는 .then()을 통해 성공 시 처리할 코드를 실패 시에는 .catch()를 통해 실패 시 처리할 코드를 작성한다. [TIL] useEffect의 실행 순서 React 컴포넌트는 먼저 랜더링되며, 이 과정에서 JSX 코드가 반환되고 DOM에 반영됩니다. 이것이 기본적인 랜더링 과정이죠. useEffect 실행: 컴포넌트 렌더링이 완료 된 후 useEffect 내부의 함수가 실행된다. 이 함수는 비동기적으로 실행될 수 있기 때문에 비동기 작업을 수행하는데 유용하다. dependency array의 값이 변경될 때마다 useEffect가 실행된다. clear : 컴포넌트가 unMount 될 때 실행되는 함수로 사이드 이펙트를 정리하는데 사용된다. [TIL] 버츄얼 돔과 리얼 돔의 차이 DOM(Document Object Model)은 웹 페이지의 구성 요소들을 트리 구조로 표현한 것이다. 즉, HTML 문서의 각 요소들을 노드로 나타내는 방식이다. 가상 DOM은 실제 DOM의 복사본 형태로, 메모리 상에 존재하는 JS 객체로 이루어져 있다. 가상 DOM의 핵심 장점은 실제 DOM을 직접 조작하는 것보다 훨씬 효율적이라는 점이다. JS 객체를 변경하는 작업이 훨씬 더 가볍고, 리액트의 버전업데이트로 가상 DOM에서 batch update가 가능해졌는데, 이로 인해 단 한번만의 갱신이 필요하다는 큰 차이가 있다. [TIL] 상태 관리를 왜 해야할까? 리액트는 가상DOM 방식을 사용해 화면에 있는 요소들을 제어한다. 직접 변수를 변경하는 것이 아닌 state를 통해 데이터를 관리해야 변경된 사항을 적용할 수 있다. 상태 관리를 사용하는 이점으로는 변경사항을 적용할 수 있다는 점과 하나의 state의 값으로 하위 컴포넌트에 props로 전달하여 일관된 데이터를 공유할 수 있다는 점이다. 만약 input의 값을 지정하는 state처럼 다른 컴포넌트에서도 지역적으로 쓰일 수 있는 state일 경우 커스텀 훅 내에서 state를 선언하여 사용한다. anstack-query를 통해 서버에서 데이터를 받았을 때는 queryKey를 통해 데이터 관리한다. [TIL] query, mutation Query React Query는 API에서 데이터를 가져와서 사용자에게 표시하는데 사용되는 주로 GET 요청과 같은 읽기 전용 작업에 적합하고, 자동으로 서버 데이터를 캐시하고, 데이터를 재요청하며, 브라우저 창을 다시 포커스를 맞추었을 때 , stale 데이터를 refresh하는 등의 작업을 수행한다. React Query의 사용 목적은 UI 등의 어플리케이션에서만 필요한 데이터를 Client State로 규정짓고, 서버에서 받아오는 데이터를 Server State로 규정지어 클라이언트 / 서버 상태를 나누어서 생각할 수 있게 도와주기 때문에 사용한다. Mutation Mutation은 '변형'이라는 뜻을 말하고, 서버의 상태를 "변경"하는데 사용된다. 즉, POST(생성) / PUT(수정) / DE.. [TIL] useState에서 typeScript import { useState } from "react"; function App() { const [counter, setCounter] = useState(); return {counter}; } export default App; useState 훅은 제네릭을 사용해서 상태의 타입을 지정할 수 있다. 이 코드에서는 counter라는 상태와 그 상태를 업데이트하는 setCounter 함수를 정의하고 있다. import { useState } from "react"; function App() { const [counter, setCounter] = useState("hello"); return {counter}; } export default App; 이렇게하면 number 타입을 지정해놓고 문자열.. [TIL] generic(제네릭) generic 이란 ? 데이터의 타입(data type)을 일반화한다(= 변수화한다)는 것을 의미한다. //우리가 넣은 타입이 안으로 그대로 들어간다. type Generic = { someValue: T; }; type Test = Generic; 이렇게 타입을 생성할 때 원하는 인자()를 받아서 넣어준다. 제네릭은 함수에서도 사용할 수 있는데 // 함수에 넣어주면 함수의 인자에 넣어줄때도 그대로 들어간다. function someFunc(value: T) {} someFunc(); 이렇게하면 여기의 T에 그대로 string이 들어가게 되는 것이다. function someFunc(value: string) 여기서 꼭 T로만 쓰지 않아도 되고, 아무 글자나 상관없다. 리액트 + 타입스크립트 템플릿으로 .. [ TIL] 함수에서 타입스크립트 사용하기 타입스크립트에서는 파라미터 넘기는 인자부분, 리턴부에서 타입을 지정하는 부분이라고 한다. 사용하려는 인자 옆에 원하는 타입을 콜론으로 작성해주는 방법이 있다. function sum(a: number, b: number): number { return a + b; } type을 object로 넘길 때 , object안에 있는 type들을 왼쪽 a, b에서 사용할 수 있게 된다. 그리고 return 부분도 string이 됐으니까 return 할 때 `${ } ` 이렇게 string으로 리턴할 수 있게 해준다. function objSum({a, b}: { a: number; b: number }): string{ return `${a + b}`; } 그럼 비동기 함수에서는 어떻게 사용할 수 있을까? jso.. [TIL] TypeScript 설치 TypeScript로 인해 달라진 점 - code를 입력하는 순간 에러 메시지를 발생시킨다 - 컴파일 시간에 오류 캐치 : 정의되지 않은 프로퍼티를 연산하여 NaN이 되는 현상을 미연에 방지할 수 있다. https://github.com/coreybutler/nvm-windows/releases 페이지로 접속하면 nvm-windows 인스톨러 다운로드 페이지로 이동된다. 여기서 스크롤을 조금만 내리시면 Assets라는 섹션을 본다. 이 섹션에서 nvm-setup.exe 파일을 다운로드 받아서 실행시킨다. 설치가 완료되었다면 nvm이라는 커맨드를 PowerShell에서 실행해서 실행되는지 본다. PowerShell에서 nvm install [설치할 노드 버전]명령을 실행하여 Node.js를 설치한다. //.. [TIL] Mutation Mutation 어떤 데이터를 변경하는 것 (= 변화) 어떤 데이터라 함은 추가, 수정, 삭제를 의미한다. CRUD 중, CUD에 해당한다. axios의 경우 post, put, patch, delete 요청과 비슷하다. axios.post('http://localhost:3000/todos', newTodo); axios.patch(`http://localhost:3000/todos/${id}`, {isDone: true}); axios로 데이터 추가하기 const addTodo = async (newTodo) => { await axios.post(`${process.env.REACT_APP_SERVER_URL}/todos`, newTodo); } 이제 값을 넣었을 때 변형할 수 있는 리액트쿼리 방법.. 이전 1 2 3 4 5 다음