🌱 Frontend Developer

React로 UI를 만들면서 데이터를 불러오는 동안의 로딩 상태를 처리를 아래와 같이 했었다.const Component = () => { const [data, setData] = useState(null); useEffect(() => { fetchData().then((res) => setData(res)); }, []); if (!data) return 데이터를 불러오는 중...; // 로딩 상태 처리 return {data};};서버에서 데이터를 받아오는데 시간이 걸리므로, 데이터를 불러오기 전까지는 "데이터를 불러오는 중..."이라는 문구를 보여준다.하지만 모든 컴포넌트에서 이 방식을 적용하는 것은 비효율적이므로, 더 효율적인 방법을 찾다가 Suspense를 알게 되었다.🧐 S..

팀 프로젝트를 진행하며 공통 color를 정의해 놓고 쓰기로 하였다.우리 팀은 styled-components를 사용하고 있는데구글링을 통해 ThemeProvider를 통해 전역에서 공유할 수 있다는 내용을 접하고 바로 적용해 보기로 했다.import { StrictMode } from 'react';import { createRoot } from 'react-dom/client';import App from './App.jsx';import { ThemeProvider } from 'styled-components';import { theme } from './styles/theme.js';createRoot(document.getElementById('root')).render( ..

useState vs useReducer 언제 사용해야 할까?  🧐React로 개발할 때 컴포넌트 내부에서는 보통 'useState'로 상태를 관리한다.그리고 전역 상태를 관리하면서 prop drilling 없이 데이터를 공유하기 위해 'Context API'를 사용한다.전역 컨텍스트를 적용하는 컴포넌트 내부에서 useState를 사용해 상태를 보관하고 업데이트하고이 컨텍스트 프로바이더를 최상위 부모 컴포넌트를 감싸서 전역에서 상태를 사용할 수 있도록 한다.하지만 useState만으로 상태를 관리하기에는 한계가 있다.상태를 변경하는 함수가 많아질수록 코드가 복잡해지고 관리하기 어려워지기 때문이다.또한 상태 변경 로직이 여러 곳에 분산되면, 코드의 구조를 한눈에 파악하기 어려워진다. 이런 문제를 해결하기..

📍 Routing이란 뭘까?쉽게 말하자면 우리가 주소창에 www.naver.com을 입력하면 네이버 페이지로 이동하는 것이다.즉 클라이언트에서 URL을 통해 페이지를 요청을 했을 때 서버에서 적절한 리소스를 응답해 주는 것을 의미한다. 원래 라우팅은 서버의 영역이었다.왜냐하면 원래 웹이란 것은 MPA(Multi Page Application)이었고클라이언트는 페이지를 이동할 때마다 서버에 요청을 하고서버는 각 요청에 맞는 index.html을 클라이언트에 보내줬다.따라서 각 페이지에 해당하는 index.html을 라우팅 하는 것은 서버의 역할이었던 것이다. 하지만 SPA(SinglePageApplication)의 발전으로 이제 라우팅은 클라이언트의 영역으로 들어왔다.웹 페이지에 들어가면 처음에 서버가 ..

React에는 상태를 관리하는 Hook이 2개가 있다.useState와 useReduce. 오늘은 useState에 대해서 공부해 보려고 한다.1. 어떤 걸 State로 관리해야 하나요? useState는 상태를 관리하는 Hook답게,state를 보고 있다가 상태 변화가 감지되면 리렌더링을 통해 UI를 다시 그린다. 이런 리액트의 특징 때문에 불필요한 state를 많이 생성한다면, 불필요한 렌더링도 같이 늘어나게 될 것이다.따라서 우리는 앱이 기억해야 하는 최소한의 데이터만을 state로 관리해야 한다. 그렇다면 어떤 걸 state로 관리해야 할까?아래의 3가지를 제외하면 state로 관리할 수 있을 것이다. 정적인 데이터일 때 부모로부터 props로 전달받을 때기존의 state로 계산할 수 있는 값일 ..

오늘은 React하면 절대 빠질 수 없는 개념 가상돔에 대해 간단히 알아보려고 한다.가상돔, 왜 쓸까?DOM은 우리가 보고 있는 웹 페이지의 구조와 내용을 구성한다.우리가 새로 요소를 추가하거나, 기존에 있던 요소를 삭제하는 등의 작업을 하게 되면추가된 화면 혹은 삭제된 화면을 보여주기 위해 DOM은 다시 그려져야 한다.즉 렌더링이 발생한다. 레이아웃을 다시 계산하여 페이지를 그리는 렌더링은 성능을 저하시키고 비용이 많이 든다.따라서 렌더링이 자주 일어나면 당연히 좋지 않은 사용자 경험을 제공할 것이다. 그렇다고 정적인 웹 페이지만 사용할 수는 없지 않은가?이런 문제점을 해결하기 위해 React에서는 Virture DOM을 사용한다.가상돔은 어떻게 작동할까?가상돔은 실제 DOM과 같은 내용을 담고있는 복..

자바스크립트를 공부할 때 이미 많이 들었을 것이다. 원시형 데이터는 불변성이 있고참조형 데이터는 불변성이 없다. 여기서 불변성(immutability)이란 데이터가 변경되지 않음을 보장한다는 뜻이다.즉 내부 상태를 직접 수정하지 않는 것을 의미한다. 자바스크립트에서 배운 내용을 리마인드 하기 위해 조금 길지만 다시 정리해보겠다.const number = 5; number는 원시형 데이터 5가 저장되어 있는 메모리 주소를 가리킨다. (편의 상 @5001이라고 하겠다.)여기서 number의 할당 값을 6으로 변경하고 싶다면 @5001에 있는 5는 삭제하고 6을 할당하는 것이 아니라새로운 메모리 주소 @5002에 6을 할당하고, 변수 number가 가리키는 메모리 주소를 @5002로 변경한다.@5001의 메모..