Headless Components Headless란 웹개발에서 백엔드와 프론트엔드를 분리하는 개념이지만 프론트엔드 리액트 내에 Headless Design System 이란 시각적 디자인과 컴포넌트 로직을 분리해 개발한 디자인 시스템을 말합니다. 따라서 headless-component도 UI가 없고 로직만 존재하는 컴포넌트를 말하죠 UI 라이브러리의 한계 와 Headless UI 라이브러리의 등장 외부 UI 라이브러리를 사용할 경우, 개발자 입맛대로 디자인이나 기능을 수정하기가 매우 어렵다는 단점이 있습니다. 더 나아가 해당 라이브러리에 심각한 버그가 있거나, 유지보수를 종료한다고 하면 그 컴포넌트를 버려야하는 안전성의 문제가 있습니다. 그래서 나온 개념이Headless UI 라이브러리입니다. 헤드리..
Context API 리액트 버전 16부터 리액트에서 제공하는 React 컴포넌트 트리 안에서 전역 상태를 전달 및 공유할 수 있는 내장 API 입니다. 주로 전역 상태를 공유할 때 사용하지만 반드시 전역적으로 필요는 없습니다. 또 context API는 단순히 리액트 컴포넌트간에 값들을 공유하는 일만 하며, 주로 useState 와 같이 사용해 useState가 *상태관리를, context API 가 Props가 아닌 방식으로 값을 공유하는 역할을 합니다. 따라서 context API는 "상태 관리"도구가 아님을 유의해야 합니다. context API는 파이프 같은 역할로 props Drilling 을 막을 수 있지만 남용하면 컴포넌트를 재사용하기 어려울 수 있어 주의하여 사용해야 합니다. Contex..
Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 실제 DOM oject과 같은 속성을 담고 있는 복사본. 실제 DOM 과는 달리 html 객체에 기반한 JS 객체 형태로 메모리 안에 저장 및 동작하며 실제 렌더링이 일어나지 않음. Item 1 let domNode = { tagName : "ul", attributes: {id: "items"}, children:[ { tagName: "li", textContent: "Item 1", }, ], }; 브라우저에 있는 문서에 직접적으로 접근할 수 없다. Api 가 없음. 어떤 인터렉션에 의해 DOM의 변화가 발생하면 ..
프로젝트 중 상세 페이지 내에서 자신이 작성한 대댓글이나 댓글 수정하기 버튼을 누르면 해당 댓글의 정보를 해당 url 로 이동하면서 넘겨줘야하는 상황이 생겼습니다. usenavigate 기능 중 url 이동시 데이터를 같이 넘겨주는 기능이 있어 이를 적용했습니다. 데이터 넘길 때 //데이터 넘기기 import { useNavigate } from 'react-router-dom'; export default function Community() { const navigate = useNavigate(); //navigate() 함수 안에 첫번째 인자로 이동하려는 url를 작성하고 //두번째 인자는 key가 state이며 value로 해당 url에 보내고싶은 데이터를 담아 객체 형태로 작성합니다. //필자..
북마크 컴포넌트를 만들고 재사용하려고 보니 그전 만들었던 북마크 컴포넌트는 내장된 함수 기능이 많아 props 설정이 복잡했고 사실상 재사용이 불가능했다. (????) 프로젝트중 컴포넌트를 전면 바꾸면서 재사용성 높은 공통 컴포넌트의 조건을 다시한 번 생각하는 시간을 가졌다. *북마크와 연결된 칵테일의 정보를 item에 담고 칵테일들의 전체 목록인 data까지 변경하는 다소 복잡한 로직이였다. import { useSelector, useDispatch } from 'react-redux'; import { updateBookmark } from '../../redux/slice/userInfoSlice'; import tw from 'tailwind-styled-components'; // 사용가능한 ..
에러발생: React Hook "useDispatch" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function react hook useDispatch 를 사용중 다음과 같은 오류를 만났습니다. 최상위 수준에서 React Hook "useDispatch"를 호출할 수 없습니다. React Hook은 React 함수 컴포넌트 또는 사용자 정의 React Hook 함수에서 호출해야합니다. * useDispatch는 React Redux 라이브러리에서 제공하는 React 후크입니다. 원인: React Hook 을 React 함수 컴포넌트 밖에서 ..
Redux 란? 상태관리 라이브러리입니다. 전역 상태를 관리할 수 있는 저장소인 Store 를 제공하여 기존 비효율적인 상태관리 문제를 해결합니다. * 상태(state)란? 더보기 리액트라는 환경에서 예를 들어 본다면, 앱의 유동적인 데이터를 다루기 위해 특별히 관리하는 객체를 의미합니다. 네이버사이트로 예를 들어봅시다. 사용자가 키워드를 검색창에 작성하면 네이버 사이트는 검색하는 데이터마다 관련된 데이터를 각각 달리 보여줘야 합니다. 이처럼 사이트에서는 유동적인 데이터 (검색창에 입력한 데이터 )를 특별히 state라는 객체에 저장해 관리하며, 이 state를 보다 효율적으로 관리하는 라이브러리가 redux 입니다. Redux의 세 가지 원칙 1. Single source of truth 상태를 저장하..
에러발생: Expected the root reducer to be a function. Instead, received: 'undefined' react와 redux 연결중 다음과 같은 오류를 만났습니다. "Redux가 함수가 루트 리듀서로 전달될 것으로 예상하지만, 대신 undefined 값을 받았습니다." import 문제였습니다. 5줄 creatStore 인자로 root reducer인 counterReducer 함수를 전달된 것으로 예상하지만 undefined 가 나왔습니다. index.js 파일 2번 import 줄 과 Reducers 폴더 index.js 파일 을 살펴봅시다. 원인 : import 와 export 잘못된 연결 Reducers 폴더 index.js 에서 18줄 export de..
