본문 바로가기

Library&Framework/React5

리액트 리덕스를 활용한 마이페이지 리팩토링: 코드 개선을 통한 유지보수성 및 재사용성 향상 목차서론리팩토링의 필요성기존 마이페이지 구조리팩토링 목표코드 중복 제거유지보수성 향상재사용성 증대기존 코드 분석구조 및 문제점주요 함수와 컴포넌트리팩토링 과정API 유틸리티 분리Redux 액션 및 디스패치 최적화컴포넌트 간 의존성 감소최종 코드 구조리팩토링 후의 코드 구조주요 변경 사항결론리팩토링의 결과향후 계획 및 느낀점내용:1. 서론리팩토링의 필요성리팩토링은 코드의 기능은 유지하면서 내부 구조를 개선하는 작업입니다. 우리 프로젝트의 '마이페이지'는 기능이 확장되면서 코드가 복잡해지고 중복된 부분이 많아졌습니다. 이를 개선하기 위해 리팩토링을 진행하게 되었습니다.기존 마이페이지 구조const navigate = useNavigate(); // 페이지 이동을 위한 네비게이트 훅const dispatch .. 2024. 6. 30.
[리액트 강의 복습 03] 리액트에서 map 을 이용한 게시글 리스트 보기 , 게시글 작성하기 게시글 전체 const [posts, setPosts] = useState([ { id: 1, title: "남자 코트 추천 해드립니다!", content: "이 코트는 모의 회사에서 개발한 코트입니다.", publishDate: "2023-01-01", likes: 0, }, { id: 2, title: "강남 우동 맛집 소개!", content: "이 우동집은 모의 회사에서 개발한 우동집입니다.", publishDate: "2023-01-02", likes: 0, }, { id: 3, title: "파이썬 독학하는 방법좀 알려주세요", content: "파이썬을 독학하려면 어떻게 해야할까요? ", publishDate: "2023-01-03", likes: 0, }, ]); App 함수의 return.. 2024. 1. 4.
[리액트 강의 복습 02] 리액트 모달창 UI 만들기 리액트 환경에서, 동적인 UI 만들기(모달창 만들기) {isModalVisible === true ? ( changeTitle(modalIndex)} // changeTitle 함수를 props로 내려줌 toggleModal={() => toggleModal(modalIndex)} // toggleModal 함수를 props로 내려줌 modalIndex={modalIndex} > ) : null} 삼항연산자를 이용해서, modal 을 보여주도록 하고 있다. 지금 모달에 대한 설명을 하자면, 게시글 상세보기를 modal 창을 이용해서 보여주고 있다. 여기서 게시글 상세보기를 누르면 모달창이 나오는 것이다. 모달창을 띄우는 것/ 모달창을 닫는 것 => 상태변화가 2가지 이기 때문에 boolean 필드로 변수.. 2024. 1. 4.
[리액트 강의 복습 01] 리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개, State 이용해서 변수명 저장하기, State로 좋아요 기능 해보기 리액트에서 레이아웃 만들 때 쓰는 JSX 문법 3개 1. class 대신에 className 2. 변수를 html 에 넣고 싶을 땐 { 중괄호 } 3. style 넣고 싶을땐 4. 중요한 데이터는 변수말고 state에 담습니다 let [name, setName] = useState("김성우"); 라고하면, name 이라는 변수에 "김성우"를 임시 저장하고 setName 이라는 인자로 변수명을 변경할 수 있다. 라우터를 배우기 전에 , 블로그 만들기를 해보았는데 코드는 다음과 같다. // 'logo'가 사용되지 않을 경우 아래 줄을 제거하세요. import logo from "./logo.svg"; import "./App.css"; import { useState } from "react"; const .. 2024. 1. 4.
React 를 쓰는 이유? 1. Single Page Application 바닐라 javascript , html, css 를 써서 프로젝트를 만드는 것은, 무리가 있다. (실제로 해보았음) Route path="/detail" Route path="/" Route path="/login" 과 같이, url path 를 동적으로 라우팅해서 굳이 각각 html 파일을 만들고, js 를 따로 만들지 않아도 컴포넌트화해서 간단하게 넣어줄 수 있다. 2. html을 따로 파일일 만드는것이 아니라, "함수, Array, Object" 이런 곳에 보관하고 재사용할 수 있다. 큰 프로젝트 일 수록 html 관리가 편해진다. 3. React Native 를 쓰면 , 같은 리액트 문법으로 모바일 앱개발도 가능하다. (html, css 문법만 약.. 2024. 1. 3.

티스토리툴바