SimCoding

[React] shortid를 사용해 랜덤한 key값 만들기 안녕하세요. 이번 포스팅에서는 shortid 라이브러리를 사용해 랜덤한 key값을 만드는 방법에 대해 알아보겠습니다. React에서는 배열을 순환하며 중복된 컴포넌트를 만들때, 필수적으로 고유의 키값을 입력해주어야 합니다. 하지만 매번 고유한 키값을 만들기란 쉽지 않죠.. 그렇다면 ! Q .인덱스를 키값으로 사용하면 되지 않나요 ? 리액트 공식문서에서는, 항목의 순서가 바뀔 수 있는 경우 Key값으로 인덱스를 사용하지 않는 것을 권장하고 있습니다. 이에 대한 자세한 내용을 확인하고 싶으시다면, 공식문서를 참고해주세요 ! Q. 그렇다면 고유한 키 값을 만들기 위해서는 어떻게 해야 할까요 ? 백엔드 서버에서 데이터를 넘겨 받을 경우에는, 데이터의 ..

[React] pagination Component 만들기 [ App.jsx ] // state변수 설정 const [currPage, setCurrPage] = useState(0); [ Pagination.jsx ] - 페이지리스트 배열 만들기. const MAX_PAGE_COUNT = 10; // MAX_PAGE_COUNT -> 한번에 보여지는 페이지 수, let resultList = []; function getPaginationArray(currPage, pageCount) { // 1, 11, 21 ... 페이지가 선택될 때 , // 1~10, 11~20, 21~30 ... 리스트 생성 if ((currPage + 1) % MAX_PAGE_COUNT === 1) { let idx = 1; r..

[React] Redux-saga , react infinite scroll 구현하기 코드예시 안녕하세요. 이번포스팅에서는 리액트에서, 리덕스사가를 활용해 무한스크롤을 구현하는 방법에 대해 포스팅 하려고합니다. 예시코드를 통해, 이런식으로 구현할 수 있구나 정도로 원리만 파악하시고, 직접 구현하실 때는 , 본인의 코드 스타일에 맞게 구현 하시면 될 것 같아요 ! @ 컴포넌트 코드 // index.js const Home = () => { const dispatch = useDispatch(); const { me } = useSelector((state) => state.user); const { mainPosts, hasMorePosts, loadPostsLoading } = useSelector((s..

[React] 전역 스타일링 - createGlobalStyle 안녕하세요. 이번 포스팅에서는 Styled-Components에서 제공하는 함수인 createGlobalStyle 함수에 대해 알아보겠습니다. 리액트에서, - 전역적으로 CSS를 사용하고 싶을 경우, - 기존 CSS를 덮어쓰고 싶을 경우 ( 컴포넌트 자식Class의 CSS 변경할 때 등 ) createGlobalStyle을 사용해서 전역적 스타일링, CSS덮어씌우기 등의 작업을 할 수 있습니다. 예시 코드를 통해 사용방법을 알아봅시다. 예시 코드에서는 createGlobalStyle을 사용해서, Slick컴포넌트의 자식Class인 slick-slide의 CSS를 덮어 씌어주고 있습니다. import Slick from "react-slick..

[REACT] input[type="file"] 디자인 커스텀 하는 방법 , 파일이나 이미지를 업로드 하기 위해서 을 사용해야한다. 하지만 의 경우, 기본디자인이 정해져 있고 직접적으로 커스텀을 할 수 없다. 그렇다고 아이에 방법이 없는 것은 아니다. 직접적으로 커스텀 할 수는 없지만, 약간의 편법을 사용해서 간접적으로 디자인을 한 것처럼 보이게 할 수 있다. 과정은 다음과 같다. 1) input 태그를 안보이게 숨긴다. 2) 버튼으로 사용할 태그를 하나 만든다. 3) 버튼을 클릭 했을 때, input태그에 클릭 이벤트를 발생시킨다. 4) 버튼 디자인을 커스텀 해준다. 이게 무슨 말인지 코드를 통해 좀 더 자세히 알아보자. import React, { useRef } from "react"; const ..

NEXTJS 환경 REDUX 초기셋팅 코드예시 Redux 관련 라이브러리 설치. npm i next-redux-wrapper redux react-redux redux-devtools-extension 초기상태 및 리듀서 설정 // reducers/index.js import { HYDRATE } from "next-redux-wrapper"; const initialState = { user: {}, post: {}, }; const rootReducer = (state = initialState, action) => { switch (action.type) { case HYDRATE: console.log("HYDRATE", action); return { ...state, ...action.payl..

리액트 Customhooks 만들어서 반복되는 코드 줄이기. 커스텀 hook을 만들어서 반복되는 코드를 줄여줄 수 있다. 훅을 사용하지 않는다면 보통 Input의 onChange이벤트를 관리하기 위해 아래와 같이 코드를 작성 할 것이다. const [password, setPassword] = useState('') const onChangePassword = useCallback((e) => { setPassword(e.target.value); }, []); const [id, setId] = useState('') const onChangePassword = useCallback((e) => { setId(e.target.value); }, []); const [name, setName] = use..

* useCallback 하는일 > 함수를 memoization한다. > 의존값이 바뀌었을 때만 함수를 생성하고, 값이 바뀌지 않았다면 함수를 생성하지 않는다. > 의존값이 바뀌지 않았을 경우, 이전에 저장해둔 함수를 사용한다. * useCallback 를 사용하는 이유와 주의점 > 사용이유 : 렌더링시에 불필요한 함수생성을 막아줌으로써, 성능을 최적화 해준다. > 주의점 : meoization과정 자체에서 리소스가 발생하므로, 부적절하게 사용할 경우 오히려 성능을 악화시킬 수 있다. * useCallback 예시코드 // const memoizedCallback = useCallback(callback(), [depth]); // 의존값을 depth에 넣어준다. const add = useCallbac..