본문 바로가기

분류 전체보기

 (106)
TIL - 부모 - 자식 컴포넌트의 리렌더링 오늘은 React에서 부모-자식 컴포넌트의 리렌더링 조건에 대해 수업을 들으면서 블로그를 보고 정리했습니다.  요약부모 컴포넌트가 리렌더링되면 자식 컴포넌트들도 리렌더링된다.자식 컴포넌트란 부모 컴포넌트의 JSX 안에서 형태로 사용된 모든 컴포넌트이다.형제 컴포넌트끼리는 서로 리렌더링에 영향을 미치지 않는다.세부 내용컴포넌트 관계 이해:부모 컴포넌트가 리렌더링되면 그 안의 모든 자식 컴포넌트들도 리렌더링됨.자식 컴포넌트들은 부모 컴포넌트의 JSX 안에 사용된 컴포넌트들이다.형제 관계인 컴포넌트들끼리는 서로 리렌더링에 영향을 미치지 않음.렌더링 관계 트리예시 코드 1const Parent = () => ( );const Child1 = ({ children }) => {ch..
TIL - Form Input - useRef vs useState Form에서 input으로 입력을 받을 때 실시간으로 리렌더링되는 useState와 한 번에 모든 입력 값을 처리하는 useRef를 사용하는 경우 어떤 방법이 더 나은지와 이유를 학습했습니다.useState vs useRefuseState장점:React 상태 관리: 입력 값이 React 상태로 관리되므로, 입력 값이 변경될 때마다 컴포넌트가 리렌더링됩니다. 이를 통해 입력 값에 따라 즉각적으로 UI를 업데이트하거나 유효성 검사를 수행할 수 있습니다.제어 컴포넌트: 제어 컴포넌트를 사용하면 입력 값의 변경을 쉽게 추적하고, 이를 기반으로 다양한 로직을 추가할 수 있습니다. 예를 들어, 입력 값에 따라 버튼을 활성화하거나 비활성화할 수 있습니다.동기화: 입력 값과 상태가 항상 동기화되어 있기 때문에, 다른 ..
React - Debounce 적용하기 TIL - React와 Redux를 사용한 메모 앱 구현오늘은 Mac 기본 메모 앱을 참고하여 React와 Redux를 사용한 메모 앱을 구현했습니다. 주요 기능은 다음과 같습니다메모의 CRUD 기능: 메모 추가(Create), 삭제(Delete), 수정(Update), 선택(Read) 기능메모 항fe-jogha.tistory.com 위에 있는 메모 앱은 오른쪽 섹션에서 메모를 수정하면 왼쪽에 있는 리스트 항목의 제목이 연결되어 있어  같이 수정되는 애플리케이션 입니다.  이미지에 첨부된 메모 앱은 가벼운 사이트라서 리렌더링이 되도 문제가 없지만 무거운 사이트일 경우 불필요한 요청을 줄여 성능을 향상시키기 위해 사용되는 방법중 하나가 Debounce 입니다. Debounce란?Debounce는 사용자의 ..
TIL - React와 Redux를 사용한 메모 앱 구현 오늘은 Mac 기본 메모 앱을 참고하여 React와 Redux를 사용한 메모 앱을 구현했습니다. 주요 기능은 다음과 같습니다메모의 CRUD 기능: 메모 추가(Create), 삭제(Delete), 수정(Update), 선택(Read) 기능메모 항목 시간 순 정렬: 메모 리스트를 Date()객체를 활용해서 최신 순으로 정렬메모 리스트 제목과 메모 내용 연동: 메모를 수정하면 사이드바에 메모 리스트의 메모 제목이 같이 수정주요 구현 내용 Redux를 사용한 상태 관리memo.reducer.js에서 메모와 관련된 상태를 관리하는 리듀서를 작성했습니다.메모의 추가, 삭제, 수정, 선택 기능을 위한 액션과 액션 크리에이터를 정의했습니다.로컬 스토리지를 사용하여 메모 데이터를 저장하고 불러왔습니다.Router 설정:..
TIL - 리액트로 가계부 만들기 - 3 목표alert창, confirm창 모달창으로 변경메인 페이지 그래프 컴포넌트 추가 가계부 항목 정렬순으로 표시주요 학습 내용모달창 상태 Redux 활용해서 저장소에서 관리styled-components 활용해서 총 지출 그래프 구현useState와 switch 문 활용해서 항목 정렬1. 모달창 상태 Redux 활용해서 저장소에서 관리src└── assets └── components └── Modal ├── AlertModal.jsx ├── ConfirmModal.jsx └── Modal.styled.js Alert 창과 Confirm 창을 모달 창으로 구현하고, styled-components를 사용하여 스타일링했습니다. //..
Redux - 비동기 처리 createAsyncThunk createAsyncThunk | Redux Toolkit redux-toolkit.js.org   개요Redux Toolkit의 createAsyncThunk는 Redux 액션 타입 문자열과 프로미스를 반환하는 콜백 함수를 받아들이는 함수입니다. 제공된 액션 타입 접두사를 기준으로 프로미스 생명주기 액션 타입을 생성하며, 프로미스 콜백을 실행하고 반환된 프로미스에 따라 생명주기 액션을 디스패치하는 thunk 액션 생성기를 반환합니다. 이는 비동기 요청 생명주기를 처리하는 표준 권장 접근 방식을 추상화합니다. createAsyncThunk는 어떤 데이터를 가져오고 있는지, 로딩 상태를 어떻게 추적할지, 반환된 데이터를 어떻게 처리할지 알 수 없으므로 리듀서 함수를 생성하지 않습니다. 이러한 액션을 처리하..
TIL - 리액트로 가계부 만들기 - 2 오늘은 리액트를 활용하여 가계부 프로젝트를 계속 진행했습니다. CRUD 기능을 완성하고, 상태 관리를 리팩토링하면서 주요 학습 내용과 작업 과정을 정리했습니다. 목표CRUD 기능 완성상태 관리 props drilling에서 useContext로 리팩토링Redux를 활용해서 상태 관리 리팩토링주요 학습 내용Update와 Delete 기능 구현useContext로 상태 관리 리팩토링Redux를 사용한 상태 관리 리팩토링1. Update와 Delete 기능 구현// expense 항목 Update 기능const updateExpense = (targetExpense, modifiedExpense) => { const updatedData = fetchedData.map((expense) => expen..
TIL - 리액트로 가계부 만들기 - 1 오늘은 리액트를 활용하여 가계부 만들기 프로젝트를 진행했습니다.목표CRUD가 가능한 가계부 만들기처음에는 props drilling를 경험두 번째는 useContext로 리팩토링마지막은 Redux를 활용하여 리팩토링해서 완성여기서 props drilling이란, 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때, 여러 중첩된 컴포넌트를 통해 props를 계속 전달해야 하는 상황을 말합니다.props drilling의 단점가독성 저하: 데이터가 여러 컴포넌트를 통해 전달되므로, 코드가 복잡해지고 가독성이 떨어집니다.유지보수 어려움: 컴포넌트 계층 구조가 변경될 때마다, 모든 중간 컴포넌트의 props를 업데이트해야 하므로 유지보수가 어렵습니다.불필요한 렌더링: 모든 중간 컴포넌트가 다시 렌더링될 수 있어..

티스토리툴바