개발 기록 남기기✍️

🧐 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은 브..

❓ 메모이제이션이란? 메모이제이션(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..

useReducer를 학습하기 전에 먼저 useContext부터 짚고 넘어가기! 정신차리고 레츠고🏃‍♀️ A 컴포넌트 > B 컴포넌트 > C 컴포넌트 순으로 계층적 구조를 이루고 있을 때, C 컴포넌트에서 조상인 A 컴포넌트의 상태를 가져오려고 한다. 이럴 땐 어떻게 해야할까? A 컴포넌트에서 B 컴포넌트의 props에 상태를 전달하고 B 컴포넌트에서 C 컴포넌트의 props에 상태를 전달하면 된다. 그런데 depth가 10이 되는 경우에도 모든 컴포넌트에 해당 상태를 props로 일일이 전달해야 하는걸까? 🎣 useContext 앞서 말한 현상을 props drilling이라고 한다. 대표적인 anti-pattern으로, 작동은 하겠지만 이렇게 작성할 경우 해당 props가 어디서부터 내려온 것인지 특..

useRef... 수업 때 들었지만 어렴풋이만 알아듣고 아직 완전히 이해하지 못해서 이참에 뿌셔보려고 한다!! 정신차리고 레츠고🏃‍♀️ useRef는 특정한 요소의 id 처럼 활용할 수 있을 뿐만 아니라, 변수를 만드는 것에도 사용할 수 있는 리액트 훅(hook)이다. useRef의 역할과, 어떻게 사용할 수 있는지를 알아보자. 💻 첫 번째) 특정 DOM 선택 JavaScript에서는 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 있다. 상황 예시) 특정 요소의 크기 가져오기 스크롤바의 위치를 가져오거나 설정하기 특정 요..