혼자 적어보는 노트

하고싶었던 기능은 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...

실행컨텍스트란? 실행할 코드의 환경 정보들을 모아놓은 객체 실행컨텍스트를 구성하는 방법은 기본적으로 함수를 실행하는 것이다. 실행 컨텍스트는 아래와 같은 정보들을 담고있다. - variable Environment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경정보 Lexical Environment : 처음에는 VariableEnvironment와 동일하다. 변경사항이 반영됨. 그리고 variable Environment와 LexicalEnvironment에는 두 가지의 정보가 담겨있다. - environment Record: 현재 컨텍스트와 관련된 코드의 식별자 정보들을 순서대로 저장 outer Environment reference: 상위의 LexicalEnvironment를 참조하는 포..

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..

하고자 하는 기능은 상품 데이터에 옵션이 있고, 옵션선택 시 옵션이 하단에 표시되고 count까지 할 수 있는 기능을 구현하려 한다. const [selectedOption, setSelectedOption] = useState(""); const { id, name, price, image, description, option } = currentProduct; //currentPropdoct에는 상품의 데이터가 담겨있다. const haldleOptionSelect = (e) => { setSelectedOption(e.target.value); console.log(selectedOption); //선택된 옵션을 확인할 수 있다. }; //..생략 옵션을 선택해주세요 {option.color.map..

ES6 객체 리터럴의 확장 기능 프로퍼티 축약표현 프로퍼티의 값으로 변수를 사용할 때 변수이름과 프로퍼티 키가 동일할 경우 값을 생략할 수 있다. let x = 1, y = 2; const obj = {x, y} console.log(obj); // {x: 1, y: 2} 계산된 프로퍼티 이름 프로퍼티의 key를 대괄호로 묶어 계산된 형식으로 생성 가능 const name = "Jay"; const obj = { [1 + 1] : 2 [`${name} 1`] : name, } console.log(obj) // {2: 2, Jay 1: 'Jay'} 메서드 축약 표현 const obj = { name: 'Jay', sayHi() { console.log('Hi!' + this.name) } /* es5 s..