전체 글

현재 3개월 차, 느낀 점은.. 역시 강의를 보는 것, 책을 보는 것과 달리 내 손으로 직접 코드를 많이 쳐봐야 한다는 사실을 여전히 뼈저리게 느끼고 있다. 내 머리 속에는 이해가 되었지만, 이거를 코드로 입력 혹은 프로젝트를 진행하게 된다면 과연 내가 배운 내용들을 바로 적용 시킬 수 있을까? 라는 생각이 문득 든다...그래서 이번 강의를 들으면서 1주일에 한 번 투두리스트 혹은 2~3일에 한 번 조그만한 프로젝트를 만들어봐야겠다는 생각이 들었다. 배우는 것도 중요하지만 머리 깨지도록 해보는 것도 중요하다!이번 일요일에는 강의와 조금만한 프로젝트를 진행하고, 다음 주 부터는 내가 계획했던 것들을 진행 해봐야겠다.나태를 이겨내자.

1. React Router 의 개념Router에는 여러 종류가 있다. BrowserRouter : 브라우저의 history API를 사용, URL이 깔끔하게 유지HashRouter : URL에 #를 포함, 서버 설정이 필요 없지만 SEO에 불리함MemoryRouter : 메모리에서 라우팅 정보를 유지. 브라우저 히스토리를 사용하지 않는 환경(테스트용 등) 적합1-1. 라우트의 정의path 와 렌더링할 컴포넌트를 정의중첩 라우트를 부모 - 자식 관계 정리import { createBrowserRouter } from 'react-router-dom';const router = createBrowserRouter([ { path: '/', element: , children: [ ..

1. useMemouseMemo는 메모이제이션하여 불필요한 계산을 방지하는 React Hook이다. 즉, 특정 값이 변경되지 않으면 기존 계산 결과를 재사용하도록 하는 기능이라고 볼 수 있다.주요 목적은 무거운 계산이나, 렌더링 중 반복적으로 실행되는 연사을 최소화하여 성능을 향상시키는 것이다.import React, { useMemo } from 'react';const memoizedValue = React.useMemo(() => computeExpensiveValue(a, b), [a, b]);import로 useMemo를 가져온다. useMemo(() => {계산식}, [의존성])첫 번째 인자: 함수 -> 계산할 코드를 함수로 작성두 번째 인자: 의존성 배열 -> 배열 안의 값이 변경될 때만 첫..

1. useState단순한 상태 관리에 적합하다.상태를 업데이트하기 위해 새로운 상태값을 직접 설정상태의 형태가 단순(숫자, 문자열, boolean 등)하거나 관리 로직이 복잡하지 않은 경우 사용const [state, setState] = useState(initialValue); 장점간단한 상태를 관리할 수 있다.함수형 업데이트(setState(prev) => newValue)로 이전 상태를 기반으로 업데이트 가능import React, { useState } from 'react';function Counter() { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>..

1. strictModeReact의 StrictMode는 애플리케이션에서 잠재적인 문제를 발견하기 위한 도구이다. 개발 모드에서만 활성화가 된다. 코드 작성을 하다보고 콘솔을 해보면 두번 실행이 되는 경우가 많다. 이제 이렇게 발생되는 조건을 알아보자.안전하지 않은 생명주기 메서드 예: componentWillMount, componentWillReceiveProps와 같은 메서드이다. 근데 이는 React 16이후로 사용이 권장되지 않는다. 그 이유는 클라스 컴포넌트가 아니라 함수형 컴포넌트를 많이 사용하기 때문이다.Deprecated API 감지오래된 API 사용을 경고한다.부작용 검사React 18부터 StrictMode는 개발모드에서 부작용을 감지하기 위해 헨더링을 두 번 실행한다.예를 들어, 함..

1. cleanup 함수란?useEffect에서 반환된 함수는 클린업 함수로, 다음과 같은 상황에서 호출된다.1. 컴포넌트가 언마운트 될 때컴포넌트가 DOM에서 제거되기 전에 정리 작업이 필요하다예: 타이머, 이벤트 리스너, 네트워크 요청 취소 등2. useEffect 가 재실행되기 직전의존성 배열 값이 변경될 때, 새 작업을 실행하기 전에 기존 작업을 정리한다.예제 코드 useEffect(() => { console.log(step, 'setup 함수 호출'); const timer = setInterval(() => { console.log(step, new Date()); }, 1000); return () => { console.log(step, 'clea..