Intro 이번 글은 프로젝트 리팩토링 중 리렌더링 이슈에 대한 고민을 적은 글입니다. 해결하기 위한 가설과 시도만 있고 정확히 왜 발생했는지에 대한 결론은 없습니다. 추측만 존재합니다... 내용과 작성자가 다소 애송이처럼 보이시더라도 너그럽게 봐주시면 감사하겠습니다. 혹시나 내용에 대한 피드백이 있다면 댓글을 부탁드리겠습니다! 무슨 문제였나요? 장소 컴포넌트의 버튼을 눌러서 장소를 추가시키는 상황입니다. 상단의 일정 목록 컴포넌트는 데이터가 추가되니까 배열에 변화가 있어 리렌더링이 되는 것이라고 생각했습니다. 그에 반해 하단의 장소 목록 컴포넌트는 데이터가 동일합니다. 그래서 리렌더링이 왜 발생하는지 궁금했습니다. 사실 저 상태에서는 리렌더링이 되는 것이 맞습니다. 장소를 추가할 때마다 새롭게 추가된 ..
🥯 애피타이저 처음 리액트 공식문서에서 useId라는 훅을 보았을 때 리액트에서 uuid를 대체하는 훅이 만들어진건가! 라는 생각으로 공부해보게 되었습니다. 하지만 공부해보니 uuid랑은 상관 없는 훅이었습니다. 이제 useId에 대해서 알아보겠습니다. 🍖 메인 const id = useId(); useId 훅은 매개변수는 사용하지 않습니다. 고유 ID 문자열을 반환합니다. useId는 컴포넌트 최상단 혹은 훅에서만 호출이 가능합니다. 리스트의 Key로 사용하면 안됩니다. useId 사용해보기 import { useId } from 'react'; const Input = ({labelText}) => { return ( {labelText} ) } export default function Form()..
🥯 애피타이저 RTK Query란? RTK Query는 웹 애플리케이션에서 데이터를 가져오는 상황을 간단하게 하여 data fetching과 cashing 로직을 직접 작성할 필요가 없도록 하는 강력한 data fetching, cashing 툴입니다. RTK Query는 Redux Toolkit를 설치하면 내장되어 있기 때문에 따로 설치를 하지 않아도 선택하여 사용할 수 있습니다. RTK Query를 왜 사용하나요? API 호출 및 데이터 관리와 관련한 boilerplate 코드를 대부분 처리가 가능하므로 더 적은 코드를 작성할 수 있습니다. 자체적으로 캐싱을 처리하고 불필요한 요청을 줄여서 애플리케이션의 성능을 향상합니다. 또한 백그라운드에서 백엔드 데이터를 프리로드하여 애플리케이션 로딩 속도를 빠르..
🥯 애피타이저 Redux란? Redux는 애플리케이션의 상태를 전역으로 관리하는 데 사용되는 오픈소스 JavaScript 라이브러리입니다. React와 함께 사용되기도 하지만, 다른 라이브러리나 프레임워크와도 사용할 수 있습니다. Redux를 사용하는 이유 하나의 Store를 이용하기 때문에 애플리케이션의 상태를 쉽게 추적하고 변경할 수 있고, Props Drilling을 방지하여 손쉬운 상태 전달과 업데이트가 가능하여 코드의 유지 보수성을 높이고 효율성을 극대화할 수 있습니다. 또한 미들웨어라는 기능을 제공하여 비동기 작업을 효율적으로 처리할 수 있습니다. Redux의 세 가지 원칙 Single source of truth 하나의 중앙 집중화된 Store에서 데이터를 관리합니다. State is rea..
🥯 애피타이저 안녕하세요. 이번 글에서는 useMemo를 예제와 함께 소개해보겠습니다. 끝까지 읽어주실것이라 믿고 미리 감사드립니다. 🍖 메인 useMemo가 뭐예요? useMemo는 React에서 컴포넌트의 성능을 최적화하는 데 사용되는 Hook입니다. 함수의 결과를 메모이제이션하여 비용이 많이 드는 계산을 최적화하는데 사용됩니다. 함수를 메모하는 useCallback과는 달리, useMemo는 함수의 결과 값을 메모합니다. const memo = useMemo(calculateValue, dependencies); calculateValue useMemo의 첫 번째 인수로 들어가는 calculateValue는 캐시 하려는 값을 계산하는 함수입니다. 이 함수는 순수 함수여야 하며, 인수를 받지 않아야 ..
🥯 애피타이저 안녕하세요. useReducer에 대해 공부하는 김에 TodoList를 만들어보게 되었읍니다. 매우 간단하고 디자인이라곤 1도 찾아볼 수 없으니 감안하고 봐주세요. 혹여나 코드에 대해 피드백이 있으시다면 댓글로 알려주세요. 그렇다면 제가 무한 감사를 드릴 것입니다. 🍖 메인 TodoList의 얼굴 해야 할 일을 써넣을 input 태그와 등록 버튼을 담은 form, TodoItem 컴포넌트, TodoItem들을 담을 TodoList 컴포넌트, 이렇게 3개의 컴포넌트로 구성된 간단한 앱입니다. reducer // reducer 함수 const reducer = (state, action) => { switch (action.type) { case "INIT": return [...action...
🥯 애피타이저 안녕하세요. 이번 글은 useReducer를 간단하게 알아보겠읍니다. 피드백할 부분이 있다면 댓글로 알려주세요. 그럼 무한 감사를 드립니다. 🍖 메인 간단 소개 useReducer는 React의 훅(Hook) 중 하나로, 컴포넌트의 상태를 관리하기 위해 사용됩니다. useReducer는 Redux와 비슷한 개념으로 동작하지만, Redux보다 더 간단하고 가볍게 사용할 수 있습니다. 문법 useReducer는 세 개의 인자를 받을 수 있습니다. const [state, dispatch] = useReducer(reducer, initialArg, init); 첫 번째 인자로 reducer 함수이고, 두 번째 인자로 initialArg(초기 상태), 세 번째 인자는 초기 상태를 반환해야 하는 ..
📌 React란? React는 페이스북에서 개발한 JS 오픈소스 라이브러리입니다. React는 Virtual DOM이라는 개념을 사용하여 상태의 변함에 따라 선택적으로 UI를 렌더링 합니다. Virtual DOM은 가상으로 존재하는 DOM입니다. React는 이벤트가 발생할 때마다 Virtual DOM를 만들어서 렌더링마다 실제 DOM과 비교해서 변경이 필요한 최소한의 변경사항만 찾아서 실제 DOM에 반영해 줍니다. 이로 인해, 앱이 효율적으로 동작해서 속도 개선에 많은 도움이 된다고 합니다. 더보기 Vanilla Javascript로 가상돔(VirtualDOM) 만들기 이 링크에서는 Virtual DOM에 대한 개념뿐만 아니라 직접 JS로 구현하는 것까지 볼 수 있습니다..! 리액트의 3가지 특징 선언..
