전체 글 61
styled components에서 조건부 스타일링을 위해 true, false를 문자열로 전달해서 생겼던 에러
문제styled-components에서 highlight 속성으로 컬러를 구분하고 싶었다 먼저 Button은 재사용 컴포넌트이고, styled-components인 StButton을 사용한다 styled-components에서 prop을 전달할 때는 문자열로 전달했다 참고로 React는 컴포넌트에 전달된 props를 HTML 요소로 직접 전달한다이때, 비표준 속성(즉, HTML 표준 속성이 아닌 사용자 정의 속성)을 HTML 요소에 전달하면 경고가 발생하게 된다이는 React가 유효하지 않은 HTML을 렌더링하지 않도록 돕기 위해 발생한다 그런데 버튼의 컬러는 highlight 여부와 상관없이 항상 var(--second-color)가 지정되었다 해결 방법styled-components 지식이 부족..
2024. 6. 12.
React input 요소에서 value 와 defaultValue의 차이
Controlled Component vs Uncontrolled ComponentReact에서 form을 작성할 때 2가지 주요 패턴을 사용한다 먼저 react의 state와 통합된 controlled Component입력 요소를 react가 제어하고, 입력값을 상태로 유지한다 그리고 통합하지 않고, DOM에 의해 관리되는 uncontrolled Component useRef를 사용하여 DOM 요소의 값을 직접 접근하여 사용한다Controlled Component기본값은 react를 통해 결정되며, input의 value에 state를 넣어주면 된다그리고 변하는 값은 onChange에서 이벤트 핸들러를 통해 setState를 호출하여 항상 react 상태와 동기화된다import React, { useS..
2024. 6. 11.
Redux Toolkit (RTK) slice 개념과 사용법 정리
Redux-toolkit(RTK)는 Redux의 여러 단점을 보완한 전역 상태 관리 라이브러리이다- 상태는 전역으로 하나의 store에서 관리- 상태 업데이트는 순수함수인 reducer를 통해 처리 (= store의 상태는 reducer를 통해서만 업데이트)- dispatch(action)으로 reducer를 호출 RTK는 Redux의 공식 툴킷으로, redux를 쉽고 빠르게 사용할 수 있도록 만든 라이브러리이다.다음과 같은 문제점들을 해결했다잘 쓰려면 추가 패키지가 필요하다 ex 비동기 로직을 위한 redux-thunk, devtools간단한 걸 쓰기 위해서도 초기 설정을 위해 많은 코드를 작성해야한다(= 보일러플레이트 코드) immer이 기본으로 설정되어, 불변성 유지 없이 직접 수정이 가능하다sli..
2024. 6. 10.
이번 프로젝트에서 진행한 React 폴더구조와 개선할 점
이번 팀프로젝트를 진행하면서 사용한 폴더구조를 정리해보려 한다프로젝트 초기 세팅을 맡아서 진행했는데, 시간이 촉박해서 항상 했던 모듈화로 진행했는데 팀원들에게 설명을 잘못했는지, 기존에 예상했던 거와 다르게 만들어진 것들이 있었다 그래서 여태까지 했던 방법과 개선도니 폴더구조를 구체적으로 정리해놓으려 한다 이번 프로젝트에서 적용하고 싶었던 건1. styled-component를 사용하면서 스타일 코드를 다른 파일로 분리하고 import 해서 사용하기2. RTK slice 사용하기3. 최대한 컴포넌트 / 페이지 단위로 분리하기 (이게 제일 안 됐다 ) 진행한 프로젝트 구조 + elseassets/ : 이미지와 같은 정적 자원components/ : 재사용 가능한 컴포넌트hooks/layouts/pages..
2024. 6. 3.
리액트 렌더링 최적화 방법 useCallback, useMemo, React.memo 정리
Memoization (메모이제이션)기존에 계산한 값을 메모리에 저장해두고, 재사용하는 기법 리액트에서 메모이제이션1. 정말로 컴포넌트, 데이터의 생애주기에 따라 어떤 값을 갱신하고 싶을 때2. 리렌더링을 할 때마다 새로운 값을 계산 / 정의하는 것이 문제가 될 때 - 무거운 작업일 때 - 값의 참조값 또는 함수의 참조값을 유지하는 것이 중요할 때 컴포넌트가 리렌더링되면 컴포넌트 안에 선언된 변수는 재선언/재할당이 일어난다 (= JS 런타임의 메모리 참조가 변경) 리액트는 가상돔으로 바뀐 부분만 업데이트(렌더링이 되도 실제 돔은 업데이트 x)하지만 컴포넌트 안에 시간이 오래 걸리는 일이 있다면 가상돔을 만드는 시간이 오래걸림 useMemo (값)💡 의존성 배열이 변경되지 않는 이상, 같은 값 반환c..
2024. 5. 31.
리액트에서 상위 컴포넌트와 부모 컴포넌트는 다르다
리액트 수업 중 얼핏 알았지만, 정확히는 몰랐던 개념이 나왔다. 아래 코드에서 RouterProvider, div의 부모 컴포넌트는 ? 감싸고 있는 Wrapper? App?나 또한 확신있게 말하지 못했다 정답은 App이다 누가 부모 컴포넌트인지 확인하는 가장 빠르고 정확한 방법은 props 전달이다Wrapper에서 div로 props 전달이 가능한가? 아니다 props로 내려줄 수 있는 건 App 컴포넌트에서 가능하다 Warpper 는 상위 컴포넌트, App은 부모 컴포넌트이다 결론- 부모 컴포넌트는 자식 컴포넌트에게 데이터를 전달할 수 있다 (props 형태로)- 부모가 바뀔 때 자식이 리렌더링된다
2024. 5. 29.
고유 식별자를 생성하는 uuid와 crypto.randomUUID
고유한 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..
2024. 5. 28.
flex, grid에서 자식요소에 스크롤이 안 먹힐 때는 min-height:0
문제 원인부모 높이는 자식 요소의 크기에 따라 결정된다. (∵ min-height : auto) 만약 자식 요소(item)가 overflow : auto 또는 overflow : scroll이 설정되어 있어 스크롤이 필요하지만, 부모 요소가 자식 요소의 크기에 맞춰 확장된다면 스크롤이 발생하지 않는다. (아래 사진 참고) 이때 부모 요소에 min-height: 0 을 설정하면,부모 요소는 자식 크기에 맞춰 확장되지 않고, 부모는 원래 높이를 유지하며 넘치는 자식 요소에 대해 스크롤이 생기게 된다. flex-basis:0 으로는 안되나?flex-basis는 flex item의 기본 크기를 설정하는 속성이다 .만약 direction이 width이면 가로 너비를, column이면 세로 높이를 기준으로 설정된..
2024. 5. 27.
