반응형 상태 관리8 카카오테크캠퍼스 2기 | STEP2 | 22일차(24-07-23) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 22일차(24-07-23) 회고📝 react-hook-form처음에는 모든 폼 필드를 제어 컴포넌트로 구현했다. 입력값을 useState로 관리하고, 변화가 있을 때마다 상태를 업데이트하는 방식이었다. 이 접근 방식에는 두 가지 주요 문제가 있었다.폼이 커질수록 상태와 이벤트 핸들러가 많아지면서 코드가 매우 복잡해졌다.각 입력값 변화마다 전체 폼 컴포넌트가 리렌더링 되어 성능 문제가 발생했다.React Hook Form 라이브러리를 알게 되었고, 이 라이브러리가 제어 컴포넌트의 문제를 해결해 줄 수 있다는 것을 알게 되었다. React Hook Form은 폼 상태 관리를 훨씬 간단하게 만들어주고, 불필요한 리렌더링을 줄여준다. 📝 useForm 훅 사용use.. 2024. 7. 24. 카카오테크캠퍼스 2기 | STEP2 | 15일차(24-07-12) 회고 ⭕ 카카오테크캠퍼스 2기 | STEP2 | 15일차(24-07-12) 회고📝 커스텀 훅(Custom Hook) 및 유틸 함수(util function)프로젝트를 처음 접했을 때, 'hook' 폴더와 'util' 폴더로 파일이 구분된 것을 보고 왜 이렇게 나누는지 궁금했다. 처음에는 단순히 파일을 정리하기 위한 것이라고 생각했지만, 실제로는 각 폴더가 다루는 내용과 역할이 다르다는 것을 깨달았다.hook 폴더: 주로 상태 관리를 위해 커스텀 훅을 모아놓은 폴더이다. 리액트 컴포넌트에서 공통적으로 사용하는 상태 로직을 추출하여 재사용 가능하게 만든 함수들이다.util 폴더: 상태와는 무관하게, 자주 사용되는 로직이나 기능을 함수로 모듈화한 유틸리티 함수들을 모아놓은 폴더이다. 일반적으로 입력을 받아 변환된.. 2024. 7. 17. 카카오테크캠퍼스 2기 | 9주차(24-06-03 ~ 24-06-09) 회고 ⭕ 카카오테크캠퍼스 2기 | 9주차(24-06-03 ~ 24-06-09) 회고"함수(또는 메서드)가 한 가지 일만 하도록 최대한 작게 만들어라"라는 요구사항에 맞추기 위해 최대한 노력했습니다. TodoApp(src\components\TodoApp\TodoApp.jsx) 컴포넌트를 더 작은 단위로 분리하여 상태 관리를 보다 효율적으로 하려고 시도했습니다. 이를 위해 상태를 저장하는 부분을 여러 컨테이너로 분리했으나, 이 과정에서 각 컨테이너 간에 상태가 공유되지 않는 문제점이 발생했습니다. 😓이 문제를 해결하기 위해 CONTEXT API를 사용할 수 있다는 것을 알게 되었습니다. 하지만 아직 CONTEXT API에 대한 공부가 충분히 이루어지지 않아, 이를 적용하는 데 어려움을 겪었습니다. 앞으로 고급.. 2024. 6. 19. 리액트 React | React: Props 및 State ⭕ 리액트 React | React: Props 및 State 프런트엔드 개발을 위한 JavaScript 라이브러리 ➡️ Virtual DOM 자바스크립트 객체 복제본: DOM 노드 트리의 경량화된 복사본, 실제 DOM보다 빠른 연산 가능 diffing 알고리즘: 이전과 현재의 Virtual DOM을 비교하여 실제 DOM에 반영해야 할 변경사항을 파악 배치 업데이트 기능: 변경사항을 모아두었다가 한 번에 실제 DOM에 적용하여 성능 최적화 ➡️ render() 컴포넌트의 렌더링: 컴포넌트가 호출될 때 실행되며, Virtual DOM을 생성하고 업데이트 결정 순수 함수: props나 state의 변경에 따라 결과가 결정됨 렌더링 단계: 'render phase'에서 Virtual DOM 생성 및 비교, '.. 2024. 3. 9. 리액트 React | DOM(Document Object Model) ⭕ 리액트 React | DOM(Document Object Model) HTML 문서의 계층적 구조와 정보를 표현하고 제어할 수 있는 API, 프로퍼티, 메서드를 제공하는 트리 자료구조 구성 요소: 노드(Node), 객체(Object) ➡️ 프레임워크 및 라이브러리 발전 동기: 애플리케이션 규모 확장에 따라 API 통신 데이터 업데이트, 이벤트 및 상태(state) 조작 필요성 증가 기존 방식의 한계: document.getElementById() 같은 DOM API로 HTML을 직접 조작하는 방식은 불편하고 비효율적 예시: Angular, React, Vue, Svelte 역할: 브라우저 DOM 조작을 프레임워크 및 라이브러리에 위임 ➡️ DOM 등장 배경 서버에서 HTML 동적 생성을 가능하게 하는.. 2024. 3. 9. 리액트 React | Redux ⭕ 리액트 React | Redux JavaScript 앱을 위한 예측 가능한 상태 컨테이너 애플리케이션의 상태 관리를 효율적이고 일관된 방식으로 수행할 수 있음 상태 관리의 복잡성을 줄이고, 애플리케이션의 동작을 더 예측 가능하도록 함 ➡️ Redux 3가지 원칙 단일 진실의 원천(Single Source of Truth): 애플리케이션의 전체 상태는 하나의 객체 트리 스토어(store)로 저장됨, 애플리케이션 내 어디서든 같은 상태에 접근할 수 있음 상태는 읽기 전용(States Are Read-Only): 상태를 변경할 수 있는 유일한 방법은 액션(action)을 발생하는 것 변화는 순수 함수에 의해 이루어진다(Changes Are Made with Pure Functions): 상태 변화는 리듀서.. 2024. 3. 8. 리액트 React | 상태관리: MVC/Flux ⭕ 리액트 React | 상태관리: MVC/Flux 상태 관리: 애플리케이션 내에서 데이터(상태)의 생성, 업데이트, 조회 및 삭제 등의 생명주기를 관리하는 전략 상태 변화가 발생할 때 해당 변화가 데이터를 필요로 하는 모든 컴포넌트에 자동으로 반영되도록 보장해야 함 props drilling: 상태를 컴포넌트 계층구조를 통해 전달하는 방법으로, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 직접 전달함 ➡️ MVC 아키텍처: 모델(Model), 컨트롤러(Controller), 뷰(View) 모델(Model): 데이터를 처리함 컨트롤러(Controller): 인터페이스 뷰(View): 데이터를 사용자에게 보여주는 UI 다방향 데이터 흐름 ➡️ Flux 아키텍처 액션(Action): 상태 변화를 일으키는 정보.. 2024. 3. 8. 리액트 React | 상태(State) ✅ 상태(State) React에서 상태(State)는 컴포넌트 내에서 관리되는 비공개적인 데이터로, 컴포넌트 내부에서 값을 변경하고 화면에 반영하는 데 사용됩니다. State는 컴포넌트의 동적인 데이터를 저장하고 업데이트하는 데 주로 활용됩니다. State는 일반 JavaScript 객체이므로 여러 가지 데이터 유형을 저장할 수 있습니다. 💡 상태(State)와 속성(Props) 차이점 React에서는 상태(State)와 속성(Props)이라는 두 가지 주요 개념을 사용하여 컴포넌트의 데이터를 관리합니다. Props는 읽기 전용 데이터로, 컴포넌트 외부에서 설정되고 컴포넌트 내부에서는 변경할 수 없습니다. Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용됩니다. 반면에 State.. 2023. 7. 4. 이전 1 다음 반응형
