milliwonkim의 블로그

불변성 메모리 영역의 값을 변경할 수 없는 것 리액트의 불변성을 지켜야하는 이유는 다음과 같습니다. 1. 효율적인 상태업데이트(얕은 비교 수행) 리액트는 상태비교 시, 얕은 비교를 수행(이전 참조값과 현재 참조값만 비교)(객체의 모든 부분을 비교하는 것이 아님) => 따라서 계산 리소스 줄여줌 const App = () => { const [state, setState] = useState({}) const handleClick = (key, value) => { // 얕은 비교를 수행 setState({ ...state, [key]: value }) } return handleClick(key, value)}>{state} } 원시타입은 바로 값을 setState에 넣어줘도 되지만, 참조타입인 객체의 ..

visibility는 이미 DOM에는 등록이됐지만, 실제로는 UI가 보이지 않게합니다. display: none은 해당 엘리먼트가 DOM에서 완전히 제거됩니다. 그러면 엘리먼트가 다시 표시돼야할 때, DOM에 추가 렌더링이 필요하게 돼서 visibility에 비해 성능에 부담을 줄 수 있습니다. 성능에 부담을 줄 수 있는 이유는 다음과 같습니다. visibility: hidden의 경우, 엘리먼트가 브라우저에서 숨겨져도 레이아웃 계산에 참여합니다. 반면에 display: none의 경우, 레이아웃 계산에서 해당 엘리먼트를 제외하고 계산하기 때문에, 엘리먼트를 다시 표시할 때 돔 렌더링 비용이 더 많이 들어갈 수 있습니다. 하지만, 최적화의 경우 성능차이가 미미하므로 가독성, 유지보수성을 우선시 할 필요도..

Context API Redux Recoil 값을 전달하는 원리 컴포넌트 트리를 따라서 데이터 전달 값을 관리하는 원리 설명 Context 객체의 데이터가 변경되면, Context Provider 내부의 모든 컴포넌트들이 재렌더링 (Context를 구독하지 않는 컴포넌트들도 재렌더링) 중앙 데이터 저장소에서 값을 관리하다가 store의 상태가 변경되면, redux의 해당 데이터를 구독하고 있는 컴포넌트들만 다시 재렌더링 atom 단위로 상태값 관리 (의존성을 가질 수 있고, 이를 통해 상태값이 변경되면 의존하는 다른 atom이 자동으로 업데이트) atom은 RecoilRoot 컴포넌트 내에서 정의됨 상태를 트리로 관리 단일 상태 트리(Single State Tree) => 컴포넌트 간 의존성 그래프 =..

리액트 훅은 클로저 개념을 사용합니다. 클로저는 함수가 속한 렉시컬 스코프에서 선언된 변수에 대한 참조를 유지하는 함수입니다. 렉시컬 스코프란 변수의 유효범위를 결정하는데 사용되는 스코프의 종류 중 하나입니다. 함수를 어디에 정의했는지에 따라 해당 함수의 변수 스코프가 결정됩니다. // 렉시컬 스코프 때문에 innerFunction 안에서는 outerVariable에 접근 가능합니다. // innerFunction 함수가 outerFunction 함수 내부에서 정의됐으므로 // outerFunction의 함수 스코프에 접근 가능합니다. function outerFunction() { const outerVariable = "outer"; function innerFunction() { console.lo..

9(타입 변환, 단축 평가) const x = 10 // 숫자를 문자열로 명시적 타입 변환(타입 캐스팅)을 한다. const str = x.toString(); console.log(typeof str, str) // string, 10 // x 변수의 값이 변경된 것은 아님 => 원시값을 직접 변경은 불가능하다.(원시값은 변경불가능한 값) console.log(typeof x, x // number, 10 // --------- // 암묵적 타입변환(=타입 강제 변환): 자바스크립트 엔진에 의해 암묵적으로 타입 자동 변환 const x = 10 // x + ''로 인해 생성된 문자열 '10'은 x에 재할당 되지 않는다. // 단순히 새로운 타입의 값을 만들고, 한 번 사용하고 버린다. const str..

리액트 소스코드는 크게 세 부분으로 나뉩니다. React Core Component 리액트 컴포넌트의 기본동작을 구현 컴포넌트의 state, props를 관리하고, 라이프사이클 메서드 제공 createElement 가상 DOM 요소를 생성 JSX 문법 사용 시, 이 함수를 이용해서 가상 DOM 요소를 생성합니다. diff algorithm 가상 돔요소 변경을 비교하고, 변경된 부분만 실제 DOM에 반영합니다 React Renderer 실제 돔 렌더링 작업 수행 리액트 코어와 분리, React DOM, React Native 등의 다양한 렌더러 제공 React Reconciler 가상돔 구현 후, 변경된 부분만 실제 DOM에 반영 React Renderer와 분리돼있으며, 리액트 코어와 함께 가상 돔 구현..

Bad Case - setInterval 콜백에서 setCount(count + 1)을 호출할 때, count 변수는 useState 훅에서 설정한 초기 값을 참조합니다. 이는 useEffect 콜백함수가 컴포넌트 마운트 시 한 번만 호출되기 때문에 count의 초기 값이 클로저에 의해 캡쳐됩니다. import React, { useEffect, useState } from "react"; const App = () => { const [count, setCount] = useState(0); useEffect(() => { let i = 0; const interval = setInterval(() => { console.log("i: ", i++); // 이렇게 할 경우, count의 이전 값인 0을..

결론: 자바스크립트 엔진의 최적화로 인해, 퍼포먼스의 차이는 거의 없고, 가독성과 유지관리의 용이성을 중심으로 코드작성해야합니다. 그래도 굳이 고르자면? => for loop이 퍼포먼스가 더 좋습니다. 왜냐하면 forEach의 경우, 고차함수라는 함수이다보니, 함수호출 및 콜백함수 실행과 관련된 추가작업이 필요합니다. const array = [1, 2, 3, 4, 5]; // 함수실행: forEach라는 함수를 콜스택에 넣는다. 그리고 실행한다. // 콜백함수 호출: forEach안의 콜백함수 (item) => {...}을 실행한다. array.forEach((item) => { console.log(item); }); 반면에 for loop의 경우, i++, i--에 대한 연산만 하면 됩니다. for..

참고 리액트는 프레임워크가 아닌 라이브러리이지만 쉽게 통합해 부르기 위해, 이하 프레임워크로 통합한다 생산성 저하: 프론트엔드 프레임워크는 기본적인 템플릿, 라우팅, 상태 관리 등을 제공하여 개발자들이 보다 쉽게 개발을 진행할 수 있습니다. 프레임워크를 사용하지 않을 경우 이러한 기능들을 직접 구현해야 하므로 생산성이 저하될 수 있습니다. 유지보수의 어려움: 프론트엔드 프레임워크는 일관된 코드 스타일과 구조를 제공하여 코드의 유지보수를 용이하게 합니다. 프레임워크를 사용하지 않을 경우에는 개발자마다 코드 스타일이나 구조가 다를 수 있어서 유지보수가 어려울 수 있습니다. // 리액트를 사용하지 않은 예제 function App() { const button = document.createElement('b..

전역 스코프에서 var로 선언하면 window에 자동으로 window의 프로퍼티로 등록됩니다. 왜냐하면 var로 선언된 변수가 함수스코프 뿐만 아니라, 전역 스코프에서도 유효합니다. 하지만 함수스코프안에서 var로 선언 및 할당을 하면 위와는 다르게 window 전역객체에 할당되지 않습니다. 왜냐하면 var는 함수스코프를 제공하기 때문에 여기서의 var는 해당 함수 스코프에서만 유효합니다.