4. useImperativeHandle부모 컴포넌트가 자식 컴포넌트에게 ref를 전달함으로써 자식 컴포넌트의 특정 함수나 값에 접근할 수 있도록 하는 훅이다.일반적으로 부모는 자식의 내부 기능을 직접 건드릴 수 없지만,useImperativeHandle을 사용하면 특정 기능만 공개할 수 있다.// Child.tsx// 리액트 19버전부터는 forwardRef 생략이 가능하다.export const ChildInput = forwardRef((props, ref) => { const inputRef = useRef(); // 부모에게 노출할 기능을 지정 useImperativeHandle(ref, () => ({ focusInput: () => { inputRef.current.foc..

1. useState아래 코드는 버튼을 눌렀을 때 의도대로 state가 변경되지 않는다."use client";import { useState } from "react";export default function Page() { const [, triggerRender] = useState(); let state = "hi"; const handleButtonClick = () => { state = "hello"; triggerRender(); }; return ( {state} Change State );} triggerRaender 함수를 이용하여 버튼을 누르면 리렌더링은 일어난다.그러나, 리렌더링이 일어난다는 것은 함수가 다시 실행되는 것이므로..

리액트에서의 렌더링 vs 브라우저에서의 렌더링 vs SSR처음 리액트를 공부했을 때 렌더링이라는 용어에 대해 매우 혼란스러웠다.내가 아는 렌더링은 브라우저에 단순히 UI 그리는 렌더링인데, 렌더링이라는 용어를 사용하는 곳마다 그 의미가 달랐다.그래서 이번 기회에 한 번 정리해보려 한다. 1. 브라우저에서의 렌더링화면에 UI를 그리는 과정 2. 리액트에서 렌더링컴포넌트의 props와 state를 기반으로 가상돔을 만들고, 재조정을 통해 변경된 state를 추적하고 UI에 반영하는 과정 3. SSR (Server Side Rendering)서버에서 HTML을 완성키는 과정 리액트에서 렌더링 과정 위에서 리액트에서 렌더링 정의를 컴포넌트의 props와 state를 기반으로 가상돔을 만들고, 재조정을 통해 변경..

1. JSX에 대한 고찰책에서 JSX는 기본적으로 JSXElement, JSXAttributes, JSXChildren, JSXStrings 라는 4가지 구조적 단위를 기반으로 구성되어 있고 각 의미들에 대해 자세히 설명하고 있다. 그런데, 그다지 중요한 내용들은 아닌 거 같다.JSX에 대해 몇 가지 알아야 될 중요한 점은 다음과 같다고 본다.브라우저는 JSX를 이해할 수 없으므로 반드시 바벨과 같은 도구를 통해 JS로 트랜스파일을 거쳐야 된다.JSX는 당연하게도 주로 리액트에서 사용하지만, 트랜스파일만 가능하다면 다른 곳에서도 사용될 수 있다.JSX는 자바스크립트 내부에서 표현하기 까다로웠던 XML 스타일의 트리 구문을 작성하는데 도움을 주는 문법적 설탕이다.특히 위의 3번에서 리액트가 왜 JSX를 선..

카카오페이 채용연계형 개발자 인턴십[Front-End 모집]에 지원하고, 서류 합격 후 코딩 테스트를 보게 되었습니다. 서류 전형에 대한 얘기와 간략하게 코딩 테스트 후기에 대해 남기고자 합니다. 제가 알기로는 카카오페이에서 정말 오랜만에 신입 개발자 모집 공고를 올린 것으로 알고 있습니다. 훗날, 카카오페이뿐만 아니라 카카오 계열 인턴에 지원하실 때 이 글이 조금이나마 도움이 되길 바랍니다. 1️⃣ 채용 절차이번 인턴십 모집의 채용 절차는 다음과 같습니다.서류 접수: 2/17 (월) ~ 2/23 (일)서류 합격자 발표: 2/26 (수)과제 전형: 3/1 (토) ~ 3/2 (일)과제 전형 합격자 발표: 3/5 (수)인터뷰: 3/7 (금) ~ 3/25 (화)최종 합격자 발표: 3/26 (수)입사: 4/7 ..

TanStack-Query는 비동기 데이터를 효율적으로 상태 관리 할 수 있도록 강력한 여러 기능을 제공하는 라이브러리다. 그 중 대표적인 훅 중 하나로 useQuery 가 있다. useQuery는 서버의 데이터를 조회하는 훅으로, GET 요청에 사용된다. 이번 글에서는 서버의 데이터를 추가, 삭제 등 조작하는 훅인 useMutation 에 대해서 알아본다.mutation의 사전적 정의는 변경, 변이이다. 따라서, useMutation 은 흔히 POST, DELETE, PUT 등 서버의 데이터를 변경하는 요청에 사용된다. 또한, 해당 훅을 이용하면 낙관적 업데이트를 손쉽게 구현할 수 있다. 직접 서버를 생성하고 todo 앱을 만들어 하나하나 살펴보자. 1️⃣ 프로젝트 생성전체 디렉토리 구조는 다음과 같다..

네이버 부스트캠프 수료 후, 1월까지 리팩토링 기간을 거치고 현재 취준에 들어갔습니다. 개인적으로 희망하는 기업들이 아직 공고가 열리지 않아, 이 기간 동안 실무적 역량을 키워보면 어떨까 싶어서 몇몇 기업에 인턴으로 지원을 하였습니다. 그 중 하나가 넛지헬스케어고 서류전형 통과 후 코딩 테스트를 보게 되었습니다. 참고로, 넛지헬스케어는 캐시워크라는 서비스를 운영하는 회사입니다. 캐시워크 - 돈버는 만보기 | 캐시워크 - 돈버는 만보기걷기만 해도 돈이 되는 신기한 만보기 캐시워크를 사용해보세요!cashwalk.com 넛지헬스케어 코딩 테스트 후기에 관해 검색되는 글이 전혀 없어서 어떤 식으로 출제되는지 전혀 감을 잡지 못한 채 테스트에 임했습니다.훗날 넛지헬스케어 코딩 테스트에 응시하시는 분들께 도움을 드..

TanStack-Query 는 다양한 기능을 제공하며, 그 중 무한스크롤 기능도 제공한다. TanStack-Query에서 제공하는 useInfinityQuery 훅을 사용하면 쉽게 무한스크롤 기능을 구현할 수 있다.이번 글에서는 TanStack-Query를 이용하여 무한스크롤을 구현하는 과정을 정리해보겠다.  1️⃣ Mock Data외부 API나 서버를 사용하기 번거로우니 클라이언트 자체에서 Mock Data 를 만들어 사용하자.// mockData.jsconst mockData = Array.from({ length: 100 }, (_, i) => i + 1).map( (num) => `${num} 데이터입니다.`);export function fetchMockData(pageParam) { con..

대게, 프론트엔드에서 상태관리 하는 데이터를 두 가지로 구분할 수 있다.1. 일반 데이터특징:앱 내부에서 바로 생성되거나 사용되는 데이터.사용자 입력, UI 상태(모달 열림/닫힘, 탭 선택 등), 선택된 아이템 등.비교적 단순하며, 비동기 작업이 필요하지 않음.useState, useReducer 훅을 이용하여 상태 관리2. 비동기 데이터특징:외부 API, 데이터베이스 등에서 가져오거나 저장하는 데이터.일반적으로 서버와 통신해야 하므로 비동기 작업(Promise, async/await)이 필요함.단순할 경우 useEffect, fetch 를 통하여 상태 관리복잡하면 SWR, TanStack Query 등 라이브러리를 이용하여 상태 관리프론트엔드에서 외부 API를 사용하여 데이터를 받아오는 경우는 일반적이..