1. 서버 State와 상태 관리 라이브러리 서버의 데이터를 클라이언트에서 State로 관리하게 되면 어색한 느낌을 받게 되는 상황이 옴. 게시글 작성: POST 요청으로 데이터 보냄 게시글 목록: GET 요청으로 데이터 받아 옴 게시글 추천, 좋아요 등의 State를 클라이언트에 저장해두면 Optimistic Update를 구현할 수 있는 장점이 있지만, 게시글 작성 후 본문 내용을 클라이언트 State에 저장하는 상황에서는 어차피 게시글 페이지로 리다이렉트해 서버에서 데이터를 받아오기 때문에 그러한 작업이 무척 어색하고 무의미하게 됨. 서버 State와 클라이언트 State의 성격이 다르기 때문에 이러한 상황이 발생하는데, 서버 State의 성격에 맞는 상태 관리 라이브러리에는 대표적으로 React-..
1. 이벤트 위임(Event Delegation) 이벤트 위임에는 이벤트 버블링(Bubbling), 이벤트 캡처링(Capturing)이 있음. React에서는 Javascript에서와 동일하게 이벤트 버블링(Bubbling)이 이벤트 위임의 기본값. function Node5() { return ( console.log("5번")}>5번 노드 ); } function App() { return ( console.log("1번")}> ); } App 컴포넌트의 가장 바깥 div 요소와 그 안의 Node5 컴포넌트에 클릭 이벤트 핸들러를 부착했을 때, Node5 컴포넌트 내부를 클릭하면 Node5 → App의 순서로 이벤트 핸들러가 실행됨을 알 수 있음. A. 컴포넌트에서 이벤트 캡처링 사용하기 # Reac..
1. 비동기 로직 다루기: createAsyncThunk #import { createAsyncThunk } from '@reduxjs/toolkit';export const fetchSearchResults = createAsyncThunk( 'search/setResults', async (payload, thunkAPI) => { /* 비동기 로직 */ });createAsyncThunk()는 type, payloadCreator 두 개의 argument를 받음. ① type: 비동기 Action을 만드는 데 사용할 문자열로, Slice Reducer의 이름 A, Reducer의 이름으로 사용할 B에 대해 "A/B" 형태의 문자열로 작성해주면 됨. 이때, B는 Slice Re..
1. useSelector()로 Derived State를 얻고자 할 때 #useSelector compares its results using strict === reference comparisons, so the component will re-render any time the selector result is a new reference! This means that if you create a new reference in your selector and return it, your component could re-render every time an action has been dispatched, even if the data really isn't different.useSelect()..
1. 네트워크 요청 보내기 Axios 인스턴스는 다음과 같이 세 개의 parameter를 가짐 ① URL: 요청을 보낼 URL ② Body: HTTP 요청 Body(JSON 형식으로 변환할 필요가 없음) ③ Configs: Axios 옵션 # const reqBody = { username: "kim", title: "테스트", body: "111" }; const res = axios.post('/posts', reqBody, { baseURL: 'https://www.ex.com/api/v1', // 요청을 보낼 baseURL: url이 절대경로가 아닐 때 사용됨 headers: { // HTTP 요청 헤더 Authorization: 'Bearer e435#e43' // A. HTTP Bearer 인..
사진과 같이 Viewport의 크기에 따라 컴포넌트의 크기를 변경하려면 어떻게 해야 할까? 단순히 컴포넌트의 크기만 변경하는 것이라면 CSS를 이용하는 것이 좋지만, SearchBar 컴포넌트의 크기에 맞춰 Modal 컴포넌트의 크기가 같이 달라져야 하므로 Styled-Components를 이용해 Modal 컴포넌트의 너비를 동적으로 바꿔줘야 함. 하지만, SearchBar와 Modal은 별개의 컴포넌트이기 때문에 Context API를 사용하는 등의 방법이 필요함. 1. Resize 이벤트 A. 크기 변경 Viewport에 따라 변경되는 SearchBar 컴포넌트의 너비가 State여야 하므로 DOM의 resize 이벤트를 이용해 SearchBar의 너비를 가져와야 함. resize 이벤트는 windo..
import thunkMiddleware from 'redux-thunk' const middlewareEnhancer = applyMiddleware(thunkMiddleware); export default const store = createStore(rootReducer, middlewareEnhancer); Thunk 미들웨어(thunkMiddleware)는 위와 같이 Redux Store에 마운트할 수 있는데, 그 첫 과정으로 thunkMiddleware는 아래와 같은 함수에서 반환됨. 1. redux-thunk에서의 thunkMiddleware # // 'redux-thunk' index.js function createThunkMiddleware(extraArgument) { const m..
1. React에서 이미지를 불러오기 React에서 네트워크 요청으로 이미지를 받아 화면에 나타내고자 할 때, 아래처럼 src에 직접 링크를 넣어 불러오도록 할 수 있음. const Image = () => { return ( ); } 이미지 용량이 크지 않을 경우, 이 방법도 문제가 없지만 이미지의 용량이 커지면 아래 사진처럼 이미지가 로드될 때까지 사용자는 빈 화면이나 잘린 이미지만 보게 되어 바람직하지 않음. 이미지를 보여주는 컴포넌트가 App 컴포넌트 등 첫화면에 바로 보이는 컴포넌트라면 로딩 컴포넌트를 이용하는 방법이 있지만, Image 컴포넌트처럼 그것의 하위 컴포넌트라면 첫 화면에서 로딩, Image 컴포넌트를 렌더링하고 로딩하는 워터폴 문제가 발생함. 현재 Image 컴포넌트는 에 src ..
네트워크 요청을 처리하다 보면 이전 요청과 현재 요청 간에 경쟁 상태(Race Condition)가 발생해 예상치 못한 버그가 발생하기도 함. 예를 들어, 사용자가 A 요청을 보냈다가 A 요청에 대한 응답이 처리되기 전에 B 요청을 보내는 경우를 생각해볼 수 있음. 만약, B 요청에 대한 응답이 먼저 도착해 UI에 반영되고 나서 A 응답이 도착한다면 어떻게 될까? 앱에 이러한 경쟁 상태를 처리하는 로직이 없다면 A 응답으로 UI가 다시 교체되는 버그가 발생함. 이러한 문제를 해결하기 위한 방법이 있는데... 1. useEffect에서 변수 선언하기 useEffect() 내부에 didCancel이라는 변수를 하나 선언함. 이 변수는 네트워크 요청이 실행될 때마다 false로 초기화되고, 네트워크 응답이 도..
JavaScript/React 2022. 9. 7. 21:33
1. 서버 State와 상태 관리 라이브러리 서버의 데이터를 클라이언트에서 State로 관리하게 되면 어색한 느낌을 받게 되는 상황이 옴. 게시글 작성: POST 요청으로 데이터 보냄 게시글 목록: GET 요청으로 데이터 받아 옴 게시글 추천, 좋아요 등의 State를 클라이언트에 저장해두면 Optimistic Update를 구현할 수 있는 장점이 있지만, 게시글 작성 후 본문 내용을 클라이언트 State에 저장하는 상황에서는 어차피 게시글 페이지로 리다이렉트해 서버에서 데이터를 받아오기 때문에 그러한 작업이 무척 어색하고 무의미하게 됨. 서버 State와 클라이언트 State의 성격이 다르기 때문에 이러한 상황이 발생하는데, 서버 State의 성격에 맞는 상태 관리 라이브러리에는 대표적으로 React-..
JavaScript/React 2022. 9. 2. 16:08
1. 이벤트 위임(Event Delegation) 이벤트 위임에는 이벤트 버블링(Bubbling), 이벤트 캡처링(Capturing)이 있음. React에서는 Javascript에서와 동일하게 이벤트 버블링(Bubbling)이 이벤트 위임의 기본값. function Node5() { return ( console.log("5번")}>5번 노드 ); } function App() { return ( console.log("1번")}> ); } App 컴포넌트의 가장 바깥 div 요소와 그 안의 Node5 컴포넌트에 클릭 이벤트 핸들러를 부착했을 때, Node5 컴포넌트 내부를 클릭하면 Node5 → App의 순서로 이벤트 핸들러가 실행됨을 알 수 있음. A. 컴포넌트에서 이벤트 캡처링 사용하기 # Reac..
JavaScript/Redux 2022. 9. 1. 22:44
1. 비동기 로직 다루기: createAsyncThunk #import { createAsyncThunk } from '@reduxjs/toolkit';export const fetchSearchResults = createAsyncThunk( 'search/setResults', async (payload, thunkAPI) => { /* 비동기 로직 */ });createAsyncThunk()는 type, payloadCreator 두 개의 argument를 받음. ① type: 비동기 Action을 만드는 데 사용할 문자열로, Slice Reducer의 이름 A, Reducer의 이름으로 사용할 B에 대해 "A/B" 형태의 문자열로 작성해주면 됨. 이때, B는 Slice Re..
JavaScript/Redux 2022. 9. 1. 22:33
1. useSelector()로 Derived State를 얻고자 할 때 #useSelector compares its results using strict === reference comparisons, so the component will re-render any time the selector result is a new reference! This means that if you create a new reference in your selector and return it, your component could re-render every time an action has been dispatched, even if the data really isn't different.useSelect()..
JavaScript/기타 라이브러리 2022. 8. 31. 13:41
1. 네트워크 요청 보내기 Axios 인스턴스는 다음과 같이 세 개의 parameter를 가짐 ① URL: 요청을 보낼 URL ② Body: HTTP 요청 Body(JSON 형식으로 변환할 필요가 없음) ③ Configs: Axios 옵션 # const reqBody = { username: "kim", title: "테스트", body: "111" }; const res = axios.post('/posts', reqBody, { baseURL: 'https://www.ex.com/api/v1', // 요청을 보낼 baseURL: url이 절대경로가 아닐 때 사용됨 headers: { // HTTP 요청 헤더 Authorization: 'Bearer e435#e43' // A. HTTP Bearer 인..
JavaScript/React 2022. 8. 25. 09:16
사진과 같이 Viewport의 크기에 따라 컴포넌트의 크기를 변경하려면 어떻게 해야 할까? 단순히 컴포넌트의 크기만 변경하는 것이라면 CSS를 이용하는 것이 좋지만, SearchBar 컴포넌트의 크기에 맞춰 Modal 컴포넌트의 크기가 같이 달라져야 하므로 Styled-Components를 이용해 Modal 컴포넌트의 너비를 동적으로 바꿔줘야 함. 하지만, SearchBar와 Modal은 별개의 컴포넌트이기 때문에 Context API를 사용하는 등의 방법이 필요함. 1. Resize 이벤트 A. 크기 변경 Viewport에 따라 변경되는 SearchBar 컴포넌트의 너비가 State여야 하므로 DOM의 resize 이벤트를 이용해 SearchBar의 너비를 가져와야 함. resize 이벤트는 windo..
JavaScript/Redux 2022. 8. 20. 20:13
import thunkMiddleware from 'redux-thunk' const middlewareEnhancer = applyMiddleware(thunkMiddleware); export default const store = createStore(rootReducer, middlewareEnhancer); Thunk 미들웨어(thunkMiddleware)는 위와 같이 Redux Store에 마운트할 수 있는데, 그 첫 과정으로 thunkMiddleware는 아래와 같은 함수에서 반환됨. 1. redux-thunk에서의 thunkMiddleware # // 'redux-thunk' index.js function createThunkMiddleware(extraArgument) { const m..
JavaScript/React 2022. 8. 13. 21:51
1. React에서 이미지를 불러오기 React에서 네트워크 요청으로 이미지를 받아 화면에 나타내고자 할 때, 아래처럼 src에 직접 링크를 넣어 불러오도록 할 수 있음. const Image = () => { return ( ); } 이미지 용량이 크지 않을 경우, 이 방법도 문제가 없지만 이미지의 용량이 커지면 아래 사진처럼 이미지가 로드될 때까지 사용자는 빈 화면이나 잘린 이미지만 보게 되어 바람직하지 않음. 이미지를 보여주는 컴포넌트가 App 컴포넌트 등 첫화면에 바로 보이는 컴포넌트라면 로딩 컴포넌트를 이용하는 방법이 있지만, Image 컴포넌트처럼 그것의 하위 컴포넌트라면 첫 화면에서 로딩, Image 컴포넌트를 렌더링하고 로딩하는 워터폴 문제가 발생함. 현재 Image 컴포넌트는 에 src ..
JavaScript/React 2022. 8. 13. 16:34
네트워크 요청을 처리하다 보면 이전 요청과 현재 요청 간에 경쟁 상태(Race Condition)가 발생해 예상치 못한 버그가 발생하기도 함. 예를 들어, 사용자가 A 요청을 보냈다가 A 요청에 대한 응답이 처리되기 전에 B 요청을 보내는 경우를 생각해볼 수 있음. 만약, B 요청에 대한 응답이 먼저 도착해 UI에 반영되고 나서 A 응답이 도착한다면 어떻게 될까? 앱에 이러한 경쟁 상태를 처리하는 로직이 없다면 A 응답으로 UI가 다시 교체되는 버그가 발생함. 이러한 문제를 해결하기 위한 방법이 있는데... 1. useEffect에서 변수 선언하기 useEffect() 내부에 didCancel이라는 변수를 하나 선언함. 이 변수는 네트워크 요청이 실행될 때마다 false로 초기화되고, 네트워크 응답이 도..
JavaScript/React 2022. 8. 9. 17:35
1. Referential Equality React에서는 Referential Equality Check(Object.is())를 이용해 State, Props 변경을 감지함. State가 원시 자료형이면 State를 덮어씌워 변경해도 문제가 없지만, 배열/객체 등 참조 자료형이라면 해당 속성의 주소값이 바뀌지 않기 때문에 React에서는 State, Props가 변경되지 않았다고 판단할 수 있음. const obj1 = { p1: { innerP: 0 }, p2: 1 }; const obj2 = { ...obj1 }; const obj3 = { p1: { innerP: 0 }, p2: 1 }; console.log(Object.is(obj2, obj1)); // false: 두 객체 다르므로 렌더링 ..