LEO Devlog LEO Devlog

리액트에서의 onChange , onClick 등에 들어오는 event 파라미터는 브라우저에서 사용되고있는 Event 인 Event와는 다른 객체이다. 해당 event 객체는 리액트에서 작성한 SyntheticEvent로 웹 브라우저에 있는 Event를 이용한 새로운 객체입니다. 그렇기 때문에 위의 비동기 처리시에는 null 값이 되며 해당 경고가 나타납니다. 리액트 공식 문서에서도 해당 부분을 해결하기 위해서는 e.persist 라는 함수를 사용하라고 되어있고 사용은 간단하다. 해당 onChange or onClick 에러 코드에서 e.persist()를 호출하면 된다. onChange={ (e)=>{ e.persist(); console.log(e.type); console.log(e.target.v..

Props Drilling이란? props drilling, 프로퍼티 내리꽂기 React 컴포넌트 트리의 일부로 데이터를 전달하기 위한 프로세스 props를 통해 데이터를 전달하는 과정에서 중간 컴포넌트는 그 데이터가 필요하지 않음에도 자식 컴포넌트에 전달하기 위해 props를 전달해야하는 과정이다. Prop Drilling의 장점 컴포넌트 간에 데이터를 전달하는 가장 쉽고 빠르게 전달 가능 컴포넌트를 잘게 분할해서 props drilling을 통해 전달하면, 코드를 실행하지 않고 정적으로 따라가는 것만으로도 어떤 데이터가 어디서 사용되는지 쉽게 파악할 수 있으며, 수정도 용이하다. (작은 규모라면..!) Prop Drilling이 야기하는 문제들 어플리케이션의 규모가 커지고, 컴포넌트의 수가 많아지면..

Virtual Dom 우선 DOM은 객체를 통해 구조화된 문서를 표현하는 방법 DOM 자체는 빠르지만 브라우저에서 DOM이 많아지면 CSS 재연산 레이아웃구성에서 느려진다. Virtual Dom은 DOM의 상태를 메모리에 저장해서, 변경이 일어날 때 변경 사항만 반영해서 성능이 향상된다.

README.md 파일만 덩그러니 있는 프로젝트 폴더를 clone해서 열었고, client 부분은 https://any-ting.tistory.com/93 을 참고해서 진행하니 react-app의 버전문제라고 에러가 떠서 You are running `create-react-app` 4.0.2, which is behind the latest release (5.0.1). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove..

Redux ✔️ Redux는 자바스크립트 앱에서 예측 가능한 상태 관리를 해주는 컨테이너다. 리액트에서 state와 props를 통해 상태 관리를 하고 상위 컴포넌트에서 하위 컴포넌트로 인자들을 넘겨주었는데, 만약 컴포넌트 중첩이 100만 개라면 디버깅에도 불리하고, 관리에 어려움이 따른다. 그래서 Redux가 출현하게 되었고, 세 가지 원칙을 가진다. Single source of truth 데이터를 한 곳에서만 관리한다. State is read-only 리액트에서 setState()를 통해서 state를 변경했지만, Redux에서는 action이라는 객체를 통해 state를 변경할 수 있다. Changes are made with pure functions 변경은 순수 함수로만 가능하다.(reduc..

Autocomplete (자동완성) 구현 ✔️ 테스트 케이스들을 다 통과하지 못해 아쉬웠지만 구현된걸 보니 유용하게? 쓰일 것 같다 ! import { useState, useEffect } from 'react'; import styled from 'styled-components'; const deselectedOptions = [ 'rustic', 'antique', 'vinyl', 'vintage', 'refurbished', '신품', '빈티지', '중고A급', '중고B급', '골동품' ]; /* TODO : 아래 CSS를 자유롭게 수정하세요. */ const boxShadow = '0 4px 6px rgb(32 33 36 / 28%)'; const activeBorderRadius = '1r..

리액트 컴포넌트 디자인 실습 ✔️ 리액트 모달 창 띄우기 ☑️ 삼항 연산자를 이용한 조건부 렌더링을 활용한다. alert창과 다르게 어두운 배경 태그 내부에 창 태그를 삽입해 구현한다. import { useState } from 'react'; import styled from 'styled-components'; export const ModalContainer = styled.div` // Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다. display: flex; justify-content: center; align-items: center; height: 100%; position: relative; `; export const ModalBackdrop = styled.div`ㅁ ..

CDD(Component Driven Development) ✔️ 개발 방법 중의 하나로, 부품 단위로 UI 컴포넌트를 만들어 나가는 개발 방법이다. CDD가 트렌드가 되면서, 이를 지원하는 도구 중 하나인 Component Explorer(컴포넌트 탐색기)가 등장했다. Storybook ✔️ UI 개발 // Component Driven Development를 하기 위한 도구다. 각각의 컴포넌트들을 따로 볼 수 있어, 전체 UI를 한눈에 보고 개발할 수 있다. 재사용성을 확대하기 위해 컴포넌트를 문서화한다. 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 사전에 버그를 방지하며 테스트 및 개발 속도를 향상한다. 기본적으로 독립적인 개발환경에서 실행되기 때문에 ..