leebaek

■ useNavigate란 ?■ 기본 사용법■ 예시코드 안녕하세요. 🫤오늘은 react-router-dom의 useNavigate Hook 사용법에 대해 포스팅하려고 합니다. react-router-dom 설치 및 기본 사용법은 아래 포스팅을 참고해주시면 됩니다.https://leebaek.tistory.com/154 [React] react-router-dom에 대해 알아보자 - 화면 전환■ react-router-dom 설치 방법■ 기본 사용법 안녕하세요. 🫤오늘은 react-router-dom의 사용법에 대해 포스팅하려고 합니다. React는 SPA(Single Page Application)이기 때문에 새로고침 없이 페이지를 전환하leebaek.tistory.com■ useNavigate란 ?..

■ react-router-dom 설치 방법■ 기본 사용법 안녕하세요. 🫤오늘은 react-router-dom의 사용법에 대해 포스팅하려고 합니다. React는 SPA(Single Page Application)이기 때문에 새로고침 없이 페이지를 전환하려면 라우팅 라이브러리가 필요합니다. 그 역할을 하는 것이 바로 react-router-dom입니다 !!  이번 글에서는 간단하게 페이지를 이동하는 방법에 대해 알아보겠습니다 !■ react-router-dom 설치 방법react 프로젝트를 열고, 터미널에 해당 명령을 적어주면 끝입니다. 아주 간단하죠 ~~ npm install react-router-dom■ react-router-dom  기본 사용법네비게이션 바에 있는 메뉴를 누르면 해당 페이지로 이..

■ React 최적화 - 리렌더링 최적화를 위해서 ! ■ useMemo■ 예시 코드■ 함수 안에서 반환 형태 차이: ( ) => ({ }) vs ( ) => { }■ 주의할 점■ React 최적화 - 리렌더링 최적화를 위해서 ! 안녕하세요! 😊오늘은 React 최적화 시리즈로 useMemo Hook 에 대해 알아보려고 합니다. React 앱을 개발하다 보면 종종 "불필요한 렌더링" 때문에 성능이 저하되는 경우가 있습니다.특히 렌더링마다 실행되는 비용이 많이 드는 연산 이 있을 때 문제가 되죠.지난 포스팅에서는 React.memo 와 useCallback 으로 컴포넌트 리렌더링과 함수를 메모이제이션하는 방법을 알아봤는데요. 이번에는 연산 결과를 메모이제이션 하는 useMemo 를 다루겠습니다! 컴포넌트 ..

■ React 최적화 - 리렌더링 최적화를 위해서 ! ■ useCallBack■ 예시 코드■ 1~2편 리렌더링 최적화 방법 복습 ■ React 최적화 - 리렌더링 최적화를 위해서 !  props가 원시값일 경우 컴포넌트 최적화 방법에 대해 알고 싶으시다면,이전 포스팅을 참고해주시면 감사하겠습니다 !! https://leebaek.tistory.com/151 [React] props로 함수를 넘겨주자 - 리렌더링 최적화 1편 : memo■ React 최적화 - 리렌더링 최적화를 위해서 ! ■ React.memo■ 예시 코드 ■ React 최적화 - 리렌더링 최적화를 위해서 ! React에서 컴포넌트는 상태나 props가 바뀔 때 리렌더링 됩니다.이때 컴포넌leebaek.tistory.com■ useCall..

■ React 최적화 - 리렌더링 최적화를 위해서 ! ■ React.memo■ 예시 코드 ■ React 최적화 - 리렌더링 최적화를 위해서 ! React에서 컴포넌트는 상태나 props가 바뀔 때 리렌더링 됩니다.이때 컴포넌트 안에서 정의된 함수가 익명함수인지, 기명 함수인지에 따라 달라지는게 있을까요 ?? 익명 함수 기명 함수 둘다 ! 차이는 없다 ..- 렌더될 때 마다 함수 새로 생성 → 참조값이 달라짐 !!! - 부모가 렌더링 되면, 자식에게 전달된 함수 props도 항상 새로움 !→ 즉, 불필요한 리렌더링 발생function MyComponent() { return ( console.log("clicked!")}>Click );}function MyComponent() { const ..

■ 기명 함수 ( Named Function )■ 익명 함수 ( Anonymous Function )■ 함수 표현식 vs 함수 선언식 JavaScript에서는 함수의 이름이 있는지, 없는지에 따라 크게 두 가지로 나눌 수 있어요.이름이 있으면 기명 함수, 없으면 익명 함수라고 불러요. 기명함수, 익명함수에 대해 알아보아요.그 후, 함수 선언식과 함수 표현식에 대해 알아봅시다!■ 기명 함수 ( Named Function ): 이름이 붙은 함수로, 선언식 또는 이름 있는 표현식으로 작성됩니다. - 함수 이름이 존재하여 재귀 호출이 가능합니다.- 디버깅 시 스택 트레이스에 이름이 표시됩니다. // 함수 선언식function greet() { console.log("Hello!");}// 함수 표현식const..