최신 글

선언적 프로그래밍이란?선언적 프로그래밍이란 무엇을 표현할지에 집중하고 어떻게 할지는 숨기는 개발 스타일이다.UI를 선언적으로 사용할 수 있도록 만들면 당장 몰라도 되는 디테일은 숨겨지고 핵심 정보가 들어나서 로직을 파악하기 쉬워진다. 인터페이스부터 생각하자리액트에서 간단한 alert 컴포넌트를 모달로 띄운다고 가정해보자. 사용처에서 UI 컴포넌트를 import하거나 만들고 isOpen과 같은 상태로 여닫기를 관리해줘야한다.이에 비해 브라우저 내장 Web API인 window.alert()의 사용 방법은 간단하고 선언적이다.alert("Hello world!");어디서나 메시지와 함께 alert 함수를 호출해주기만 하면 창을 띄워준다.이렇게 간단한 방식으로 리액트 컴포넌트도 띄울 수 있도록 만들어보자.co..

JavaScript에서 forEach나 map을 사용할 때 메서드의 콜백 함수는 인자로 배열의 각 요소에 대한 참조를 받게 되는데, 이는 배열 안의 객체 자체를 가리키는 참조를 의미합니다. 그럼 그 인자를 재할당 하면 원본 배열의 요소가 바뀔까요? let array = [{ a: 1 }, { b: 2 }]; array.forEach(item => { item = { c: 3 }; // 새 객체로 재할당 }); 결론부터 말하자면 바뀌지 않습니다. 이유 console.log(array); // [{ a: 1 }, { b: 2 }] item 이라는 지역 변수가 참조(주소)값을 가지고 있어서 원본을 변경 할 수 있다고 착각할 수 있지만 이 재할당은 지역 변수의 값을 변경할 뿐, 원본 배열에 영향을 주지 않습니다..

v13 컴포넌트 수준에서 렌더링 환경을 선택 💡 next 13 이전에는 페이지에 필요한 모든 JS 코드를 하이드레이션 했지만 서버 컴포넌트가 도입된 후에는 클라이언트 컴포넌트만 하이드레이션 하면 된다. → JS 번들의 사이즈가 줄어든다. 📌 클라이언트 컴포넌트 클라이언트 컴포넌트를 사용하면 애플리케이션에 클라이언트 측 인터랙션을 추가할 수 있다. 서버에서 미리 렌더링 되고 클라이언트에서 hydrated 된다. 클라이언트 컴포넌트는 기존의 페이지 라우터의 컴포넌트가 항상 작동하던 방식이다. 작동방식 next.js가 빌드 중에 컴포넌트를 하나씩 확인하다가 클라이언트 컴포넌트를 만남 정적으로 만들 수 있는 부분을 확인 → 정적 HTML 프리렌더링 빌드 시에 클라이언트 컴포넌트도 프리렌더링 되기 때문에 내부의 ..

React에서 상태(state)는 컴포넌트의 라이프사이클 동안 정보를 유지하는데 사용되는 중요한 개념입니다. useState 훅을 이용하여 컴포넌트의 상태를 관리하면, 상태가 변경될 때마다 컴포넌트가 다시 렌더링 됩니다. 그런데, 상황에 따라서 컴포넌트의 상태가 유지되거나 초기화되는 경우가 있는데, 이는 컴포넌트가 렌더링 되는 방식에 따라 달라집니다.삼항 연산자(? :)와 논리 연산자(&&)를 이용하여 컴포넌트를 렌더링 하는 경우, 두 연산자가 UI 트리(가상 DOM)에 미치는 영향은 서로 다릅니다. 이로 인해 React의 diffing 알고리즘이 컴포넌트를 다르게 인식하고 처리하며, 결론적으로 컴포넌트의 상태 유지에서 차이가 나게 됩니다.삼항 연산자와 컴포넌트의 상태삼항 연산자를 사용하면, 두 표현식 ..

기존에 styled-components의 ThemeProvider로 다크모드를 구현하고 있었는데, 토글 버튼에 setTheme 함수를 직접 전달해주다 보니 props drilling이 우려되고 추상화도 잘 되지 않아서 코드가 지저분해 보였기 때문에 리팩터링을 하려고 마음먹었다. theme의 상태를 관리하기 위해서 보통 전역 상태 라이브러리를 많이 사용하지만, 현재 개인 프로젝트에서 전역으로 관리할 상태가 theme 밖에 없어서 패키지를 설치하지 않고 가볍게 사용할 수 있는 걸 찾으려고 했다. 처음엔 URI 쿼리 스트링으로 상태를 관리하는 방법을 생각했다. 하지만 유저가 URI를 직접 수정할 수 있어서 예기치 않은 변경이 발생할 수 있고, URI가 변경될 때마다 브라우저 히스토리가 쌓여서 히스토리가 불필요..