milliwonkim의 블로그

create-react-app을 설치하면 React의 StrictMode가 있습니다. 이로 인해 콘솔을 보면 같은 콘솔이 2번씩 찍히게 됩니다. 그러면 컴포넌트가 2번 렌더링된다고 보일 수 있습니다. React.StrictMode를 사용하는 것 자체는 컴포넌트 재랜더링을 트리거하지 않습니다. React.StrictMode는 엄격 모드에서 컴포넌트를 실행시키기 때문에, 개발 중에 컴포넌트가 더 자주 재랜더링될 수 있습니다. 이는 엄격 모드가 추가적인 검사 및 경고를 도입하여, 더 많은 재랜더링이 트리거될 수 있기 때문입니다. 그러나 이러한 추가적인 재랜더링은 React.StrictMode 자체 때문이 아니라, 실행되는 검사 및 경고 때문입니다. React.StrictMode가 추가적인 재렌더링을 하지는 않..

function useEffect(callback, dependencies) { const previousDependencies = useRef(dependencies); // Call the callback function if dependencies have changed if (!areDependenciesEqual(previousDependencies.current, dependencies)) { callback(); } // Update the previous dependencies // useRef를 이용해서 이전 값을 기억하기 때문에 // previousDependencies가 바뀌어도 리렌더링 되지 않습니다. previousDependencies.current = dependencies; ..

React의 useLayoutEffect와 useEffect는 모두 컴포넌트의 상태를 감지하고 변경에 따른 동작을 수행하는 React Hook입니다. 하지만, 이 두 Hook은 수행되는 시점에서 차이가 있습니다. useEffect는 브라우저가 렌더링 작업을 수행한 후에 비동기적으로 수행됩니다. 이는 컴포넌트가 렌더링 된 후에 일어난 변화에 대한 동작을 수행할 때 사용됩니다. 반면에, useLayoutEffect는 useEffect와 비슷하지만, 브라우저가 렌더링을 수행하기 전에 동기적으로 수행됩니다. 이는 렌더링이 발생하기 전에 상태 변경에 대한 동작을 수행해야 할 때 사용됩니다. 결과적으로, useLayoutEffect는 렌더링 전에 실행되기 때문에 일반적으로 더 빠르게 동작합니다. 그러나 이로 인해 ..

const 키워드로 만든 리액트 컴포넌트는 각 컴포넌트마다 독립적인 인스턴스가 생성되므로, 해당 컴포넌트의 내부에서 window 객체를 사용하더라도 전역 스코프의 window 객체와는 별개로 새로운 window 객체가 생성됩니다. 여기서 독립적인 인스턴스라는 것을 어떻게 아냐? 로 할당하면 새로운 인스턴스를 생성합니다. Object.is()를 통해서 a와 b의 인스턴스가 서로 다른 독립적인 인스턴스라는 것을 말해줍니다. import React from "react"; const Example1 = () => { var count = 0; function handleClick() { count++; console.log(`Count is now ${count}`); } return ( Count: {cou..

리액트에서 var 대신 const 또는 function 키워드를 사용하여 컴포넌트를 만드는 것이 권장됩니다. 현재 테스트해봤을 때, var나 const, let으로 컴포넌트를 선언했을 때 딱히 이슈는 없어보였습니다. var keyword로 리액트 컴포넌트를 만들면 컴포넌트의 새 인스턴스를 만들어내지는 않습니다. 리액트 컴포넌트는 렌더링 될 때, new 생성자로 초기화됩니다. 하지만...! var keyword 모던 자바스크립트 개발에는 추천되지는 않습니다. 대신에 let, const를 사용해야합니다.

let과 const 키워드로 선언된 변수는 전역 객체의 프로퍼티로 등록되지 않습니다. 따라서, 이들 변수는 window 객체에서 찾을 수 없습니다. 예를 들어, 다음과 같이 let 키워드로 선언된 변수 myVariable을 사용할 때 window.myVariable을 출력해보면 undefined이 반환됩니다. let myVariable = 42; console.log(window.myVariable); // undefined 마찬가지로, const 키워드로 선언된 변수 myConstant를 사용할 때도 window.myConstant를 출력하면 undefined이 반환됩니다. const myConstant = "Hello, world!"; console.log(window.myConstant); // u..

브라우저 성능 관점에서 볼 때, re-layout은 re-paint보다 더 비싸다고 일반적으로 여겨집니다. re-layout은 페이지의 모든 요소의 위치와 크기를 다시 계산하는 작업으로, 계산에 상당한 비용이 들어갑니다. 이는 레이아웃이 하나의 요소에 대한 변경뿐 아니라 해당 요소의 부모 및 형제 요소에 대한 변경에도 영향을 받기 때문입니다. 결과적으로, re-layout은 전체 페이지가 다시 렌더링될 수 있으며, 이는 페이지 로드 시간이 더 느려지고 전체적인 성능이 감소할 수 있습니다. 반면, re-paint은 요소의 위치나 크기를 변경하지 않고 페이지의 시각적 모양만 업데이트하는 작업입니다. 이는 re-layout보다 적은 비용이 드는 작업이며, 페이지의 시각적 디스플레이만 변경하기 때문에 복잡한 계..

JavaScript에서 전역 범위에서 선언한 변수나 함수는 전역 객체의 프로퍼티로 등록됩니다. 브라우저 환경에서는 전역 객체로 window 객체를 사용하고, Node.js 환경에서는 global 객체를 사용합니다. 리액트에서 쓴다면 window 객체겠네요. 이 때, JavaScript에서는 호이스팅(hoisting)이라는 메커니즘이 있습니다. 호이스팅은 변수나 함수를 선언하기 전에 사용할 수 있다는 것을 의미합니다. 즉, 변수 선언 혹은 함수 선언은 위치에 상관없이 자동적으로 스코프의 최상위로 끌어올려지는 것입니다. 하지만 전역객체 window는 브라우저 환경에서 전역객체로 사용되고, 전역 변수와 함수를 window 객체의 프로퍼티로 사용할 수 있습니다. 즉 전역 스코프에서 선언한 변수와 함수는 자동으로..

데이터 타입 구분 데이터 타입 예시 원시 타입(Primitive Type) number - 10, 10.12, -20 - Infinity, -Infinity, NaN - 0b100001(2진수), 0o101(8진수) - 1 === 1.0 (숫자타입은 모두 실수로 처리) - 0o101 === 1 ("") string - 'String\n Number'(이스케이프 시퀀스 없이는 줄바꿈 불가) - `Template Literal Number` (이스케이프 없이 줄바꿈 등 허용) - `variable value is ${variables}` (Template Literal은 변수를 넣어서 사용 가능) boolean - true, false null - null - 변수에 값이 없음을 의도적으로 명시 - und..

react-hook-form, Formik과 같은 Validation을 도와주는 라이브러리를 사용하는 경우, Form Submit 자체를 비동기로 하기 때문에 테스팅 시에도 비동기로 테스트 해주어야한다. // App.spec.tsx import { Controller, useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; ... describe('test', () => { it('react-hook-form 테스트', async () => { const TestPage = () => { const { control } = useForm(...) return ( { return }} /> ) } ren..