React.memo, useCallback, useMemo 정리
React.memo, useCallback, useMemo 정리 예정,,
- 공부합시다 ✏️/React
- · 2024. 5. 31.
이번 팀프로젝트를 진행하면서 사용한 폴더구조를 정리해보려 한다프로젝트 초기 세팅을 맡아서 진행했는데, 시간이 촉박해서 항상 했던 모듈화로 진행했는데 팀원들에게 설명을 잘못했는지, 기존에 예상했던 거와 다르게 만들어진 것들이 있었다 그래서 여태까지 했던 방법과 개선도니 폴더구조를 구체적으로 정리해놓으려 한다 이번 프로젝트에서 적용하고 싶었던 건1. styled-component를 사용하면서 스타일 코드를 다른 파일로 분리하고 import 해서 사용하기2. RTK slice 사용하기3. 최대한 컴포넌트 / 페이지 단위로 분리하기 (이게 제일 안 됐다 ) 이번 프로젝트에서 진행한 폴더구조assets/ : 이미지와 같은 정적 자원components/ : 재사용 가능한 컴포넌트hooks/layouts/pages..
React.memo, useCallback, useMemo 정리 예정,,
리액트만 공부하다가 5월 다 지나간다ㅋㅋ근데 이번에 리덕스 제대로 공부한 것만으로도 만족도가 크다 ㅎㅅㅎ 리액트 요즘 넘 재밌다매주 배우는 새로운 개념들과 과제가 나오긴 하지만,, 이론에만 집착하는 걸 깨려고 내배캠을 들어온 것도 크기 때문에 만족기존에 개념들도 정리되고, 새로 알게 되는 것들도 많고, 코드리뷰도 받고 완전 좋잖아 ??코드 리뷰는 매번 긴장됨 ㅠㅡㅠ 왜 이렇게 짰어 이것밖에 못해? 뭔가 번득이는 아이디어가 없어서, 기존에 했던 것들이라서, 개념이 부족한 것 같아서이런저런 생각들 때문에 코드를 많이 안쳤던 것 같다 시간 남는다고 어영부영 보내지 말고, 계속 개인 과제를 만들어야겠다 렛츠두디스~ - gpt 첫 페이지에 추천해주는 질문들 중 귀여운 질문
리액트 수업 중 얼핏 알았지만, 정확히는 몰랐던 개념이 나왔다. 아래 코드에서 RouterProvider, div의 부모 컴포넌트는 ? 감싸고 있는 Wrapper? App?나 또한 확신있게 말하지 못했다 정답은 App이다 누가 부모 컴포넌트인지 확인하는 가장 빠르고 정확한 방법은 props 전달이다Wrapper에서 div로 props 전달이 가능한가? 아니다 props로 내려줄 수 있는 건 App 컴포넌트에서 가능하다 Warpper 는 상위 컴포넌트, App은 부모 컴포넌트이다 결론- 부모 컴포넌트는 자식 컴포넌트에게 데이터를 전달할 수 있다 (props 형태로)- 부모가 바뀔 때 자식이 리렌더링된다
고유한 id가 필요할 땐 항상 uuid나 Date.now를 사용했었는데 다른 사람의 코드를 보고 crypto.randomUUID라는 것을 알게되었다.둘의 사용법과 특징에 대해 정리해보자 uuiduuid란 범용적으로 사용되는 고유 식별자이다. (UUIDs, Universally Unique Identifier) 우리가 많이 쓰는 uuid라이브러리는 UUID 정의와 같은 이름의 라이브러리이다.uuid는 다양한 버전이 있는데, 보통 무작위로 생성되는 Verson 4를 사용한다.import { v4 as uuidv4 } from 'uuid';console.log(uuidv4()); // '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d' crypto.randomUUIDcrypto.randomU..
문제 원인부모 요소가 자식 요소의 크기에 맞춰 크기가 커질 수 있다 만약 자식 요소(item)가 overflow : auto 또는 overflow : scroll이 설정되어 있어 스크롤이 필요하지만, 부모 요소가 자식 요소의 크기에 맞춰 확장된다면 스크롤이 발생하지 않는다. (아래 사진 참고) 이때 부모 요소에 min-height: 0 을 설정하면, 부모 요소의 크기가 자식 요소의 크기에 맞춰 커지는 것을 막고, 자식 요소에 스크롤이 생기게 된다 flex-basis:0 으로는 안되나?flex-basis는 flex item의 기본 크기를 설정하는 속성이다 .만약 direction이 width이면 가로 너비를, column이면 세로 높이를 기준으로 설정된다 하지만 flex-basis:0 을 해도 위의 문제..