혼자 적어보는 노트

이전 포스팅에서 다룬 React.memo와 함께 사용할 useCallback에 대해 적어보도록 하겠다. 함수를 재사용 한다고 하는데 무슨 의미인지 어떤 식으로 사용을 하는 것인지 알아보자 useCallback을 이해하기 위한 중요 개념은 함수는 일반 객체와 같은 비교 원칙을 따른다는 것이다. const func1 = () => 1 + 2; const func2 = () => 1 + 2; console.log(func1 === func2) // false; console.log(func1 === func1) // true; console.log(func2 === func2) // true; 같은 내용의 함수더라도 비교연산 시 false를 반환한다. 함수는 자기 자신 외의 다른 함수들에서는 false를 반환..

React로 프로젝트를 만들다보니 너무 많은 리렌더링을 하고 있는것 같다는 생각이 들 때가 있었다. 적절하게 사용 시 성능향상에 도움이 되는 React.memo() 에 대해 적어보겠다. 먼저 React에서 리렌더링이 되는 조건에 대하여 알아보자. React의 리렌더링 조건 1. state가 업데이트 되었을때 리액트에서는 state의 변경이 감지되면 리렌더링을 해주지만 setState가 아닌 직접 state변경을 하면 state변경을 감지하지 못해 리렌더링이 되지 않는다. 2. 전달 받은 props값이 업데이트 되었을 때. 하위컴포넌트에 props값을 전달 했을 때 그 값이 변경된다면 리렌더링이 된다. 2. 부모 컴포넌트가 리렌더링 되었을 때 부모컴포넌트가 리렌더링 되었을 때 자식컴포넌트 또한 리렌더링이 ..

기한을 설정하는 페이지에서 지정한 날짜에 따라 오늘, 내일, 혹은 지난 날짜임을 알려주는 경우들을 본 적이 있는데 그 기능을 작업해 보려고 한다. 이번에 todo작업하면서 date관련된 부분을 자주 접하면서 익히게 되었는데 date값들로 계산을 해보면서 몇가지 알고 있으면 좋을 점을 적어보겠다. new Date에서 직접 날짜를 입력해서 새로운 Date를 생성할 때 month부분에 실제 입력할 월에 -1 을 해주어야 원하는 월을 얻을 수 있다. ( ex) 1월일 경우 0) const someDay = new Date(2022, 1, 18); console.log(someDay); // Fri Feb 18 2022 00:00:00 GMT+0900 (한국 표준시) const someDay2 = new Date..

지난번 포스팅에서 라이브러리 없이 달력 만들기를 했었는데 해당 달력을 토대로, 작업하고 있는 todo list에 기한을 추가하는 기능을 넣어보기로 했다. 구현사항은 1. 기한 설정 버튼을 누르면 달력이 나타난다. 2. 달력에 있는 날짜 선택 시 해당 날짜가 데이터에 담기며, 표시된다. 달력에 표시되어있는 지난 달, 다음 달의 날짜 데이터를 누를 경우 해당 달에 맞는 데이터가 담긴다. 3. 달력이 아닌 다른 영역을 클릭 했을 때 팝업으로 나타난 달력이 사라진다. 건드릴 component는 TodoAddForm과 Calendar이다. 1. 기한 설정 버튼을 누르면 달력이 나타난다. [TodoAddForm.js] const [dueDate, setDueDate] = useState(""); const [ope..

라이브러리 없이 캘린더 만들기에 도전 해보기로 했다. 여기저기 블로그를 돌아다니며 javascript로 만드는 방법들을 참고해서 react에 적용 해보았다. const [thisCalender, setThisCalender] = useState(null); const today = new Date(); const thisYear = today.getFullYear(); const thisMonth = today.getMonth(); 상단에 위와 같이 날짜정보를 담을 state, today, thisYear, thisMonth를 만들어준다. const calenderMaker = () => { const prevLast = new Date(thisYear, thisMonth, 0); // 지난 달의 마지막..

https://jinist.tistory.com/92?category=930695 [React] Drag and Drop 이벤트 적용해보기 종종 사이트에서 드래그&드롭 이벤트가 보이길래 투두리스트를 작업하면서 나도 해당 기능을 적용해보기로 했다. 라이브러리를 사용해야 될 것만 같았는데 HTML 드래그앤 드롭 API가 jinist.tistory.com 이전에 시도했던 Drag and Drop이벤트. 맛보기로 감을 잡았으니 내 프로젝트에 적용할 응용버전을 만들어 보기로 했다. 하고싶은 기능의 구현사항 1. 리스트 드래그 시 클릭한 리스트 불투명처리 2. 리스트 드래그 시 들어갈 위치에 border 표시 3. 드롭 시 해당 위치에 해당 리스트 삽입 import React from "react"; import ..

처음에 너무 가볍게 접근했던 리덕스.. 몇차례 호되게 당하고.. 이제야 조금씩 감을 잡기 시작하여 다시 작성을 해보기로 했다. 리덕스 초기 세팅 1. react-redux, redux설치 npm i react-redux redux 2. action 함수와 type, reducer를 관리할 파일 생성. [modules/todo.js] const initialState = [1, 2, 3, 4]; //state 초기값 생성 const todoReducer = (state = initialState, action) => { return state; }; export default todoReducer; 가끔 기초강의 보면 세개를 각각의 파일로 관리하던데 리듀서와 액션 관련 코드들을 한 파일에 모두 작성하는 D..

종종 사이트에서 드래그&드롭 이벤트가 보이길래 투두리스트를 작업하면서 나도 해당 기능을 적용해보기로 했다. 라이브러리를 사용해야 될 것만 같았는데 HTML 드래그앤 드롭 API가 존재 한다는 것을 알게되었다. 여러 블로그나 글을 읽고 해본 다음에 공식문서를 보는 것이 도움이 되었다. + 참고블로그 드래그 api를 사용할 때 필요한 것. 1. draggable 속성 추가. 드래그 api를 사용하려면 html 태그 안에 draggable이라는 속성을 넣어주어야 한다. 2. 이벤트 지정. 사용할 이벤트를 지정해준다. 주요 이벤트 이름은 아래와 같다. drag 드래그 할 때 발생 dragstart 드래그하기 시작했을 때 발생 dragend 드래그를 끝냈을 때 발생 dragenter 드래그한 요소가 드롭 대상 위..