React 실무

Why? 앞선 포스트를 살펴봤듯이 react의 렌더링 로직은 각각의 분리된 기능 덕분에 이미 충분히 빠르다. 대부분의 서비스는 최적화를 깊이 고려하지 않아도 문제없이 잘 작동한다. 하지만 렌더링 최적화의 필요성은 웹 애플리케이션의 복잡성이 증가하면서 중요한 문제로 대

웹 페이지에서 사용자가 스크롤을 내릴 때 새로운 콘텐츠를 자동으로 로드하는 기술을 뜻한다. 이 기술은 사용자 경험을 향상시키고 페이지 네비게이션을 더 원활하게 만들 수 있다. 기존의 페이지네이션과 같이 하단의 숫자로 이루어진 네비게이션은 데이터를 로드하려면 일일이 버

일반적인 스크롤 방식으로 하는 인피니티 스크롤 방법은 element의 scrollHeight, clientHeight, offsetHeight, scrollTop을 사용한다. scrollHeight 엘리먼트의 총 높이를 나타내며 바깥으로 넘쳐서 보이지 않는 콘텐츠도

Intersection Observer는 웹 페이지에서 요소의 교차(intersection) 상태를 감지하는 브라우저 API이다. 이를 통해 뷰포트나 다른 요소와의 교차 여부를 비동기적으로 감지하고 처리할 수 있다. 이 기능을 활용하면 스크롤 이벤트를 사용하지 않고도

onKeyPress react에서의 onKeyPress 이벤트는 컴포넌트에서 키보드 키가 눌러졌을 때 발생하는 이벤트 핸들러이다. 이 이벤트는 키를 누를 때마다 발생하며, 눌린 키에 해당하는 작업을 수행하거나 상태를 업데이트하는 데에 사용된다. deprecated?

[버전 6.15.0] React Router React Router는 리덕스와 더불어 react 커뮤니티에서 가장 인기있는 클라이언트 라우팅 (client-side routing) 패키지이다. 클라이언트 라우팅이란 SPA의 대표적인 기능 중 하나로, URL을 서버에

등장 배경 react router를 사용해 라우트 요소를 설정하면서, 웹 에플리케이션에 가장 연관된 레이아웃은 바로 메뉴(링크)를 나타내는 네비게이션 레이아웃일 것이다. 이러한 네비게이션 레이아웃을 라우터에 작성할 때, 네비게이션이 필요한 페이지도 있고 필요 없는 페이

보통의 웹 페이지에서는 현재 활성화된 페이지에 네비게이션 메뉴의 시각적 효과를 준다. 그 이유는 사용자 경험을 향상시키기 위해서입니다. 이는 사용자가 웹 사이트를 더 편리하게 탐색하고, 어떤 페이지에 위치해 있는지 더 잘 이해할 수 있도록 도와준다. 이러한 기능은 예전

이 포스트에서는 컴포넌트 개발 및 상태 관리 등에서 유용하게 사용될 수 있는 reaet 전용 타입들을 소개해보겠다. React.FC 함수형 컴포넌트를 정의할 때 사용하는 타입이다. FunctionComponent의 줄임말이다. JSX.Element JSX 타입을 명

useTransition() 훅 useTransition()은 react 18버전에서 도입된 새로운 훅이다. 이 훅은 UI 업데이트를 부드럽게 처리하고 사용자 경험을 향상시키기 위해 사용된다. 이 훅을 사용하여 특정 상태 업데이트의 우선순위가 더 낮다는 것을 react

일반적인 html의 form은 사용자로부터 데이터를 입력받고, 데이터를 전송할 GET / POST 메소드 등을 설정한다. 그 후 action 속성에는 폼 데이터를 전송한 뒤 전환할 화면의 URL을 설정하는 방식으로 사용한다. 하지만 react와 같은 SPA 방식 프런트

우리가 자주 사용하는 useEffect() 훅 말고도 react는 useLayoutEffect() 라는 훅을 제공한다. 이 훅은 useEffect()와 동일하게 컴포넌트의 마운트 이후 실행된다는 점은 비슷하다. 차이점은 useEffect()는 비동기적으로 실행되고,

앞서 react 기본 시리즈에서 살펴봤던 useRef()의 기능을 조금 더 구체적으로 파해쳐보자. 이 포스트를 읽기전 한번 위의 포스트에 다녀오는 것을 권장한다. 모든 react 컴포넌트는 reference의 앞글자를 딴 ref 속성을 제공한다. 그런데 ref 속성값

React.PropsWithChildren PropsWithChildren은 React 라이브러리의 TypeScript 타입 중 하나이다. 이 타입은 컴포넌트의 속성(props)을 정의할 때 사용되며, 해당 컴포넌트가 자식 컴포넌트를 가질 수 있을 때 유용하게 활용됩

모든 HTMLElement 상속 요소는 draggable이라는 boolean 타입 속성을 제공한다. 만약 draggable속성을 적용하지 않고 드래그했을 때는 일반적으로 다음과 같이 된다. 이제 draggable 요소를 다음과 같이 적용해보자. 엘리먼트 속성의 dra

state의 setState가 어떤 함수 내부에서 2개 이상 실행될 경우, react 컴포넌트의 업데이트는 일괄적으로 한번에 모두 처리한다. 따라서 UI 업데이트는 한번만 처리한다. 하지만 경우에 따라서, 일괄처리 말고 하나씩 업데이트 하게 해주는 방법도 있다. 바로

일반적으로 react를 작업할 때, 미디어쿼리를 통한 반응형 디자인은 css 파일 혹은 tailwind css를 통해 작업하는 경우가 대부분이다. 하지만, 특정 상황에서 자바스크립트 혹은 react 컴포넌트 내에서 확인해야하는 상황이 있다. 예를 들어, 브라우저의 크기

배경 보통의 웹 사이트에서는 로그인을 진행해야 웹 사이트의 주요 서비스를 이용할 수 있다. 보안과 식별을 위해, 해당 유저의 개인정보를 바탕으로한 서비스가 필요할 때, 유저 인증 구현이 필요하다. 보통 홈 페이지, 로그인 페이지, 회원 가입 페이지 처럼 누구든 접속이

// eslint-disable-next-line 를 하면 useEffect()의 dependancy array의 경고문등을 지워줄 수 있다.

Create React App은 React 애플리케이션을 쉽게 만들 수 있도록 도와주는 공식적인 툴이다. 다음과 같이 사용해서 React App 의 초기화를 도와준다.이를 활용하면 개발자들이 React 앱을 시작할 때 초기 설정과 번거로운 작업을 최소화해준다. 이 도구

관리자 페이지같은 경우에는 초기 리엑트부터 로드할 필요가 없다. 때문에 lazy효과를 적용하여 나중에 접속할 때 로드할 수 있도록 해줄 수 있다