React

useTransition, useDeferredValue에 대해 알아보기

React 18에서 새로이 생긴 훅으로 useTransition, useDeferredValue가 있다. 이 두 훅의 사용으로 쓰로틀링과 디바운싱을 간단하게 해결할 수 있다. useTransition, useDeferredValue를 사용하면 실행순서를 뒤로 미룰 수 있다. useTransition const [isPending, startTransition] = useTransition(); useTransition을 사용하는 대표적인 예로 검색 미리보기를 들 수 있다. 검색 결과가 많으면 렌더링이 많아져 렉이 걸릴 수도 있다. 나중에 업데이트 해도 되는, 우선순위가 낮은 함수를 구분할 수 있게 해준다. startTransition 인자로 콜백 함수를 넣는데 내부에 우선순위가 낮은, 나중에 실행될 함수..

React에서의 side effect와 effect hook

인자나 외부의 변수를 변경하지 않는 함수를 pure function이라고 한다. 이 pure function, 순수 함수는 만약 같은 인자를 전달 받는다면, 항상 똑같은 결과 값을 return한다. 따라서 pure function은 예측 가능한 함수이다. 하지만, 어떤 함수는 실행시 함수 외부의 환경에 영향을 줄 수 있다. // 예시 // let counter = 0; function count(){ counter += Math.floor(Math.random() * 100); } count(); console.log(counter); 위와 같은 함수는 외부의 counter 함수를 변경하며, 그 값을 예측 불가능하게 한다. 위와 같이 함수가 외부에 영향을 미치면 이를 side effect 라고 한다. 보..

React의 StrictMode란?

React.StrictMode는 애플리케이션의 잠재적인 문제를 알아내기 위한 도구이다. 와 마찬가지로, 는 추가적으로 DOM을 렌더링하지 않고, 자손들에 대한 부가적인 검사와 경고를 활성화한다. StrictMode는 자손 컴포넌트의 부가적인 검사와 경고를 할 뿐이다. // index.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( // React.StrictMode는 하위..

간단하게 Jest, React Testing Library 사용하기

🍅 Jest 설정하기 Create React App을 사용한다면, Jest는 이미 설정되었을 것이다. React에서 jest를 사용하기 위해서 다음과 같이 라이브러리를 설치해준다. npm install --save-dev jest babel-jest @babel/preset-env @babel/preset-react 설치한 뒤, jest 명령어를 사용하여 테스트를 할 수 있다. // package.json 수정 { ..., "scripts": { ..., "jest": "jest", }, } 테스트는 모든 .test.js 파일이 실행되며, 성공과 실패 결과가 나타난다. Support for the experimental syntax 'jsx' isn't currently enabled 에러가 발생하면, ..

React 컴포넌트 props.children에 대해서 알아보기

리액트의 컴포넌트 props는 children이라는 값을 가진다. props.children은 모든 컴포넌트에서 사용될 수 있고, 해당 컴포넌트의 여는 태그와 닫는 태그 사이의 모든 내용을 가진다. // TmpComponent.js const TmpComponent = ({ children }) => { return {children} ; }; export default TmpComponent; 위와 같이 props.children을 사용할 수 있다. TmpComponent 컴포넌트로 감싸지는 모든 내용은 TmpComponent의 외곽선이 적용된 div 태그 내부에 존재하게 된다. // App.js import "./styles.css"; import TmpComponent from "./TmpCompo..

React Redux에서 connect와 bindActionCreators 사용하기

React에서 Hook을 사용하지 않고 Redux를 사용하는 방법을 알아봤다. react-redux의 connect 메서드를 통해서 전역 상태와 dispatch를 props로 전달할 수 있다. 추가적으로 bindActionCreators를 사용하여 자동으로 액션 함수를 dispatch로 감싸줄 수 있다. bindActionCreators는 필수적으로 사용할 필요는 없지만, 코드를 간단하게 만들어준다. connect로 연결한 상태와 dispatch 함수는 props를 통해 받아와 사용할 수 있다. import { bindActionCreators } from "redux"; import { connect } from "react-redux"; import { addOrderAction } from "../..

timer 만들기 (in React)

useEffect와 setInterval을 사용하여 timer를 만들 수 있다. import { useEffect, useState } from "react"; const getSeconds = (time) => { const seconds = Number(time % 60); if(seconds { const [time, setTime] = useState(300); // 남은 시간 (단위: 초) useEffect(() => { const timer = setInterval(() => { setTime((prev) => prev - 1..

React Query에서 Post, Delete, Patch/Put (useMutation hook 사용하기)

react query에서 단순한 조회, get 요청을 보내기 위해서는 useQuery를 사용한다. 반면, 데이터의 수정이 일어나는 Post, Delete, Patch(Put) 요청을 위해서는 useMutation을 사용해야 한다. 실제로 useMutation을 사용한 예시 코드를 남긴다. import axios from 'axios'; import { useMutation } from "react-query"; const PostData = () => { const posting = async () => { const url = `/posting`; const payload = { data }; axios.post(url, payload) .then(el => console.log(el.data)) .c..