Web Frontend/React

이번 글에서는 React에서 새롭게 제시한 React 코드 작성에 대한 권장사항 9가지를 보고 그 중 새롭게 알게 된 몇가지 사실에 대해 정리해보려 합니다.1. 반복문에서 요소의 key를 지정해주는 경우에는 index 사용을 지양하자key는 list의 요소를 추적하기 위해 사용됩니다. 이때 index는 요소를 고유하게 식별하지 않으므로 사용하는 것이 좋지 않습니다// 🛑 WRONGreturn ( {items.map((item, index) => ( … ))} );// 🟢 RIGHT, item.id가 안정적인 고유한 식별자라고 가정return ( {items.map((item, index) => ( … ))} );key를 index로 지정하게 되면 배열..

이번 글에서는 최근에 우연히 공부하게 된 'IIFE'라는 꽤나 유용한 개념에 대해 이야기 하려고 합니다.꽤나 어렵지 않은 개념이니 한 번 공부해둔다면 여러모로 도움이 될 것 같습니다 :) What is 'IIFE'IIFE는 Immediately Invoked Function Expression의 약자로, 정의와 동시에 즉시 실행되는 JavaScript 함수를 의미합니다.  IIFE는 다음과 같은 형태를 가집니다.(function() { console.log("This is an IIFE");})(); IIFE에서는 '()()', 이 괄호 두개가 하는 역할을 아는 것이 중요합니다.첫번째 괄호는 ()로 감싸진 익명함수입니다. 이는 전역 스코프에서 불필요한 변수로 인해 일어나는 오염을 방지하고, IIFE..

function DummyFunc({isA}) { if (!isA) { return ; // or null } return Hi I am A;} React에서는 아무 것도 렌더링하지 않으려 할 때 이렇게 fragment()나 null을 반환합니다.이번 글에서는 이런 상황에서의 fragment와 null에 차이를 알아보겠습니다.Fragment fragment는 DOM 구조에 어떠한 영향도 주지 않는 DOM 요소를 생성하지 않는 컴포넌트입니다.이런 fragment는 태그는 최상위 태그로 감싸줘야 하는 React에서 요소들을 그룹화 할 때 사용합니다.function DummyFunc() { return ( Hello ? );}Nullnull을 반환하게 되면 아무것..

오늘은 프로젝트를 진행하며 알게 된 'Batching'이라는 기법에 대해 알아보려고 합니다. 이번 포스팅에서는 Batching의 개념과 이점을 살펴보겠습니다.Batching이란?'Batch'는 '일괄'이라는 뜻을 가지고 있습니다. 그렇다면 'Batching'이란 무엇일까요? Batching은 '일괄 처리'라는 의미를 가집니다. 이 일괄 처리를 React에 적용시켜보면, 여러 개의 state 업데이트를 하나의 리랜더링으로 묶어 처리하는 것을 말합니다. 좀 더 자세한 이해를 위해 간단한 예제를 살펴보겠습니다. const [number, setNumber] = useState(0);const numberControler = () => { setNumber((number) => number + 1); set..