보통 컴포넌트를 만들 때 아무 생각 없이 렌더링하는 부분과 데이터를 받아오는 함수를 같이 두었다. 하지만 이 둘을 분리시켜 주면서 코드의 흐름을 더 빠르게 파악할 수 있고, 로직상 분리를 통해 역할 분담을 더 깰-꼼하게 할 수 있다는 것! 많은 코드가 아니라 그리 복잡해 보이지 않지만 데이터를 더 많이 가져올수록 코드는 더 길어지게된다. import React, { useState, useEffect } from "react"; import TodayDate from "./TodayDate/TodayDate"; import InputBox from "./InputBox/InputBox"; import Content from "./Content/Content"; import { ITodo..
투두리스트에 날짜를 불러오는 컴포넌트이다. 변경 전 코드는 함수를 만들어 if 매칭을 통해 날짜를 불러온다. 이 코드에서 나의 문제점은 1. 많은 조건을 매칭할 때는 if 보다는 switch/case문을 사용하자! if는 하나하나 앞에 있는 조건을 다 검사하고 타고타고 내려온다 하지만 switch case 문은 점프가 가능하다! 조건을 메모리에 들고 있기 때믄에 특정 조건을 만났을 때 위에서 부터 아래로 내려가서 하나하나 검사하는 것이 아닌 그 조건 케이스로 점프가 가능해진다. 하지만 보통 1:1 매칭이 가능한 것은 객체 혹은 배열로 사용하는 것이 더 좋다! 2. state의 필요성 함수 안에 있는 상수들은 변하지 않는 값들이다. 이것은 state가 변경될 때 함수가 다시 실행이 되어 불필요한 함수 생성..
개인 프로젝트를 하는데 state인 editingIndex의 초기값을 null로 두고 useEffect(() => { if (editingIndex && inputRef.current) { inputRef.current.focus(); } }, [editingIndex]); 이렇게 useEffect로 변경될 때 input창에 바로 포커싱을 주어 UX를 향상시키기 위한 코드를 짰다. 근데 editingIndex가 1번 째 일 때는 focus가 잘 되는데 유독 0번 째 일 때만 focus가 되지 않는 것이다. 그래서 useEffect(() => { if (editingIndex !== null && inputRef.current) { inputRef.current.focus(); } }, [editingIn..
실무에서 코드를 작성하는데 eslint가 type을 자꾸 명시하라한다.. 왜그럴까 궁금해서 찾아보았다. 1. 브라우저 기본 동작 방지 button 태그의 기본 타입은 "submit"으로 설정되어 있다. 따라서 버튼 클릭 시, 주의 폼의 제출 동작이 발생할 수 있다. 이런 동작을 방지하기 위해서 type="button"을 명시하여 버튼의 클릭 동작이 폼을 제출하지 않도록 방지할 수 있다. 2. 사용자 경험 개선 버튼의 목적이 폼 제출이 아닌 함수 호출 등 다른 동작을 수행하는 목적이라면, 명시적으로 type="button"을 주어서 사용자 경험을 향상시킨다. 버튼에 명시적인 동작이 없다면 사용자가 버튼을 눌러도 아무 일도 일어나지 않게된다.
