혼자 적어보는 노트

화면의 Home page에 접근 시 팝업을 띄우려는 작업 중 오늘 하루 안보기를 구현해보기로 했다. 대략적인 구현 방법은 Local Storage에 날짜 및 시간을 담는 것이고 Home에 접근 시 Local Storage에 있는 Date을 현재 날짜/시간과 조회하여 조건에 따라 팝업을 노출해 주는 것이다. 일단 Home에서 state를 만들어주고 제어를 해 준다. // Home.js import { useEffect, useState } from "react"; import MainPopup from "../components/mainPopup"; function Home() { const [showMainPop, setShowMainPop] = useState(false); // 기본 세팅 값은 fal..

Warning: You provided a `value` prop to a form field without an `onChange` handler. input을 다루게 될 때 위와 같은 warning메세지를 보곤 한다. 태그 사용시 value속성이 고정값이 아니기 때문에 생기는 경고 메세지이다. defaultValue를 사용하던지, readOnly를 사용하던지, onChange를 사용하면된다. 몇가지 테스트를 진행해보았다. 사용자로부터 값을 변경시키지 않을때, 사용자를 통해 변경을 하는게 아닌 설정해놓은 이벤트로 인해 동적으로 값을 변경 하는 상황이다. 그럴 땐 변화되지 않게 readOnly 속성을 넣으면 경고 메세지가 사라진다. 사용자부터 값을 변경 시킬 때 이런식으로 defaultValue속성에 값..

react에서 state를 변경하기위해 this.setState나 useState에서 setState를 사용하게 되는데 비동기적으로 업데이트되는 특성 때문에 종종 원하지 않는 결과를 보여줄 때가 있다. setState를 동기적으로 호출하기 위해 this.setState의 두번 째 인자에 콜백 함수를 넣어 동기적으로 실행하게 하거나 useState와 useEffect를 사용하여 setState가 실행된 후를 감지할 수는 있으나 개별적으로 나누어진 함수 안에서 state를 함께 변경 할때 state변경하기가 어려웠다. 아래의 코드는 직접 문제를 겪게된 코드이다. const addHistory = (keyword) => { if (!keyword) { return; } const hasHistory = his..

하고싶었던 기능은 input의 focus를 감지하여 포커스가 되면 최근검색어 창이 띄워지고 검색 시 최근 검색어가 담기며, 지우기버튼을 누르면 최근검색어가 지워지는 기능이였다. 단순 onFocus / onBlur을 사용하여 최근검색어 창의 state를 true/false로 관리하려 시도했지만 focus가 된 상태에서 최근검색어 창을 누르기위해 접근하면 input의 focus가 풀리면서 당연하게도 닫기 버튼이 클릭을 할 수 없는 문제가 발생한다. focus가 되면 state가 true가되고 focus가 되지 않은 상태에서 최근검색어 영역 밖을 클릭하면 state가 false로 되었으면 했다. useRef를 이용한 영역 밖 클릭 감지 const clickWrapp = (event) => { if (docum..

React에서 map함수를 다루다 보면 key를 사용하지 않을 시 warning을 만나게 된다. key사용은 왜 하는걸까? 이것은 가상돔의 렌더링 과정과 관련이 있다. key는 react의 가상 돔에서 어떤 항목을 변경하고 추가, 삭제할지 식별하는 것을 도와준다. key는 엘리먼트에 안정적인 고유성을 부여하기 위함이여 배열 내부의 엘리먼트에 지정해주어야 한다. 리액트는 가상돔으로 이전 가상돔과 차이가 있는 부분을 찾아서 변경하는데 그 기준은 재 조정 알고리즘을 통해 정하게 된다. 재조정 알고리즘에는 두가지 가정이 있는데 1. 엘리먼트 타입이 다를 경우 - 루트엘리먼트를 비교하여 타입이 다를 경우엔 루트엘리먼트 전체를 새로 구축 - 같은 타입의 루트엘리먼트에서 속성이 다를 경우 다른 부분만 다시 갱신 2...

state를 업데이트 하다보면 setState로 값을 변경하고 console.log를 찍어보면 변경되기 전의 값이 출력되는 경우가 있다. setState는 비동기이기 때문에 이부분을 고려해야한다. 해결하는 방법은 무엇이 있을까? [Class component] 아래는 삭제 버튼을 누르면 searchKeyword가 초기화 되는 코드의 일부분이다. handleRemove() { this.setState({ searchKeyword: "", // serchKeyword 초기화 }); console.log(this.state.searchKeyword, "remove"); // 초기화 되기 전의 값이 출력됨 } state업데이트가 잘 되었는지 console.log를 찍었는데 이전 값이 나온다. - setState..

데이터 관리를 하다보면 2차원, 3차원 등등의 깊은 객체들을 다룰 일들이 생긴다. state의 불변성을 지키기 위해 코드를 짜다보면 깊은 객체에 데이터 하나를 수정하는데에 길고 복잡한 코드를 작성해야 한다. 아래는 직접 난항을 겪은 예시 데이터이다 const addCart = [ { id: 1, name: "모자", description: "털모자", price: 27000, option: [ { optionName: "blue", quan: 1 }, { optionName: "black", quan: 1 }, ], }, { id: 2, name: "자켓", description: "겨울자켓", price: 27000, option: [{ optionName: "blue", quan: 1 }], }, ]..

import React, { Component } from "react"; import Counter from "../components/Counter"; import { connect } from "react-redux"; import * as counterActions from "store/modules/counter"; class CounterContainer extends Component { handleIncrement = () => { this.props.increment(); }; handleDecrement = () => { this.props.decrement(); }; render() { const { handleIncrement, handleDecrement } = this; cons..