React

React의 list에서 key prop을 사용하는 이유 (이점)

React.createElement() React에서 요소를 생성하는 함수 API : createElement(type, props, ...children) React와 순수 JavaScript의 DOM요소를 생성하는 방법을 비교해보자. React를 사용하지 않고

명령형 UI vs 선언형 UI React는 명령형이 아닌 선언형 방식으로 UI를 조작한다. 명령형과 선언형은 어떻게 다른가? 명령형 프로그래밍 (Imperative Programming) 기존의 JavaScript만으로 UI를 변경하는 것(직접 DOM 조작)은 명령형의 방식이다. UI를 조작하기 위해서는 발생한 상황에 따라 정확한 지침을 작성해야만 한다....

useRef 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook ref는 애니메이션에서 특히 많이 사용하니 알아두자! 사용법 기본적인 사용 형식은 위와 같다. 이런 식으로, 렌더링에 사용되지 않지만 form 제출이나 값을 계산하는 등의 작업에 사용할 수 있다. > ### 주의할 점 렌더링 중에는 ref.current를 쓰거나 읽지 마세...

React App의 성능 향상 App을 만들 때, 성능 향상은 매우 중요한 부분이다. 사소한 부분들이 쌓여서 App의 전체적인 속도가 느려지고, 그렇게 느려진 서비스는 사용자들에게 불편함과 불만을 야기하고, 서비스를 사용하지 않게 되는 큰 이유가 될 수 있다. 그렇다면 React를 사용해 App을 만들 때, 성능 향상을 위해 어떤 부분을 신경써야 할까? ...

함수형 프로그래밍에서는 함수의 실행 결과를 예측가능하게 만드는 것이 중요하다. 결과를 예측 가능하다면 버그의 근본적인 원인인 개발자의 기대와 다르게 동작하는 상황을 방지(또는 디버깅)할 수 있다. 순수 함수와 부수 효과 순수 함수 자신의 일에 집중한다. 함수가 호출되기 전에 존재했던 어떤 객체나 변수는 변경하지 않는다. (부수효과가 없음) 같은 입력이 ...

React의 렌더링 흐름 React 컴포넌트는 아래의 흐름을 따라 렌더링된다. Render Trigger Rendering DOM Commit Painting Render Trigger 수행 주체: react 컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있다. 컴포넌트의 초기 렌더링인 경우 컴포넌트의 state가 업데이트된 경우 (+ props...

Splash Screen 애플리케이션 실행 시 페이지의 컨텐츠가 로딩되기까지 일시적으로 보여주는 화면을 말한다. 모바일 애플리케이션의 경우 로고가 중앙에 박혀있는 화면을 가장 많이 사용한다. 구현하기 아래의 gif를 보면, 앱 실행 시 splash-screen 요소가 렌더링되고 사라지면서 HTML 요소도 함께 변경되는 것을 볼 수 있다. 추가로, spla...

useContext context: 맥락 React에서 제공하는 Context API는 말그대로 한 컴포넌트가 어떤 맥락에 포함되는 것이라고 말할 수 있다. useState를 사용해 상태를 관리할 때, 그 상태를 자식 컴포넌트에 전달하면, 그 깊이가 깊어질 때 props drilling이 일어나 불편한 상황이 되어버린다. 그런 props drilling ...

user 정보를 localStorage에 저장하면 안된다? AWS, Azure 등의 서비스들은 브라우저의 localStorage에 인증 사용자 정보를 보관한다. 여러 서비스가 localStorage에 데이터를 저장함에도 불구하고, localStorage의 보안성 문제를 이야기하는 사람들도 있다. localStorage에 저장된 데이터는 브라우저 개발자 도구...

SEO(Seach Engine Optimization) 검색 엔진 최적화 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정 검색 순위 개선이라고도 함 react-helmet-async React 애플리케이션에서 동적으로 HTML 문서의 `` 내용을 관리할 수 있

Loading (Spinner) 컴포넌트 Loading Spinner: 앱에서 콘텐츠나 데이터가 로드되고 있을 때 사용자에게 그 상태를 시각적으로 알려주는 애니메이션 서버에서 데이터를 불러온다거나, JavaScript 파일을 다운로드 받는 시간동안 아무 것도 보이지 않으면, 사용자는 페이지가 로드되고 있는지 아무 것도 없는 페이지인지 알 수가 없다. 그래...

useEffect 외부 시스템과 컴포넌트를 동기화하는 Hook 리렌더링(또는 최초 마운트)이 발생할 때, dependencies의 값들이 변했는지 (Object.is로) 비교하고, 값이 변했다면 setup 함수를 실행한다. dependencies가 없다면 리렌더링될

useReducer Reducer? React의 Reducer API에서 "Reducer"는 무슨 뜻일까? 이 "Reducer"라는 이름은 리듀서 패턴(reducer pattern)이라는 디자인 패턴에서 유래했으며, Redux 같은 상태 관리 라이브러리에서 사용된다. Reducer Pattern 리듀서 패턴이란, 현재 상태(state)와 액션(actio...

라이브러리 의존도를 줄이면서도, 체계를 한 번 이해하고 나면 깔끔하게 상태를 관리할 수 있는 방법을 알게 되어 정리해보았다. 전역 상태 관리? 많은 사람들이 전역 상태를 관리할 때, Redux, Zustand같은 라이브러리를 사용해 비교적 쉽게 코드를 작성하고, 나도 Zustand가 간편해서 개인적으로 좋아하는 라이브러리이다. 하지만, useReducer...

TanStack Router? React Query(현 TanStack Query)로 유명한 Tanner Linsley가 개발한 헤드리스(Headless) 라우팅 라이브러리 > 헤드리스(Headless): UI나 특정 프레임워크에 종속되지 않고, 핵심 라우팅 로직만 제공하여 개발자가 자유롭게 UI와 통합할 수 있게 함 현재 React를 주요 타겟으로 하...

JavaScript 내장함수 alert() JavaScript에는 기본 alert()라는 내장함수가 있다. 아래와 같이 원하는 시점에 사용자에게 메세지를 전달하기 위해 사용한다. alert 예시 문제 디자인에 욕심이 있지 않은 이상 alert함수를 사용하면 될텐데,

alert()대신 customAlert() 만들기https://velog.io/@juwon98/customAlert위 포스팅에 이어지는 내용입니다JavaScript 내장 함수 중prompt()는 텍스트를 입력받기 위한 창을 띄우는 함수,confirm()은 어떤

Focus Trap 모달창이 열렸을 때와 같이 특정 상황에 사용자가 키보드 조작(Tab키 등)을 통해 특정 구역 안에서만 이동할 수 있도록 focus를 가두는 것 일반적으로 모달창, 팝업, 드롭다운 메뉴 등 특정 상호작용이 필요한 인터페이스에서 사용된다. Focus