Frontend/React

React keys

React에서 key는 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 도와줍니다. key는 꼭 지정하는 것이 좋고 data의 id와 같이 고유한 값을 지정해 주는 것이 좋습니다. 이때 전체 파일에서 고유할 필요는 없습니다. 인접한 리스트에서만 key 값은 고유하면 됩니다. 항목의 순서가 바뀔 수 있는 경우에 key값에 Index값을 사용하는 것은 적절치 않습니다. 불필요한 렌더링이 일어날 수 있습니다. key값을 명시해주지 않으면 React는 기본적으로 index를 key로 사용합니다. React에서는 인접한 요소들에서 Key 값이 설정되어 있지 않다면 index 값을 default로 사용한다고 하였습니다. 위의 gif에서 input에 있는 값들의 동작은 분명 이상합니다. list의 뒤에 추가될 때는..

React input onFocus, onBlur(focus out) 😶‍🌫️

react에서 input에 focus out을 이용하고 싶을때는 onBlur를 이용하면 됩니다. javascript react focusin onFocus focusout onBlur focusout으로 계속 시도해보다가 onBlur를 최근에 알게되었습니다. 아래에 예제 추가해 두었습니다. react 깃헙에서 관련 issue도 첨부해 두겠습니다! react-dom 라이브러리에서 focusIn, focusOut 관련 부분도 캡처 & 링크 걸어두겠습니다. HTML 삽입 미리보기할 수 없는 소스 https://github.com/facebook/react/issues/6410 onFocusIn/onFocusOut events · Issue #6410 · facebook/react Like mouse enter..

React moment locale 적용하기 🌹

React에서 moment를 사용하는 경우 locale을 변경하고자 하면 직접 import 해주어야 합니다. import moment from 'moment' import 'moment/locale/fr'; import 'moment/locale/kr'; export default function App(){ 생략 } moment는 시간을 다룰때 굉장히 유용한 library 입니다. 그래서 굉장히 널리 사용되고 있습니다. moment는 파일사이즈가 큽니다. 그래서 day.js와 같이 파일사이즈가 작고 moment와 쓰임새가 유사한 라이브러리를 사용하라는 정보를 접한적이 있습니다. cra로 시작한 경우 moment의 locale을 변경해주려면 위와 같이 locale file을 직접 import 해주어야 합..

React Derived State 🥲

React 관련 자료를 살펴보다가 Derived State라는 것에 대해 알게 되었고 이를 지양해야 한다고 알게되었습니다. Derived State가 무엇이고 해결은 어떤 방식으로 하는지 알아보려 합니다. Derived State는 props로 전달받은 정보가 컴포넌트에서 state로서 정의되어 관리되는 것을 의미합니다. derived는 ~파생된, ~유래된 이라는 뜻을 가진 영단어 입니다. 예시를 살펴보겠습니다. import { useState } from 'react'; import './App.css'; import DerivedState from './DerivedState'; function DerivedState({ defaultEmail, onChange }) { const [value, se..

React props, state 🏔

React에서 props와 state는 어떤것을 의미할까요??? 우선 props와 state는 둘다 정보를 가지고 있는 일반 javascript 객체 입니다. props와 state는 렌더링 결과물에 영향을 주는 정보를 가지고 있습니다. 하지만 props는 외부에서 전달을 받고 state는 컴포넌트 내부에서 관리됩니다. props는 같은 input에 같은 output을 반환해 줍니다.(순수함수 같네요) function Welcome(props) { return welcome {props.name} } props는 외부에서 정의되어 내부 컴포넌트로 전달됩니다. state는 컴포넌트 내부에서 관리되어지는 렌더링에 영향을 주는 정보를 가지고 있는 자바스크립트 객체입니다!! state는 컴포넌트 내부에서 정의되..

React useReducer 🌱

useReducer는 useState의 대체 함수 입니다. const [state, dispatch] = useReducer(reducer, initialState, init) (state, action) => newState의 형태로 reducer를 입력받고 dispatch 메서드와 짝의 형태로 현재 state를 반환해 줍니다. 자세한 내용은 코드를 직접 살펴보겠습니다. react 공식문서에서는 state로직이 복잡해지면 리듀서의 사용, 커스텀 hook을 고려하라고 안내하고 있습니다. 아래에서는 state의 복잡한 상황을 정의해 보고 개선하는 과정을 살펴보겠습니다. 개선된 코드가 개선되지 않았다고 느낄수도 있습니다. 모든 상황에서 장단점이 존재하기 때문입니다. 정답을 하나로 규정하기 보다는 팀의 컨벤션..

React typescript 에서 dataset 이용하기 😢

필요한 데이터를 html의 data 속성을 이용하여 주로 담아놓곤 하였습니다. 이를 React with typescript에서 적용할 때 막혔던 부분에 대한 내용입니다. 위와 같이 사용하려 시도했었습니다. 하지만 계속 에러를 뱉어냈고 이를 이해하지 못했었습니다. 이유는 다음과 같습니다. event의 target이 document, element, window등의 요소가 될 수 있기 때문입니다. 그래서 아래와 같이 event의 target이 내가 정한 요소의 instance가 아니라면 early return을 하여 런타임에서 에러가 없을 수 있게 하였습니다. 위의 이미지속의 코드에서 e.target의 instance를 검사하여 div 요소가 아니면 함수를 탈출하게 하였습니다. 위와 같이 작성후 코드레벨상에..

React setState 🌱

리액트에서 setState는 비동기 동작인가요, 동기동작인가요? setState가 비동기 동작을 취했을 때 얻을 수 있는 이점은 무엇인가요? setState는 비동기 동작입니다. setState가 비동기로 동작을 하는 이유는 렌더링을 더 적게 하면서 화면에 최신값을 보여주기 위함입니다. useState의 state hook으로 살펴보겠습니다. import {useState} from 'react'; function Example() { const [count, setCount] = useState(0); function handleAlertClick() { setCount(1); setCount(2); setCount(3); } console.log('rerendered'); return ( You cl..

React.memo 🌱

아래와 같이 자식 컴포넌트를 React.memo로 감쌌을 때 props를 통해서 전달되어지는 함수에 useCallback을 사용한 경우와 사용하지 않은 경우에 차이가 있나요? function Parent(){ const handleClick = useCallback(() => { ... }, []); // (1) const handleClick = () =>{ ... } // (2) return } function Child({ onClick }) { return } export default React.memo(Child); => React.memo로 감싸게 되면 props로 전달받은 값이 변화하지 않으면 렌더링을 발생시키지 않습니다. useCallback을 사용하지 않은경우 부모 컴포넌트가 렌더링 될..

React useCallback, useMemo

useCallback, useMemo 둘다 메모이제이션을 활용하는 것입니다. 메모이제이션 이란 동일한 계산을 반복할때 이전에 계산한 값을 가지고 있다가 같은 계산일 경우 이미 계산된 값을 반환하는 것입니다. 재귀함수에서 주로 사용합니다. (피보나치 함수와 같은 예시) useCallback 메모이제이션된 콜백을 반환합니다. useCallback을 이용하면 의존성 배열의 값이 바뀌지 않는 이상 callback은 재정의 되지 않습니다. const callback = useCallback( () => { doSomething(a,b) }, [a, b], ) useCallback(fn, deps)는 useMemo(() => fn, deps)와 같습니다. useMemo 메모이제이션된 값을 반환합니다. 리액트에서는 ..