전체 글

오늘은 과제 주차 중 가계부 props drilling 버전을 Context API 버전으로 리팩토링 해보았습니다.이 과정에서 Context API에 익숙치 않아 살짝 어려움도 겪었습니다.Context API 의 정확한 사용법에 대해 정리해 보려고 합니다.Context API는 전역 상태를 관리하기 위한 강력한 도구입니다.Context를 사용하면 prop drilling을 피하고, 여러 컴포넌트 계층에 데이터를 전달할 수 있습니다.1. Context 생성하기먼저, Context를 생성합니다. 일반적으로 Context를 정의하는 파일을 따로 만들어 관리합니다.// context.jsimport React from 'react';const MyContext = React.createContext();expo..

오늘은 mock 데이터를 보내주는 가상 서버를 만들어 연습 등등에 사용할 수 있는 방법을 배웠습니다.JSON Server 가 그것으로, JSON Server는 간단한 REST API 서버를 만들기 위해 사용되는 라이브러리라고 합니다.JSON Server를 통해 JSON 파일을 기반으로 빠르게 Mock API를 생성할 수 있습니다. JSON Server의 설치 및 기본 사용법을 정리합니다.1. JSON Server 설치먼저 JSON Server를 글로벌로 설치합니다.npm install -g json-server2. JSON 파일 준비JSON Server는 JSON 파일을 데이터베이스로 사용합니다. 프로젝트 루트 디렉토리에 db.json 파일을 생성하고 다음과 같이 데이터를 준비합니다.// db.json{..

오늘은 전역 상태관리 라이브러리인 Redux 그리고 사용성을 강화한Redux Toolkit 의 기본에 대해 정리해보려고 합니다.1. Redux 설치먼저 필요한 패키지를 설치합니다.npm install @reduxjs/toolkit react-redux2. 기본적인 파일 구조src/├── store/│ ├── todoSlice.ts│ └── store.ts├── App.tsx└── index.tsx3. store.ts 설정store.ts` 파일을 생성하고 다음과 같이 설정합니다.// store.tsimport { configureStore } from '@reduxjs/toolkit';import todoSlice from './todoSlice';export const store = configu..

한주가 또 지나갔습니다. 이번 주는 리액트 입문 첫번째 개인과제 주차로목표는 todo list 만들기 였습니다. react의 주요 기본 기능이 많이 사용되는 프로젝트 인만큼잘 공부해 두면 추후의 프로젝트에도 많은 도음이 될 것이라 생각되었습니다. 이번 주에 학습한 내들용들을 복습하다가 custom hook 의 사용이유와 사용하는 상황에 대해한번 정리하고 넘어가는 것이 좋겠다고 생각하여 wil 을 작성해 봅니다커스텀 훅을 사용하는 이유코드 재사용성:동일한 로직을 여러 컴포넌트에서 사용할 때, 커스텀 훅을 만들어서 로직을 재사용할 수 있습니다. 이를 통해 코드 중복을 줄이고 유지보수성을 높일 수 있습니다.로직 분리:UI 로직과 비즈니스 로직을 분리하여 컴포넌트를 더욱 간결하고 이해하기 쉽게 만듭니다. 컴포넌..

어제 리액트 특강을 들으면서, 작동여부는 둘째 치더라도 잘 정렬된 props와 컴포넌트 구조를 가져야 하고 이로부터가독성이 담보된다는 사실을 다시 한번 느꼈습니다. 물론 작동도 잘 해야겠죠? 아래 내용을 정리해 보려고 합니다.기존 코드일단 제가 작성했던 todo list는 App.tsx 와 Card.tsx 두 개로 되어 있었고,컴포넌트화는 Card 만 한 상태였습니다.  부모 컴포넌트가 되는 App.tsx 에서 2개의 useState 를 만들었습니다.toDos 배열(전체 todo들)과 개별 toDo 객체 이렇게 2개 였고, 이렇게 생각한 이유는Form 을 컴포넌트로 분리하기가 어렵다고 생각했습니다. Form 컴포넌트에서 다루는 데이터는 어차피 부모로부터 props 로 받아야 할 것이고,그러면 state ..

오늘은 tsx 에서 styled-components 사용시 발생한 경고를 해결한 벙법을 정리해보겠습니다.상황은 조건부로 styled-components 를 처리하려고 styled div 에 prop을 전송하는 상황입니다.unknown prop?import styled from "styled-components";import { ToDo } from "../types/d";// 아래와 같이 적용하면,// it looks like an unknown prop "one" is being sent through to the DOM, which will likely trigger a React console error.// 위와 같은 에러가 발생합니다!const StyledDiv = styled.div` b..

리액트 첫 주차 과제 todo list 만들기를 완료하였습니다.간단한 과제이기 때문에 기술적인 어려움은 없었지만리액트 기본에 관한 몇몇 질문에 확실하게 대답하기 어려운 부분이 있었습니다.무언가 알고는 있지만 말로 해보려니 잘 정리가 안되는 부분들을 다시한번 간결하게 정리해 보려고 합니다.JSX 문법이란?JSX 란 Javascript 와 xml 의 결합어의 약자로서 자바스크립트와 xml 이 합쳐진 문법입니다.하나의 파일에 js 와 html 을 동시에 작성하여 편리합니다.브라우저에서 실행되기 전에 바벨 등을 통해 일반 자바스크립트로 변환됩니다.useState?애플리케이션의 상태를 관리하기 위해 리액트의 useState 훅을 사용하였습니다.데이터의 불변성을 유지하면서 상태를 관리할 수 있으며 간결하고 직관적인..

오늘은 본격적인 리액트 주차에 접어들어 특강을 수강했습니다.리액트를 다루는데 있어 무엇보다 중요한 리렌더링의 조건에 대해 확실하게 정리가 된 시간이었습니다.이것은 공식처럼 알고 있어야 할 것 같습니다. 리렌더링의 조건state가 변경되면 컴포넌트는 리렌더링됩니다.부모 컴포넌트로부터 받는 props의 값이 변경되면 컴포넌트는 리렌더링됩니다.부모 컴포넌트가 리렌더링되면 자식 컴포넌트는 리렌더링됩니다. state가 변경되면 컴포넌트는 리렌더링됩니다.state는 컴포넌트의 상태를 나타내며, 상태가 변경되면 해당 컴포넌트와 그 하위 컴포넌트들은 리렌더링됩니다.React는 setState 함수가 호출될 때마다 컴포넌트가 새 상태를 반영하도록 리렌더링을 트리거합니다.부모 컴포넌트로부터 전달받는 props의 값이 변경..

오늘은 리액트를 공부하면서 그동안 왜 그렇게 사용해야 하는지 모르고당연하게 써왔던 방법과 관련하여 그 원리에 대해 알아보았습니다.불변성(Immutability)의 원칙과 순수함수 지향에 대한 내용입니다. 불변성(Immutability)의 원칙리액트에서 상태 관리를 다룰 때 불변성(Immutability)을 유지하는 방식으로 코드를 작성해야 합니다.불변성은 데이터가 생성된 후 수정되지 않고, 변경이 필요한 경우 새로운 데이터를 생성해서 사용하는 원칙을 의미합니다. 리액트에서 불변성을 유지하는 이유는 주로 성능 최적화와 관련이 있습니다.리액트는 상태가 변경될 때 렌더링을 결정하는데, 객체나 배열 같은참조 타입의 데이터는 내용이 변경되어도 참조 주소가 동일할 수 있습니다. 이 경우 리액트는 상태가 변화하지 않..

두번째 팀프로젝트가 어느새 지나가고, 본격적인 리액트 학습 주차에 접어들었습니다. SPA의 원리와 장단점에 대해 공부하다가, Hash Routing 이라는 방법으로바닐라 자바스크립트에서 SPA 처럼 구현할 수 있다는 것을 알게 되었습니다. 리액트는 History API 로 이러한 SPA 를 구현하는 것으로 알고 있는데,Hash Routing 은 처음 보아서, 두 가지 방법을 모두 정리해 보아야겠다고 생각했습니다. Hash Routing해시드 라우팅은 URL의 해시를 사용하여 클라이언트 측에서 페이지의 구역을 로드합니다.URL의 # 부분은 서버로 전송되지 않기 때문에, 이를 활용하여 페이지 리로드 없이 URL을 변경할 수 있습니다.예를 들어, http://example.com/#/page1에서 #/page..