React38 [React] 성능 개선 2. useTransition, useDeferredValue 리액트 18버전 이후부터 렌더링 성능이 저하되는 컴포넌트에서 쓸 수 있는 기능들이 추가 되었다. 18버전 이후 추가된 기능 1 : 일관된 batching setCount(1) setName(2) setValue(3) //여기서 1번만 재렌더링됨 state 변경함수를 연달아 사용하면 재렌더링도 원래 3번 되어야 하지만 마지막에 1회만 처리해준다. 일종의 불필요한 재렌더링 방지기능이고 batching이라고 한다. fetch().then(() => { setCount(1) //재렌더링됨 setName(2) //재렌더링됨 }) 리액트 17버전까지는 ajax요청, setTimeout안에 state 변경함수가 있는 경우 batching이 일어나지 않았는데, 18버전 이후 부터는 어디 있든 간에 재렌더링은 마지막에 .. 2023. 12. 22. [React] 성능 개선 1. 재렌더링 막는 memo(), useMemo 설명 컴포넌트가 재렌더링되면 거기 안에 있는 자식 컴포넌트는 항상 함께 재렌더링 된다. 평소엔 문제가 없지만 만약 자식 컴포넌트 렌더링 시간이 1초같이 큰 시간이라면, 부모컴포넌트가 재렌더링 될때마다 1초나 느린 문제가 생긴다. 그럴 땐 memo를 이용하면 된다. 예시 function Child(){ console.log('재렌더링됨') return 자식임 } function Cart(){ let [count, setCount] = useState(0) return ( { setCount(count+1) }}> + ) } Cart 컴포넌트 안에 Child 컴포넌트를 만들고 버튼 클릭 시 Cart 컴포넌트가 재렌더링 되게 했는데 이 경우 Child 컴포넌트도 재렌더링 된다. memo() 사용 import .. 2023. 12. 22. [React] Local Storage 사용 방법 Local Storage란? -> 유저의 브라우저에 정보를 저장하고 싶을 때 쓰는 공간이다. 크롬 F12 (개발자 도구)의 Application 탭 들어가면 볼 수 있습니다. 사이트마다 5MB 정도의 문자 데이터를 저장할 수 있습니다. object 자료랑 비슷하게 key/value 형태로 저장합니다. 유저가 브라우저 청소를 하지 않는 이상 영구적으로 남아 있습니다. 밑에 있는 Session Storage도 똑같은데 브라우저 끄면 삭제됩니다. 사용 방법 # 추가하기 localStorage.setItem('데이터이름', '데이터'); # 가져오기 localStorage.getItem('데이터이름'); # 삭제하기 localStorage.removeItem('데이터이름') -> js 파일 아무곳이나 사용 가능.. 2023. 12. 22. [React] Redux 라이브러리 설치 및 사용법 Redux 라이브러리를 쓰는 이유 중앙 집중화된 상태 관리: Redux는 애플리케이션의 상태를 하나의 중앙 저장소에 저장하고 관리합니다. 이를 통해 상태의 변화를 예측 가능하게 하고, 디버깅 및 테스팅이 쉬워집니다. 예측 가능한 상태 변화: Redux는 상태 변화를 예측 가능한 방식으로 처리하며, 이는 액션(Action)에 의해 상태가 어떻게 변경되는지를 명시적으로 정의합니다. 이로써 애플리케이션의 동작을 추적하고 이해하기 쉬워집니다. 단방향 데이터 흐름: Redux는 단방향 데이터 흐름을 따릅니다. 액션 → 리듀서 → 상태 업데이트 순서로 데이터가 흐르기 때문에 데이터 흐름이 일관되고 예측 가능하며 디버깅이 용이합니다. 컴포넌트 간 상태 공유: Redux는 컴포넌트 간에 상태를 공유하기 쉽게 만들어줍니.. 2023. 12. 20. [React] Component 전환 애니메이션 만드는 밥법 (transition) 애니메이션 만드는 방법 애니메이션 동작 전 스타일을 담을 className 만들기 애니메이션 동작 후 스타일을 담을 className 만들기 transition 속성도 추가 원할 때 2번 탈부착 1. 애니메이션 동작 전 2. 애니메이션 동작 후 className 만들기 # 동작 전 .start { opacity : 0 } # 동작 후 .end { opacity : 1; } 3. transition 추가 # 동작 전 .start { opacity : 0 } # 동작 후 .end { opacity : 1; transition : opacity 0.5s } transition은 "해당 속성이 변할 때 서서히 변경해주세요~" 라는 뜻입니다. 그럼 이제 원하는 요소에 start 넣어두고 end 를 탈부착할 때 마.. 2023. 12. 20. [React] 서버에 POST요청 하는 법, 동시에 요청 여러 개 하는 법 POST요청 하는 법 axios.post('URL', {name : 'kim'}) 실행 시 서버로 {name : "kim"} 데이터가 전송된다. get과 마찬가지로 완료시 특정 코드를 실행하고 싶다면 이것도 역시 .then()을 뒤에 붙히면 된다. 동시에 AJAX 요청 여러 개 하는 법 Promise.all( [axios.get('URL1'), axios.get('URL2')] ) 이러면 URL1, URL2로 get 요청을 동시에 해준다. 둘 다 완료시 특정 코드를 실행하고 싶다면 .then()을 뒤에 붙히면 된다. fetch() fetch('URL').then(결과 => 결과.json()).then((결과) => { console.log(결과) } ) 자바스크립트 문법인 fetch()를 이용해도 GET.. 2023. 12. 20. [React] React에서 서버와 통신하는 방법 ajax axios AJAX( Asynchronous JavaScript and XML ) 란? -> 비동기적으로 데이터를 서버로부터 가져오거나 서버로 데이터를 보낼 수 있는 기술이다. AJAX는 웹 페이지를 다시 로드(새로고침) 하지 않고도 동적으로 데이터를 업데이트할 수 있게 해준다. AJAX로 GET/POST요청하려면 방법 3개 중 택1 하면 된다. XMLHttpRequest라는 예전 문법 쓰기 fetch() 라는 최신 문법 쓰기 axios 같은 외부 라이브러리 쓰기 터미널 입력해서 설치한다. import axios from 'axios' function App(){ return ( { axios.get('URL 주소').then((결과)=>{ console.log(결과.data) }) .catch(()=>{ cons.. 2023. 12. 19. [React] Component의 Lifecycle과 useEffect (2) useEffect에 넣을 수 있는 실행조건 useEffect(()=>{ 실행할코드 }, [count]) useEffect()의 둘째 파라미터로 [ ]를 넣을 수 있는데 이것을 dependency라고 한다. []에 변수나 state같은 것들을 넣을 수 있다. 그렇게 하면 [ ]에 있는 변수나 state가 변할 때만 useEffect 안의 코드를 실행해준다. 그래서 위의 코드는 count라는 변수가 변할 때만 useEffect 안의 코드가 실행된다. useEffect(()=>{ 실행할코드 }, []) -> 아무것도 안넣으면 mount시( 로드시) 1회 실행하고 더이상 실행해주지 않는다. clean up function useEffect 동작하기 전에 특정코드를 실행하고 싶으면 return ()=>{} 안에 .. 2023. 12. 19. [React] Component의 Lifecycle과 useEffect (1) React의 Component는 Lifecycle이라는 개념이 있다. 컴포넌트는 생성이 될 수도 있고 (전문용어로 mount) 재렌더링이 될 수도 있고 (전문용어로 update) 삭제가 될 수도 있다. (전문용어로 unmount) 그러므로 컴포넌트의 lifecycle에 간섭해 상황에 맞게 코드를 실행 할 수 있고 이걸 lifecycle hook 이라고 부른다. 예시 let [ex, setEx] = useState(0); useEffect(() => { console.log(1); }) setEx(ex+1)}>버튼 -> useEffect의 콜뱀함수안에 코드를 적으면 이 코드는 컴포넌트가 mount & update시 실행된다. useEffect 밖에 적어도 똑같은데, 그래도 쓰는 이유는? useEffect .. 2023. 12. 19. [React] URL 파라미터 문법 설명 -> 이런식으로 만들면, 100개가 있다면 100개의 라우트를 만들어야 하지만, -> URL 파라미터 문법을 이용하면 한줄로 해결 가능하다. -> "/:변수명" 입력했을 때 컴포넌트를 보여줘라 라는 뜻이다. import { useParams } from 'react-router-dom' function Detail(){ let {id} = useParams(); console.log(id) return ( 2023. 12. 18. 이전 1 2 3 4 다음
