Front-End/React.js21 useState의 setState((prev)=> !prev) useState에서 set을 할 때, setState((prev)=> !prev) 2023. 3. 14. 커스텀 훅 커스텀 훅을 통해 관심사를 분리 1. 로직을 분리한다. import { useState } from "react"; export default function App() { const [isWhite, changeMode] = useToggle(true); return ( hello-kk click! ); } function useToggle(defaultValue) { const [toggle, setToggle] = useState(defaultValue); const changeMode = () => { setToggle((prev) => !prev); }; return [toggle, changeMode]; } Hook 1. 함수 컴포넌트 또는 다른 커스텀 훅 안에서만 쓰일 수 있다. 2. 최상위.. 2023. 3. 14. 프로젝트 디렉토리 구조 생산성을 위해, 필요한 파일을 잘 찾을 수 있도록 하기 위해. 모두가 협의하고 인지한 형태라면 괜찮다. 팀원들과 작업하다보면 틀이 어느정도 잡히게 되는 것을 경험해 봄. 📁src 📁api 📁components 📁hooks 📁layout 📁pages 📁types 📄App.tsx 2023. 3. 13. ContextAPI Props Drilling 정말 정말 정말 해결하고 싶은 문제. 사용하지 않는 컴포넌트에서, 단지 전달해주기 위해 props를 다 적어줘야 하는데, 이를 피하기 위해 state를 전역적으로 관리를 하는 redux, react-query등이 있고 props drilling을 회피하기 위해 ContextAPI를 사용해 볼 수도 있다. ContextAPI는 전역적으로 관리하기 보다는 목적이 props drilling 피하기 위한 것. ContextAPI는 전달만 해주더라도 랜더링이 일어나기 때문에 랜더링 최적화를 위해서는 redux등을 이용한다고 한다. 그리고 redux, react-query 등의 패키지를 사용하기 위해서는 설치해야 하고.. 또 아직 규모가 작은 프로젝트에서 활용할 것이기 때문에 일단 Con.. 2023. 3. 13. 컴포넌트 모듈화 - Router 컴포넌트 모듈화부터 내겐 참 어려웠던 부분이 모듈화였다. 개념적으로는 이해할 수 있지만 코드에는 적용하기 쉽지 않았던 내용들. 모듈화. 코드를 분리하는 것. 한 예시로, MVC 등, 데이터와 뷰 컨트롤등 기능을 분리하는 책을 봤을 때 '이렇게 분리한 뒤 사용하는 거군!' 하는 멋진 느낌만 받고 App, index 를 어떻게 활용해야 할지 잘 몰랐던 것 같다. App 컴포넌트가 필요하지 않은 경우에는 삭제하고 대체할 수 없는걸까? 하는 생각도 해보고. 그런 고민을 하고 있었는데, 때마침 Router 컴포넌트를 따로 모듈화 하는 과정에서 관련 내용들을 찾아봤다. 문제가 발생한 부분은 react-router-dom이었다. 정확히 말하자면, 내가 router 폴더를 만들고, Router 컴포넌트를 따로 분리해서 라우팅 컴포넌트를 .. 2023. 3. 12. import 자동완성 새로 컴포넌트를 추가했을 때 import 를 다시 해야 하거나 하는 경우. 해당 컴포넌트 이름에서 ctrl + space 하게 되면 컴포넌트 선택창이 뜨고 import 부분을 확인해서 선택하면 import 부분이 자동으로 추가되거나 수정된다~~! 2023. 3. 10. 컴포넌트 리렌더링 방지하기! React.memo 벨로퍼트와 함께하는 모던 리액트: React.memo 컴포넌트의 리랜더링을 방지! export default할 때 React.memo()로 컴포넌트를 감싸주면 된다. 하지만 최적화의 경우 개선이 되는 경우에만 사용해야지 그렇지 않으면 불필요한 props 비교를 하게 된다고 한다. import React from 'react'; const CreateUser = () => { return ( ... ); }; export default React.memo(CreateUser); 함수형 업데이트? setState( user+1 ) 를 setState(user=>user+1)로 작성하는 것. 이렇게 하면 set 함수에서 최신의 user를반영하게 된다고 한다. 그래서 deps (예: useCallback( ().. 2023. 3. 6. useCallback, useMemo 활용해보기 책으로 읽었을때는 useEffect와 비슷하다는 것만 기억에 남았다. 왜 사용할까? 랜더링 관련해서 함수가 언제나 재생성 되기 때문인데, 부모 컴포넌트가 재랜더링 된다면 자식 컴포넌트에서도 재랜더링이 일어나기 때문에 자원이 낭비된다. 그렇지만 useCallback/useMemo를 사용하면 랜더링될 때 같은 함수를 cache에서 불러온다. useCallback의 경우 함수를 캐싱하고 useMemo의 경우 값을 캐싱한다. 이해했으니, 써야 하는데, 익숙하지 않기 때문에 처음부터 생각하는게 어렵다면, 코드를 짠 다음, 해당 익명 함수에 useMemo/useCallback( 함수 , [] )을 씌워주는 것으로 적용해보면 될 것 같다. 벨로퍼트와 함께하는 모던 리액트: useMemo 벨로퍼트와 함께하는 모던 리액.. 2023. 3. 6. 커스텀 Hooks 벨로퍼트와 함께하는 모던 리액트: 커스텀 Hooks 만들기 커스텀 Hooks에 관한 "첫인상" (1) 여러가지 Hooks들을 합친 함수로 모듈화가 가능(한 것 같다) (2) 자주 사용되는 로직을 모듈화 가능(예: input 관련된 state) (*궁금한 점*) 어떻게 쓰이는걸까.. onChange나 다른 함수가.. 어떻게 값을 반영하는걸까.. 1. src 폴더에 hooks 디렉터리 만들기 2. use[함수명].js (예: useInputs.js) 3. useState, useEffect, useReducer, useCallback등 Hooks를 활용하여 기능을 구현. 4. *컴포넌트에서 사용하고 싶은 값들을 반환* => 여기서는 initialForm으로 초기화를 했는데, 객체, 단일변수 모두 가능한 것 .. 2023. 3. 6. 이전 1 2 3 다음