일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- HTML5
- JS
- 프로그래머스JS
- css기초
- js코테
- 코테
- 백준nodejs
- 백준구현
- 코딩테스트
- JS프로그래머스
- 익스프레스
- 백준골드
- 포이마웹
- 알고리즘
- 몽고DB
- 프로그래머스
- CSS
- 다이나믹프로그래밍
- 프로그래머스코테
- 백준알고리즘
- 안드로이드 스튜디오
- 리액트댓글기능
- 리액트
- 자바스크립트
- 백준구현문제
- 리액트커뮤니티
- 백준js
- 백준
- HTML
- dp알고리즘
- Today
- Total
목록React (63)
개발새발 로그
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dUqEze/btsB5CBjgLq/ooPHqAuvfFmamEgq0oKwbk/img.png)
https://stackoverflow.com/questions/71286740/cannot-find-module-vitejs-plugin-react-or-its-corresponding-type Cannot find module '@vitejs/plugin-react' or its corresponding type I have created the project using npm create vite@latest and I choose ts-react, when I ran the script the npm run dev worked, no warning however, I am getting an two errors in vite.config.ts in vs c... stackoverflow.com
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bwSLyT/btsB4RLTNrm/xM5XjGLwDDDkVc8emNYwu1/img.png)
컴포넌트는 어떻게 설계해야할까? 경험도 중요하지만 이론도 어느정도 중요하다. 설계하면 아키텍처가 떠오른다. 아키텍처의 기본을 알아보자 아키텍처는 목표하는 대상에 대하여 그 구성과 동작 원리, 구성 요소 간의 관계 및 시스템 외부 환경과의 관계 등을 설명하는 설계도 혹은 청사진을 말한다 쉽게 말하면 아키텍처는 우리가 일을 잘하기 위한 방법 그러기 위해 모듈의 구현과 나누는 방법을 정한다 모듈에서 중요한 것은 응집도와 결합도 응집도란? 모듈 내에 포함된 요소들이 서로 연관되어 있는 정도 즉 모듈 내 기능들이 하나의 책임으로 잘 뭉쳐있는지를 나타낸다. 높은 응집도일 수록 좋은 설계 응집도가 중요한 이유는 응집도가 높을 수록 하나의 책임에 집중하고, 독립성을 높이면서 우리가 수정하기 위한 요소를 빠르게 찾을 수..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cjoNQZ/btsBY69S4OZ/E4qHWZw7tfA2yF00MZAicK/img.png)
useReducer 이제까지 state를 생성하고 관리하는 useState를 사용했다. 하지만 리액트에서 state를 관리하기 위한 hook이 또 있는데 그것이 바로 useReducer가 있다. useState처럼 state를 생성하고 관리한다. 대체 언제 사용할까? 여러개의 하위 값을 포함하는 복잡한 state를 다뤄야할 때 useState대신 useReducer를 사용하면 코드를 깔끔하게 쓸 수 있고, 유지 보수도 편리해진다. useReducer는 Reducer, Dispatch, Action 3가지로 이루어져있다. 사용자가 state를 변경하려고 Reducer에게 요구할 때 -> Dispatch 사용자가 state를 어떻게 변경하려는지 요구안에 그 내용을 담는다. -> Action Reducer는 ..
useCallback useCallback도 useMemo처럼 메모이제이션 기법으로 컴포넌트의 성능을 최적화해주는 것이다. 메모이제이션이란 어떠한 자주 사용되는 값을 받아오기위해 반복적으로 계산해야한다면 이전에 이미 계산한 값을 캐싱해둠으로 해당 값이 필요할 때마다 반복적으로 계산하는게 아니라 메모리에서 꺼내서 재사용하는 최적화 기법 useMemo는 인자로 받은 콜백함수의 리턴 값을 메모이제이션해서 사용하는 것이다. 그럼 useCallback은 무엇일까? useCallback은 인자로 받은 콜백함수 자체를 메모이제이션하는 것이다. const cachedFn = useCallback(fn, dependencies) useCallback은 리렌더 사이에 함수 정의를 캐시할 수 있는 React Hook이다. ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cw6qXb/btsBHTkDO7l/sTW8YKwVeksk1jvJpInX30/img.png)
배운점 1. 커스텀 훅 내부에서 ref를 선언하고, 해당 ref를 반환한 다음 원하는 컴포넌트에 ref를 지정해 연결하는 방법 2. 위에서 등록한 ref의이벤트를 지정하는 방법 3. scroll 이벤트의 passive 속성 passive : true 브라우저에게 이벤트 핸들러가 스크롤을 막지 않을 것임을 알려줍니다. 이렇게 함으로써 성능 향상이 이루어질 수 있습니다. 이때마다 핸들러 함수에서 event.preventDefault()를 호출하면 브라우저가 스크롤 동작을 계속 기다려야 하므로 성능에 영향을 미칠 수 있습니다. passive: true를 사용하면 브라우저가 핸들러 함수에서 기본 동작을 막지 않을 것으로 예상하므로 성능이 향상됩니다. 4. scrollTo 함수 scrollTo 함수는 웹 페이지의..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Pws7C/btsBGiYYPQQ/AkFiwWTmQxClbeWXTcOm7k/img.png)
useMemo useState와 useEffect가 익숙해졌다면 이제 컴포넌트 성능을 최적화하는 방법을 알아보자 컴포넌트 성능을 최적화를 사용되는 대표적인 Hook은 useMemo와 useCallback이 있다. 이번에는 useMemo에 대해서 알아보자 useMemo의 Memo는 Memoization을 뜻한다. Memoization이란 동일한 값을 리턴하는 함수를 반복적으로 호출해야한다면 맨 처음값을 계산할 때 해당 값을 메모리에 저장해서 필요할 때마다 또 계산하지 않고 메모리에서 꺼내서 재사용을 하는 기법 여기서 먼저 알아야할 점이 있다. 함수형 컴포넌트는 말그대로 함수라는 사실이다. 그리고 함수형 컴포넌트가 렌더링이 된다는 것은 그 함수가 호출된다는 것이다. 함수는 호출될 때마다 함수 내부에 정의되어..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/KRlEr/btsBQopIjLP/mtkL3ExK7oj21od5Nqkq1K/img.png)
useContext 리액트는 여러개의 컴포넌트로 이루어져있다. 이때 위에서 아래로 컴포넌트 트리를 형성하게 된다. 이때 상위에 있는 데이터를 하위 컴포넌트에게 전달하려면 일일이 props로 전달해줘야만한다. 이는 너무 복잡하다. React는 이를 위해서 Context API라는 것을 지원한다. Context는 앱 안에서 사용되는 전역적인 데이터들을 여러 컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다. Context를 상위에서 정의하고 하위 컴포넌트들은 useContext를 통해 접근한다. Context는 꼭 필요할 때만 쓴다! 위 설명으로 Props는 필요없는게 아닌가 할 것이다. 하지만 Context를 사용하면 컴포넌트를 재사용하기 어려워 진다. 리액트 공식문서에서는 Context를 사용하는 이유가..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/GMEVC/btsBHrgtdia/pobQdM9ZjhwyYwTHkrWKn1/img.png)
useRef const ref = useRef(value); 함수형 컴포넌트에서 useRef를 부르면 ref 오브젝트를 반환해준다. ref 오브젝트는 아래와 같다. {current : value} ref 오브젝트는 수정이 가능하기 떄문에 언제든 변경해줄 수 있다. ret는 컴포넌트의 모든 생애주기에서 유지된다. 컴포넌트가 계속해서 렌더링이 되어도 언마운트되기까지 값을 그대로 유지할 수 있다. useRef는 언제 사용이 될까? 두 가지 상황이 있다. 1. 저장공간을 위해 usestate의 state를 변경하면 자동으로 컴포넌트는 재 렌더링이 되고, 컴포넌트 내부 변수들은 초기화가 된다. -> let과 같은 변수는 초기화된다! 하지만 Ref를 이용하면 Ref가 변경되어도 렌더링이 되지않고, 컴포넌트 내부 변..