전체 글93 [react] redux reducer 를 작성할 때 switch 에 default 를 빼먹는다면... / The slice reducer for key "letter" returned undefined during initialization. 에러 상황 reducer 를 작성하고 실행했는데, 아래와 같은 에러가 발생했다. The slice reducer for key "letter" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined. "letter" 키에 대한 slice reducer가 초기화 중에 undefined를 반환했.. 2024. 2. 2. [react] 에러 지옥 - 경로 문제 에러 상황 context API로 작업했던 프로젝트를 redux로 리팩터링 하는 작업을 하고 있었는데 아래와 같은 에러를 마주하게 되었다. 첫 번째 에러 Module not found: Error: Package path ./config/configStore is not exported from package C:\codeGit\artist-letters-project\node_modules\redux (see exports field in C:\codeGit\artist-letters-project\node_modules\redux\package.json) Did you mean './redux/config/configStore'? Requests that should resolve in the cur.. 2024. 2. 2. [Warning] styled-components 속성을 인식하지 못할 때 상황 styled-components로 isActive라는 props를 전달하여 버튼을 눌렀을 때 나오는 스타일에 대한 css를 다르게 만들었는데, 계속 개발자 도구에 아래와 같은 경고 메시지가 나타났다. Warning: React does not recognize the `isActive` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isactive` instead. If you accidentally passed it from a parent component, remove it from the DOM element. 번역을 돌려보니 .. 2024. 2. 1. useState VS useRef useState와 useRef의 차이점을 알아보고 어떤 경우에 어떤 hook 을 사용하는 것이 좋을지 확인하자. 차이점 값의 변경에 따른 렌더링 useState 상태를 변경할 때마다 컴포넌트가 리렌더링 된다. 컴포넌트의 상태를 변경하고 UI를 업데이트할 수 있다. useRef 값이 변경되어도 컴포넌트를 리렌더링 하지 않는다. 일반적으로 렌더링과 상관없는 값이나 DOM 접근에 사용된다. 사용 목적 useState 컴포넌트의 상태를 관리하고 상태의 변경에 따라 리렌더링이 필요한 경우 사용한다. 화면에 표시되는 정보 등이 해당된다. useRef 렌더링과 무관하게 특정 값에 접근할 때 사용한다. DOM 요소에 대한 참조를 생성하거나 이전 값과 현재 값을 비교 또는 setInterval의 intervalId를 저.. 2024. 1. 31. react 프로젝트에서 절대 경로 문제 상황 router로 화면이 메인에서 상세로 넘어왔을 때는 스타일이 적용된 대로 정상적으로 나왔는데, 그 화면에서 새로고침을 하니 reset 스타일이 적용되지 않은 상태로 화면이 나오고 있었다. 개발자 도구로 확인해 보니 다른 경로로 불러오고 있었다. [문제 상황] 해결 방법 index.html에서 ./reset.css -> %PUBLIC_URL% 로 변경했다. public 폴더에서 절대 경로를 사용하기 위해서는 %PUBLIC_URL% 를 사용해야 한다. 공식문서를 확인해 보니 영어라서... 번역을 돌려봤다. npm run build 명령을 실행하면 Create React App이 %PUBLIC_URL%을 올바른 절대 경로로 대체하여 프로젝트가 클라이언트 측 라우팅을 사용하거나 루트가 아닌 URL에서.. 2024. 1. 31. styled-component 이번에 개인 프로젝트를 진행하면서 styled-component 를 제대로 써보게 되었다. 설치 npm install styled-component npm 또는 yarn으로 설치 가능한데 나는 npm 으로 설치하였다. 설치하면 package.json 에 버전 등의 정보가 추가된다. 문법 기본적인 문법은 다음과 같다. styled-components 를 import 하고 아래에 ``(템플릿 리터럴)을 사용하여 스타일을 작성한다. //기본 문법 export const 컴포넌트명 = styled.태그명` //css 작성 ` [예시] import styled from "styled-components"; export const FormContainer = styled.form` margin: 20px auto;.. 2024. 1. 30. useContext props로 부모 컴포넌트에서 자식 컴포넌트로 계속 내려주게 되면 중간에 내려주기 위해서만 props를 받게 되는 컴포넌트들이 생긴다. 부모 -> 자식 -> 자식 -> 자식 -> props 가 정말 필요한 자식 그리고 하위로 계속 내려줘야 하기 때문에 prop drilling 이 생긴다. 그래서 필요한 것이 context API 의 useContext hook이다. useContext를 사용하면 전역 데이터를 관리할 수 있고, 중간에 있는 컴포넌트에게 값을 넘겨주지 않아도 된다. context 생성 src/context 폴더를 만든 후 ThemeContext.js 파일을 만든다. createContext import createContext(초깃값); 으로 생성한다. import { createConte.. 2024. 1. 29. react 최적화 React.memo / useCallback / useMemo 리액트에서 렌더링이 자주 일어나는 것은 좋은 상황이 아니다. 렌더링은 필요할 때만 되어야 한다. 최적화 작업을 통해 개선할 수 있다. 최적화 방법 React.memo : 컴포넌트 useCallback : 인자로 들어오는 함수 useMemo : value(함수 리턴값 또는 값 그 자체) memo (React.memo) 컴포넌트를 메모리에 저장한다. React.memo(컴포넌트명, 비교함수) React.memo는 얕은 비교를 수행한다. 만약 다른 비교를 원한다면 두 번째 인자에 비교함수를 넣어주면 된다. React.memo로 컴포넌트를 감싸면 컴포넌트를 메모리에 저장한다. (memoization) 렌더링 시에 값이 변경되었는지 확인할 때 변경이 없을 경우 메모리에 저장된 값을 재사용한다. 재사용하기 때문에 .. 2024. 1. 26. 이전 1 ··· 5 6 7 8 9 10 11 12 다음
