react
-
React library with rollup invalid hook uncaught type error reading property of null(useState) npm link개발/React 2022. 12. 9. 00:47
rollup으로 만든 컴포넌트 라이브러리가 이래저래 골치 아프게 만드네요. 아직 storybook을 설정하지 않은 관계로 npm link를 사용하여 라이브러리를 테스트해야 했습니다. hook을 사용하자마자 없던 오류가 생깁니다. useState를 올바른 위치에서 문제 없이 사용했는데 invalid hook 경고가 뜹니다. useState를 읽을 수 없다는 에러도 함께입니다. 친히 공식 문서의 링크도 안내해줍니다. 관련 공식 문서. Invalid Hook Call Warning – React A JavaScript library for building user interfaces reactjs.org hook을 잘못 쓰지 않았으니 마지막 duplicate 문제입니다. 보통 npm link를 사용할 때 일어..
-
[Hooks] useState 간단 원리개발/React 2022. 9. 23. 18:39
클로저에 대해 이것저것 공부하다가 살펴봤습니다. 어느 블로그에 안내된 코드인데 뭔가 좀 이상하더라고요. 아주 살짝 수정해서 모의로 동작 가능하게 해봤습니다. useState()로 얻은 setState() 함수로 값을 저장하면 해당 컴포넌트가 리렌더링되잖아요. 이 때 컴포넌트 안에 있는 것들이 새로 만들어지고 useState(initialValue)도 호출되는데 이렇게 해서 얻는 state 값은 당연히 initialState가 아니거든요. 이 동작을 이해할 수 있는 간단한 코드입니다. 리렌더링을 재현하기 위해 useState를 수동으로 호출해줬어요. // useState.js let componentHooks = []; let currentHookIndex = 0; // How useState works ..
-
[Recoil] 공식 문서 selector(async) 예제 간단 풀이개발/React 2022. 8. 18. 00:10
공식문서에 있는 예제입니다. import {atom, selector, useRecoilState, DefaultValue} from 'recoil'; const tempFahrenheit = atom({ key: 'tempFahrenheit', default: 32, }); const tempCelcius = selector({ key: 'tempCelcius', get: ({get}) => ((get(tempFahrenheit) - 32) * 5) / 9, set: ({set}, newValue) => set( tempFahrenheit, newValue instanceof DefaultValue ? newValue : (newValue * 9) / 5 + 32, ), }); function Temp..
-
[React-router-dom] 페이지 변환 시 파라미터 반환 받기개발/React 2022. 8. 11. 20:32
useNavigate가 반환하는 함수를 통해 다른 URL로 이동할 수 있습니다. 이때 값을 전달할 수 있는데요. const navigate = useNavigate(); ... navigate('/someURL', {state: data}); // state를 키로 가져야 합니다. someURL 페이지에서는 데이터를 useLocation으로 받을 수 있습니다. 공식문서에는 useLocation 훅 설명이 불친절합니다. side effect를 수행할 때 사용하라고 되어 있는 정도입니다. 어쨌든 받아서 출력해봅시다. import { useLocation } from 'react-router-dom'; const Content = () => { const locate = useLocation(); consol..
-
[ESLint] React 사용을 위한 기본적인 설정하기개발/React 2022. 8. 10. 22:51
바닐라 자바스크립트 개발환경 구성에 추가적으로 더해야 할 것이 있습니다. CRA로 리액트 앱을 구성하면 eslint, prettier가 자동으로 설치되므로 따로 의존성을 추가하지 않아도 되지만 특정 버전이 필요하다면 그에 맞게 별도로 설치해줍니다. eslint는 기본적으로 jsx를 알지 못하므로 오류로 인식합니다. 이를 해결하기 위해서는 parserOptions에 ecmaFeatures.jsx 프로퍼티에 true를 설정합니다. parserOptions: { ecmaVersion: 'latest', sourceType: 'module', ecmaFeatures: { jsx: true, }, } jsx 오류는 사라졌지만 새로운 오류가 등장합니다. Map 컴포넌트를 가져와 사용했는데도 no-unused-var..
-
[Redux] 아주 아주 간단한 redux-saga 기본개발/React 2022. 7. 11. 20:03
redux-saga는 generator 기능을 이용해서 만들어졌습니다. 간단하게만 알아볼게요. 제너레이터 생성 함수를 만들 때 function*을 이용합니다. yield를 만나면 흐름이 멈추고, yield를 통해 반환되는 값은 제너레이터 함수에서 next()로 얻게 됩니다. mdn 참고 코드로 동작 방식을 확인해봅시다. function* gen() { yield 1; yield 2; yield 3; } const generator = gen(); 초기 상태는 suspended 입니다. 첫 next 함수은 제너레이터의 시작입니다. generator.next(); yield로 반환되는 값이 value입니다. yield 1에 실행제어가 걸려 있는 상태고 next()를 호출할 때마다 다음 yield에 걸립니다...
-
[Proxy error] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options.allowedHosts[0] should be a non-empty string.개발/React 2022. 7. 11. 16:19
이 문제를 겪은 사람들이 꽤 있는데요. 어떤 사람은 유선랜에서 와이파이로 바꾸니까 해결됐다고도 합니다. 정확한 이유는 모르겠어요. 예전엔 비교적 간단하게 package.json에 "proxy": "http://localhost:4000" 이런 식으로 넣어주면 프록시가 잘 됐었던 것 같습니다. 최상위 디렉토리에 .env 파일을 만들어 DANGEROUSLY_DISABLE_HOST_CHECK=true를 넣거나 개발서버 실행하는 스크립트 앞에 넣어줘도 동작은 합니다만, 호스트 체크 자체를 안 하겠다고 하는 거라 찝찝합니다. http-proxy-middleware를 이용해봅시다. 출처:https://github.com/facebook/create-react-app/issues/12304 src 폴더에 setupP..
-
[Redux] 아주 아주 간단한 리덕스 기본 개념 2개발/React 2022. 7. 8. 14:46
리액트에서 사용하기 위한 기본 준비를 해봅시다. Ducks 패턴이란 걸 사용할 겁니다. 아주 간단한 패턴이에요. https://github.com/erikras/ducks-modular-redux 액션 타입, 액션 생성 함수, 리듀서를 각각의 파일로 분리하지 않고 파일 하나에 모아 모듈화하는 걸 말합니다. 이 패턴에서는 그렇게 모아둔 파일을 모듈이라고 해요. 자세한 설명은 위의 주소에서 확인할 수 있습니다. 덕스 패턴엔 규칙 몇 가지가 있습니다. 1. MUST 리듀서 함수는 export default로 내보낼 것 2. MUST 액션 생성 함수를 export 할 것 3. MUST 액션 타입은 reducer/ACTION_TYPE의 형식을 취할 것 4. MAY 액션 타입은 UPPER_SNAKE_CASE를 사용..