사과하는 제라스

- 라우팅이란? "사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것." - 라우팅 시스템 라이브러리 종류 1) react-router 2) Next.js 3) react-location, rakkas 등등 - SPA(Single Page Application)이란? "하나의 페이지로 이루어진 애플리케이션" -> HTML을 한번만 받아와서 웹 애플리케이션을 실행시킨 후, 이후에는 필요한 데이터만 받아와서 화면에 업데이트하는 것. - 리액트 라우터 적용 및 기본 사용법 - 기본 사용법 1) 를 src/index.js 파일에서 감싸주면 됨. 2) 컴포넌트 내에 로 트리 틀을 잡음. - 타 페이지로 이동하는 Link 버튼 설정 소개 - URL 파라미터 : useParams라는 Hook을 쓰면 URL 파..

- immer 라이브러리를 설치하여 사용함. - 사용법: import produce from 'immer'; //이렇게 import해와서 사용. ... const [form, setForm] = useState({name: '', username: ''}); //아래와 같이 작성하면 됨. const func = () =>{ setForm( produce(form, draft => {draft[name] = value;}) ) } //useState의 함수형 업데이트로 쓸 수도 있음. const func = () =>{ setForm( produce(draft => {draft[name] = value;}) ) } immer 라이브러리를 쓰면 컴포넌트의 상태 업데이트가 까다로울 때 사용 시 유용함.

- useState 사용 시 useState(func()) //이러면 리렌더링될 때마다 func함수가 호출됨. useState(func) //이런 식으로 파라미터를 함수 형태로 넣어주면 컴포넌트가 처음 렌더링딜 때만 func 함수 실행함. - 느려지는 원인 분석 1. 자신이 전달받은 props가 변경될 때 2. 자신의 state가 바뀔 때 3. 부모 컴포넌트가 리렌더링될 때 4. forceUpdate 함수가 실행될 때 컴포넌트의 개수가 많은데 모두 리렌더링을 하게 되면 느려지는 이슈 발생 -> 컴포넌트 리렌더링 성능을 최적화해줘야 함. 1. React.memo를 활용 import React from 'react'; import { MdCheckBoxOutlineBlank, MdCheckBox, MdRem..

주로 쓰는 Prettier 설정 //.prettierrc { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80, } - 의 요소로 onSubmit이 있음. -> onClick으로 클릭 버튼을 둘 수도 있지만 onSubmit 이벤트의 경우 인풋에서 엔터키를 눌렀을 때도 발생하기 때문에 편리함. - Style 공부 .TodoListItem-virtualized { & + & { border-top: 1px solid #dee2e6; } &:nth-child(even) { background: #f8f9fa; } } .TodoListItem { padding: 1re..

1. CSS 2. Sass, Scss 3. CSS Module 4. Styled-component {...} import styled, { css } from "styled-components"; const Box = styled.div` background: ${(props) => props.color || "blue"}; -> props로 값을 전달해주어서 적용시킬 수가 있음. padding: 1rem; display: flex; width: 1024px; margin: 0 auto; @media (max-width: 1024px) { width: 768px; } @media (max-width: 768px) { width: 100%; } `; const Button = styled.button` b..

정리보단 지식 쌓기 느낌으로 정리하였다. - React.StrictMode란? useEffect를 사용한 코드에 문제가 있는지 없는지 감지하기 때문에 console.log() 코드가 두번 실행이 됨. - useEffect를 통해 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떤 작업을 수행하고 싶을 땐, useEffect에서 뒷정리(cleanup) 함수를 반환해 주어야 함. -> 렌더링될 때마다 뒷정리 함수가 계속 나타남, 뒷정리 함수가 호출될 때는 업데이트되기 직전의 값을 보여줌. 오직 언마운트될 때만 뒷정리 함수를 호출하고 싶으면 useEffect 함수의 두번째 파라미터에 []를 넣으면 됨. - 리듀서: 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션값을 전달받아 새로운 상태를 반환..

라이프사이클 메서드의 종류는 총 9가지이다. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드 카테고리는 총 3가지로 나뉨 1. 마운트 2. 업데이트 3. 언마운트 마운트 : DOM이 생성되고 웹 브라우저 상에 나타나는 것. 컴포넌트 만들기 -> constructor -> getDerivedStateFromProps -> render -> componentDidMount 업데이트 : props가 바뀔 때 / state가 바뀔 때 / 부모 컴포넌트가 리렌더링될 때 / this. forceUpdate로 강제로 렌더링을 트리거할 때 업데이트를 발생시키는 요인(ex. props변경, state 변경, 부모 컴포넌트 ..

map() 함수란? : 반복되는 컴포넌트를 렌더링할 수 있는 것. arr.map(callback, [thisArg]) - callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 currentValue, index, array가 있음. - thisArg: 선택적으로 쓸 수 있는 항목으로, callback 함수 내부에서 사용할 this 레퍼런스임. 상태 안에서 배열을 변형할 때는 배열에 직접 접근하여 수정하는 것이 아니라 concat, filter 등 내장 함수를 사용하여 새로운 배열을 만든 후 이를 새로운 상태로 설정해 주어야 함.