개발 기록 남기기✍️

Next.js 13버전을 사용하면서 Server Component와 Client Component의 존재에 대해서 알게 되었는데, SSR, CSR 등과의 지식이 섞이니까 헷갈린다..! 파이널 프로젝트 시작 전 확실히 짚고 넘어가보자.🏃‍♀️ 📌 클라이언트 컴포넌트란? 클라이언트 사이드 컴포넌트는 클라이언트(브라우저)에서 렌더되고 fetch되는 컴포넌트이다. 클라이언트 컴포넌트는 브라우저의 자바스크립트 번들을 포함하고 있는 일반적인 리액트 컴포넌트이다. 클라이언트 컴포넌트는 다음과 같은 특징을 갖는다. 클라이언트 컴포넌트는 onClick 같은 상호작용성(인터랙션)을 포함한다. 클라이언트 컴포넌트는 클라이언트라고 불리는 브라우저에서 렌더된다. 클라이언트 컴포넌트는 "use client"라고 선언함으로써 클라..

🧐 Suspense, 왜 필요한가 React에서 비동기 데이터를 읽어오는 컴포넌트를 작성하면 몇 가지 문제가 발생하게 된다. 우선 최종 사용자(end user) 경험 측면에서 UI가 마치 폭포(waterfall)처럼 순차적으로 나타나는 현상이 나타날 수 있다. waterfall 현상은 특히 한 페이지 상의 여러 컴포넌트에서 동시에 비동기 데이터를 읽어오는 경우 자주 발생한다. 상위 컴포넌트의 데이터 로딩이 끝나야지만 하위 컴포넌트의 데이터 로딩이 시작될 수 있기 때문에 일어난다. 뿐만 아니라 초기 랜더링 후에 데이터 로딩 후 다시 랜더링을 수행하는 방법은 경쟁 상태에도 취약하다. 비동기 통신은 반드시 요청한 순서대로 데이터가 응답된다는 보장이 없기 때문에 의도치 않게 싱크가 맞지 않은 데이터를 제공할 수..

✨ useCallback 컴포넌트 내부에서 함수를 생성하는 경우, 매 렌더링마다 새로운 함수가 생성되어 성능에 영향을 미칠 수 있다. 이러한 경우에 useCallback 훅을 사용하면 함수를 메모이제이션하여 불필요한 함수 생성을 방지할 수 있다. 컴포넌트의 최상위 수준에서 useCallback을 호출하여 재렌더링 사이에 함수 정의를 캐시할 수 있다. 📌 매개변수 useCallback(fn, dependencies) fn : 캐시하려는 함수 값 모든 인수를 취하고 모든 값을 반환할 수 있다. React는 초기 렌더링 중에 함수를 반환합니다(호출이 아님!). 다음 렌더링에서 React는 마지막 렌더링 이후 deps가 변경되지 않은 경우 동일한 함수를 다시 제공한다. deps가 변경된 경우 현재 렌더링 중에..

리액트는 가상돔(Virtual DOM)을 사용해 보다 효율적으로 우리가 원하는 페이지를 브라우저에 빠르게 그려준다고 한다. 근데 가상돔이 뭐야? 일반 돔이랑 차이가 뭐야? 뭐야뭐야? 리액트의 동작 원리를 아는 멋찐 개발자가 되기 위해 이번 시간에는 가상돔에 대해 짚고 넘어가자.🏃‍♀️ 🌐 DOM DOM은 Document Object Model의 약자로, HTML, XML 등의 문서를 프로그래밍 언어에서 쉽게 조작할 수 있도록 문서를 객체 형태로 나타내는 인터페이스를 의미한다. DOM은 문서의 구조를 트리 형태로 나타낸다. HTML 문서의 경우, DOM 트리는 HTML 문서의 요소, 속성, 텍스트 등의 모든 내용을 포함한다. 이러한 요소들은 객체로 표현되어 프로그래밍 언어에서 사용될 수 있다. DOM은 브..

⚙️ SSR(Server Side Rendering) SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. JSP/Servlet의 아키텍처에서 이 방식을 사용했다. SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다. 더불어 SEO(search engine optimization) 또한 쉽게 구성할 수 있다. 🔄 SSR 동작 과정 먼저 클라이언트가 초기 화면을 로드하기 위해 서..

❓ 메모이제이션이란? 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 메모이제이션을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다. ✨ React.memo() React.memo는 함수형 컴포넌트에 적용되어 같은 props에 같은 렌더링 결과를 제공한다. 컴포넌트가 props로 동일한 결과를 렌더링하면, React.memo를 호출하고 결과를 메모이징(Memoizaing)하도록 래핑하여 경우에 따라 성능 향상을 할 수 있다. 즉, React.memo를 사용하면 React는 컴포넌..

useState는 너무 기본적인 개념이라서 뭐 정리할 필요 있겠어? 했는데 useState는 async 방식으로 동작한다는 등 몰랐던 개념들이 많아서... 오만했던 내 모습을 반성하고 useState를 알아보자.🏃‍♀️ ⚛️ React Hooks 리액트의 Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 “연동(hook into)“할 수 있게 해주는 함수이다. 리액트에 함수형 컴포넌트가 도입되면서, 리액트는 함수형 컴포넌트가 어떤 값(상태)을 유지할 수 있도록 "캐시"를 만들었다. 이 캐시를 이용하고자 만든 여러 개의 API를 Reack Hook 함수라고 부른다. Hook은 함수형 컴포넌트 안에서만 동작하며, class 없이 React를 사용할 수 있게 해준다. 🧐 React Hook..

모든 리액트 컴포넌트에는 생명주기가 존재한다. 생명주기의 때에 따라 어떤 작업을 처리해야 하는지 지정해줘야 불필요한 업데이트를 방지할 수 있다. 리액트의 생명 주기 메서드와 useEffect에 대해서 알아보자.🏃‍♀️ ♻️ 생명 주기 메서드 컴포넌트는 생성(mounting) ➡️ 업데이트(updating) ➡️ 제거(unmounting)의 생명주기를 갖는다. 클래스형 컴포넌트에서는 생명 주기 메서드를 통해 생명 주기를 관리한다. 🌱 1. 마운트(Mount) ➡️ 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다. ◼️ constructor() 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드. this.props, this.state에 접근할 수 있으며 리액트 요소를 반환한다..

🤷🏻‍♀️ 문제 상황 React와 REST API를 활용하여 지난 과제 때 바닐라 JS로 만들었던 투두리스트를 다시 만들고 있는 중이다. useEffect를 사용하여 todoItem의 done 속성이 바뀔 때마다 useEffect를 실행하고 API 통신을 하도록 코드를 작성했다. 근데 useEffect의 특성 상, 컴포넌트가 처음 렌더링 될 때 state가 세팅되므로 state가 변화되었다고 감지해 종속 배열에 상관없이 초기 렌더링 때 useEffect가 항상 실행된다. 그래서 초기 렌더링 떄 useEffect가 실행되고, 수정할 todoItem이 세팅되지 않은 상태이기 때문에 API 요청에 빈 데이터가 들어가게 되고, 이로 인해 Network Error가 발생하게 되었다. 💻 해결책 - useRef를 ..

Redux를 공부하기 전에 잠깐!!!! useReducer의 개념을 이해하면 Redux는 물론이고 상태 관리 라이브러리를 공부할 때 이해가 가능하다는데..? Redux 라이브러리 공부하기 전에 Reducer부터 알아보자🏃‍♀️ 💻 useReducer useReducer는 useState 를 통한 상태 관리 및 데이터 추가/제거/수정 등의 각종 Handler를 하나의 함수로 사용할 수 있도록 해준다. 뿐만 아니라 useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있다. 즉, useReducer로 상태 관리를 하면 컴포넌트를 최적화할 수 있다. // us..