728x90 반응형 React8 중첩라우팅 원래 경로 쓸때 user/login써야되는데 중첩라우팅으로 다음과 같이 쓸 수 있음 ! {/* 라우팅이 복잡한거 같아요 Router를 중첩해 보기좋게 관리해볼까요? */} {/* user/login 으로 이동됨! */} {/* user/logout 으로 이동됨! */} 2024. 1. 10. 리액트서 링크랑 라우트 차이가 뭐임....? React에서 Link와 Route는 React Router 라이브러리에서 제공되는 두 가지 다른 컴포넌트입니다. Link 컴포넌트: Link 컴포넌트는 네비게이션을 위해 사용됩니다. 일반적으로 태그와 비슷하지만, 클라이언트 측 라우팅을 사용할 때 페이지 전환을 새로고침 없이 처리할 수 있도록 도와줍니다. 주로 사용되는 속성은 to입니다. to 속성은 사용자를 어떤 경로로 이동시킬지 지정합니다. 예를 들어: import { Link } from 'react-router-dom'; const MyComponent = () => ( Go to Path ); Route 컴포넌트: Route 컴포넌트는 특정 경로에 대한 페이지 컴포넌트를 렌더링하는 역할을 합니다. 즉, 어떤 URL 경로가 요청되면 해당 경로에 .. 2024. 1. 10. useMemo vs useCallback useCallback과 useMemo는 모두 React에서 성능 최적화를 위한 훅이지만, 사용 목적과 동작 방식에서 차이가 있습니다. 각각을 좀 더 자세히 설명하겠습니다. useCallback: 목적: 함수를 메모이제이션하여 불필요한 함수 재생성을 방지하고 성능을 최적화합니다. 사용 시점: 주로 콜백 함수를 props로 전달하거나, 의존성 배열이 변경될 때마다 함수가 재생성되는 것을 방지할 때 사용합니다. 사용 방법: 예시: const memoizedCallback = useCallback(() => { // 콜백 함수의 내용 }, [dependencies]); const handleClick = useCallback(() => { console.log('Button clicked'); }, []); /.. 2023. 12. 28. useRef - split로 데이터 띄어쓰기 import React from 'react' import { useRef } from 'react' function Preinterview() { const faq = useRef(null); const interviewArr = [ { question : "비전공자로 프론트강의가 가장 어려웠던 점은?", answer : "어려웠다기보단/즐겁게 했습니다 ㅎㅎ" }, { question : "집가고 싶은날은 ?", answer : "음.../바로 지금? ㅎㅎ" }, { question : "좋아하는 음식은?", answer : "카레?/초밥? ㅎㅎ" }] console.log(interviewArr) // const chars = interviewArr[0].answer.split(''); // cons.. 2023. 12. 27. useRef - scroll이벤트처리! console.log로 출력되는건 랜더링과 아무상관없음. useState사용X 클래스명이 바뀌는것 또한 랜더링과 상관없음. useState사용X 이런것들은 useEffect나 useRef를 써서 해결하기 ! /* - console.log로 출력되는건 랜더링과 아무상관없음. useState사용X - 클래스명이 바뀌는것 또한 랜더링과 상관없음. useState사용X - 이런것들은 useEffect와 useRef를 써서 해결하기 ! */ import React, { useRef, useEffect, useState } from 'react'; const ScrollPositionComponent = () => { const targetRef = useRef(null); const [mytext, setMyte.. 2023. 12. 27. useEffect 란? 랜더링할때 무임승차 함수. useEffect( 실행식, [ ] ) : 컴포넌트 처음에 랜더링될때 한번 하고 안함 뒤에 [ ] 없으면 계속 랜더링되서 꼭 써야함 ! [ ] 로 빈 배열 쓰면, 컴포넌트 처음에 랜더링 될때 한번하고 안함. [ ] 자리에 useState의 변수가 자주 들어옴. useState랑 짝임 ! 만약, useState 변수가 여러개인 경우, 그 변수들 마다 값 변화가 생길때 마다 그 변수가 포함된 컴포넌트 전체 랜더링을 무조건 해야만 함 그 지옥에서 벗어나기 위해서 useEffect( 함수, [useState 여러개 변수 중 하나] ) 를 사용. ( 저 변수값으로 랜더링 될때만 실행할께 ) useEffect 내에서 반환된 함수는 해당 컴포넌트가 언마운트되거나 다음 useEffect가 실.. 2023. 12. 21. 이전 1 2 다음 728x90 반응형