본문 바로가기

React20

[React] useReducer를 사용하면, dispatch 후, 로직 순서 보장이 안 된다.

useReducer를 사용하면, dispatch 후, 로직 순서 보장이 안 된다. 그 이유. useReducer는 기본적으로 '비동기 로직'을 포함하는 '비동기 액션'을 dispatch 하지 않아요. 개요 context를 사용해서, app.tsx에 authContext를 추가했다. auth.tsx에 context관련 코드는 넣었다. auth.tsx에서 export로 useStateContext와 useDispatchContext란 이름으로 UI컴포넌트에서 import할 수 있게끔했다. 로그인을 요청 후, 서버로부터 유저 정보를 응답받고, 유저 정보를 context에 저장시키려고 했다. context에서는 useRouter를 사용했다. 하지만, 코드가 실행되는 타임라인은 다음과 같았다. 1. '로그인' 버.. 2023. 1. 15.

[Redux-saga]왜 그냥 제너레이터만 안 쓰고, 사가로 제너레이터 처리를 해야하는가?

2022. 11. 7.

[Redux + Redux saga] 리덕스와 리덕스 사가는 뭔가? 왜 쓰는가?

Redux 정의 왜 사용함? 리덕스의 기능을 확장할 때는 middleware를 사용한다. 리덕스의 액션 요청 사이사이에 비동기 요청이 들어가게 한다. 어떻게 사용함? Redux-saga 정의 왜 사용함? 리덕스는 동기로만 처리가 일어난다. 리덕스를 비동기로 처리하는 방법은 thunk라는 redux toolkit과 observable이 있지만,Redux saga로도 비동기 처리를 구현할 수 있다. redux thunk는 쉽다. 대신 기능이 부족하다. 편하다. 실무에서는 redux saga를 쓴다. redux에 middleware로 redux-saga를 넣어서 비동기 동작을 하게 한다. redux-saga는 타입스크립트 친화적이지 않다. 어떻게 사용함? 제너레이터: 함수 실행을 중간에 멈출 수 있다. 원할 .. 2022. 11. 2.

[testing-library] 인풋필트 빈 값으로 만들기

인풋필드 빈 값으로 만들고 싶으면, clear를 사용하라. clear는 user-event 13버전부터 지원한다. // ❌ userEvent.type(input, ''); // ✅ userEvent.clear(input); 문서: https://testing-library.com/docs/ecosystem-user-event/#clearelement 2022. 10. 29.

[React] 모르는 것

display: inlin-block? display의 default는? rgb와 rgba의 차이는? transform: rotateX(180deg)는 어떤 동작을 일으키는가? react의 각 컴포넌트는 property와 state에 대해 unit test를 가지고 있어야 한다. 구현 주도 테스트 - 컴포넌트 동작과 실제 React에서 해당 컴포넌트의 마크업을 어떻게 만들어내는지를 테스트 행위 주도 테스트 - 사용자에게 어떤 컨텐츠가 보이고, 어떤 이벤트가 발생했을 때, 화면에서 일어나는 변화를 테스트. 해당 분야는 testing-library-react를 사용해서 구현한다. lint-staged? - 저장소 코드 품질을 지키는 데 좋음. husky - npm 환경에서 git hook을 전문으로 다루는 .. 2022. 10. 14.

[redux] redux는 비동기 처리를 어떻게 하고 있을까?

redux는 순수함수가 컨셉이다. 순수함수란, 똑같은 입력이면 반드시 똑같은 응답이 나와야 한다는 것이다. 서버로부터 데이터를 받는 처리는 순수하지 않은 함수이다. 네트워크가 끊길 수 있고, 서버의 상황에 따라서 똑같은 입력에 모두 동일한 응답을 넘겨준다는 보장이 없기 때문이다. 그래서, redux는 내부적인 로직으로 이런 비동기 처리를 하는 함수를 제공하지 않는다. 별도의 미들웨어로 비동기를 동기적으로 처리하고 있다. 이런 비동기적인 처리방식이 순수함수가 컨셉인 redux와는 맞지 않는데, 이를 어떻게 사용할 수 있을까? 2022. 8. 13.

[React] 왜 컴포넌트에서는 React를 호출하는가

import React from 'react'; // ... 리엑트 함수 컴포넌트를 만들면, 항상 React를 임포트해줘야 합니다. 그 이유는 runtime에 빌드된 파일 안에서 React.createElement를 찾지 못하는 오류가 발생하기 때문임. 2022. 7. 9.

[React] 하위 컴포넌트에서 상위컴포넌트로 이벤트 전달 방법

리액트에서 하위 컴포넌트가 상위 컴포넌트의 함수를 실행하는 방법 상위 컴포넌트 export default function 상위 컴포넌트() { const [isEditMode, setIsEditMode] = useState(false); function closeEditMode() { setIsEditMode(false); } return ( ) } 하위 컴포넌트 export default function 하위컴포넌트({ closeEdit }) { async function editTweet(event) { event.preventDefault(); try { 서버로 무언가 submit closeEdit(); 👈 이 부분이 상위 컴포넌트의 함수를 실행시킴 } catch (error) { alert(err.. 2022. 7. 6.

[React] 버튼에 클릭 이벤트 함수 설정하기

onClick useState 사용방법 아래 코드 처럼 작성하면 바로 저 버튼이 화면에 렌더링되는 순간 함수가 실행된다. 클릭하지 않아도 말이다. 수정 취소 해결방법 괄호 빼고 넣어줘야, 클릭 후에 함수가 호출하게 할 수 있다. 수정 취소 2022. 7. 5.

[React] 렌더링이 두 번 발생하는 이슈

이슈 현상 같은 컴포넌트가 렌더링이 두 번씩 실행됨. 그래서, UseEffect 훅으로 렌더링 때마다 호출하게 되어있는 API가 두 번씩 호출됨. 원인 npx-create-react-app 으로 생성하면 기본적으로 달려있는 설정인 때문임. // ./src/index.js import React from "react"; import ReactDOM from "react-dom/client"; import "./static/index.css"; import App from "./components/App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); 해결방법 // ./src/index.js import .. 2022. 6. 28.