방구석 개발자의 놀이터

  • 홈
  • 태그
  • 방명록

modal 1

[React] Modal toggle 로직 개선 과정

리팩터링 책을 읽고 난 후 너무 당연하게 여겨왔던 코드에 대한 의문이 생기는 날이 종종 생겼다. 그 중 하나가 Modal toggle 로직이였다. 어떠한 문제가 있었고 어떻게 개선했는지 예제로 알아보자. (변수명, 함수명은 예제를 위해 임시로 지어논 이름입니다.) 1. Modal toggle 로직을 변경하고 싶었던 이유 이전의 Modal toggle 로직은 아래와 같았다. 빨간색 박스 : Modal toggle에 관여하는 state 영역 주황색 박스 : Modal toggle 함수 노란색 박스 : Modal을 렌더링 해주는 영역 위와 같은 구조는 Modal이 추가될 때 마다 state를 추가해야하고, state 변화에 따라 toggle 함수를 변경해야 한다. 또한, 컴포넌트에서 사용되는 state가 많아..

Front-End/React 2023.03.01
이전
1
다음
프로필사진

게으른 사람들에게 편리함을 제공해 줄 수 있을 때 가장 기쁜 개발자

250x250
  • 분류 전체보기 (102)
    • JAVA (2)
    • Spring (17)
    • Python (14)
    • 회고록 (4)
    • Flutter (3)
    • Git (1)
    • Spring Boot (15)
    • Algorithm (3)
    • AWS (1)
    • Front-End (34)
      • HTML (1)
      • CSS (1)
      • SCSS (2)
      • JavaScript (12)
      • React (13)
      • React-query (1)
      • NextJS (0)
      • Test (1)
    • OpenSource (3)
    • 독서 (0)
    • 강의 (1)
    • Error (4)

Tag

frontend, 개발자, springboot, react-router-dom, javascript, PYTHON, spring, component, 회고록, lombok, es6, 프론트엔드, front-end, springframework, spring boot, aspect, flutter, CSS, react, opensource,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

  2025. 07  
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.