본문 바로가기

Front-End94

커스텀 훅 커스텀 훅을 통해 관심사를 분리 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.
Styled-components 설치 npm install styled-components https://styled-components.com/docs/ 기본적인 사용 방법 1. const 컴포넌트명 = styled.css선택자`` `` : 백틱. 주의: 값을 집어넣을 때 따옴표를 작성하지 않는다. import styled from "styled-components"; export default function App() { const SimpleButton = styled.button` color: red; `; return ( Simple ); } 2. 만약 위에서 만든 button 컴포넌트에 또 다른 스타일 컴포넌트를 추가하고 싶다면. 즉 SimpleButton을 상속받은 LargeButton이라면 styled(상속할 컴포넌트).. 2023. 3. 13.
프로젝트 디렉토리 구조 생산성을 위해, 필요한 파일을 잘 찾을 수 있도록 하기 위해. 모두가 협의하고 인지한 형태라면 괜찮다. 팀원들과 작업하다보면 틀이 어느정도 잡히게 되는 것을 경험해 봄. 📁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.
Regex 헷갈리는 부분들 정리 특히나 헷갈린 점. 대괄호, 중괄호, 소괄호의 의미. 백슬래시를 왜 쓴걸까? 이메일의 경우 @또는 .이 들어가는데, 이것은 어떻게 표현하지? 딱 그 문자만 들어가는 경우? 종료할때는? 1. 괄호: [], () 그리고 {} (1) 대괄호: 그중에 하나만. [a-z]: a부터 z까지의 알파벳중 하나. [abc] 는 [a-c]와 같다. (내가 착각한 것: 하나가 아니라 다중 가능이라고 생각함) (2) 소괄호: 그룹 (3) 중괄호: 반복 횟수. 예: a{2}: a가 2번 반복 (내가 착각한 것: ab{2} ab 두자리로 끝난다고 생각함) 2. 특수문자 ^, *, +, ?, $, . (1) ^: 2가지 경우가 있음. 대괄호를 같이 쓰면 의미가 달라짐 첫번째: ^a : a로 시작됨. ^[a-z.. 2023. 3. 6.
컴포넌트 리렌더링 방지하기! 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.

티스토리툴바