hooney.log

리액트 쓸 때 거의 무조건 쓰게 되는 훅 중 하나가 useEffect다. 처음에는 "컴포넌트 마운트 될 때 실행되는 함수 아니야?" 하고 쉽게 생각할 수 있는데, 막상 실제로 쓰다 보면 언제 호출되는지 헷갈리는 경우가 꽤 많다. 이번 글에서는 useEffect가 정확히 언제 호출되는지, 그리고 디펜던시 배열에 따라 어떻게 달라지는지 정리해봤다. ✅ useEffect 기본 구조useEffect(() => { // 실행할 코드}, [/* 의존성 배열 */]); 의존성 배열(dependency array)에 뭐가 들어가느냐에 따라서 실행 타이밍이 달라진다. 아래에서 하나씩 살펴볼게. 1️⃣ 의존성 배열이 없는 경우useEffect(() => { console.log('렌더링 이후마다 실행됨')..

React에서 컴포넌트를 만들다 보면 useEffect와 useLayoutEffect라는 두 훅(Hook)을 마주하게 된다. 이름은 비슷하지만 실행 타이밍과 용도, 그리고 렌더링 성능에 미치는 영향까지 완전히 다르다. 이번 포스팅에서는 이 둘의 차이점, 실행 순서, 사용 시 주의점, 그리고 실전 예제까지 한 번에 정리해본다. 📌 핵심 요약항목useEffectuseLayoutEffect실행 시점화면 그린 뒤 (비동기)화면 그리기 직전 (동기)렌더 차단 여부❌ 렌더 차단 안 함✅ 렌더 차단함목적API 호출, 로깅 등 비 UI 작업DOM 측정, 스타일 조정 등 UI 관련 작업성능 영향렌더링 후 실행 → 퍼포먼스에 유리렌더링 전에 실행 → 렌더 지연 가능성SSR(Server Side Rendering)S..

리액트를 쓰다 보면 "렌더링"이라는 말을 자주 접하게 된다. 하지만 리액트의 렌더링 과정은 단순히 return 하는 걸로 끝나는 게 아니다. React의 내부 렌더링은 두 단계, Render Phase와 Commit Phase로 나뉘며, 이 둘을 명확히 이해해야만 예상치 못한 사이드 이펙트나 성능 문제를 피할 수 있다. 이번 포스팅에서는 이 두 단계가 각각 무엇을 하는지, 왜 나뉘어 있는지, 개발 시 주의할 점은 무엇인지까지 깔끔하게 정리해본다. 🎬 리액트 렌더링 프로세스의 큰 그림리액트의 렌더링은 다음과 같이 이루어진다: - Render Phase (렌더 단계): 어떤 UI를 보여줄지 계산하는 단계 - Commit Phase (커밋 단계): 계산된 결과를 DOM에 실제 반영하는 단계 이 둘..

React로 리스트를 렌더링하다 보면 .map() 안에서 key 값을 필수로 지정하게 된다. 이때 초보자부터 숙련자까지 흔히 하는 실수가 바로 index를 key로 사용하는 것이다. // 흔히 하는 실수items.map((item, index) => {item.name}); 간단해 보이지만, 이 코드는 예기치 않은 버그의 원인이 된다. 이번 포스팅에서는 왜 index를 key로 쓰면 안 되는지, 그리고 어떨 때는 써도 되는지를 예제와 함께 정리해본다. 📌 key란 무엇인가? React는 리스트를 렌더링할 때 어떤 항목이 추가되었는지, 삭제되었는지, 혹은 순서가 바뀌었는지를 파악하기 위해 key라는 식별자를 사용한다. 이 key는 각 요소를 고유하게 식별해야 하고, 이를 기반으로 효율적으로 DOM..

🔷 들어가며 React를 사용하다 보면 라는 컴포넌트를 본 적이 있을 것이다. 보통 index.js 파일에서 루트 컴포넌트를 감쌀 때 사용한다. 하지만 정확히 어떤 역할을 하는지, 왜 사용하는지에 대해선 모호한 경우가 많다. 이번 글에서는 StrictMode가 실제로 어떤 일을 하는지, React 18에서 어떤 변화가 있었는지, 그리고 우리가 코드에서 어떻게 대응해야 하는지까지 정리해보려한다. ✅ StrictMode란?StrictMode는 React에서 잠재적인 문제를 사전에 감지할 수 있도록 도와주는 개발용 유틸리티 컴포넌트이다. - 개발 모드에서만 동작 - 실제 UI에는 아무 영향도 주지 않음 - 앱 전체 또는 일부분에만 적용 가능import React from 'react';import Rea..

제목 어그로 통했나요? GPT의 작품입니다.  간단하게 next & typescript로 프로젝트 생성 알아보겠습니다.   1. 프로젝트 생성 명령어npx create-next-app@latest --ts next-study  이렇게 하면 최신 버전의 nextjs와 typescript를 이용해서 프로젝트가 생성됩니다.    2. 취향 정하기 위 명령어를 입력하면 몇 가지 질문을 합니다.하나씩 알아보면- Would you like to use ESLint? ... No / YesESLint를 사용할거야? - YES! - Would you like to use Tailwind CSS? ... No / YesTailwind CSS 사용할거야? - YES! - Would you like your code ins..

웹뷰와 웹브라우저 간 통신 방법 알아보기!        1. 웹뷰 -> 웹- RNconst webviewRef = useRef(null);// React Native에서 데이터를 웹뷰로 보내는 함수const sendDataToWebView = (data) => { console.log(data); const serializedData = JSON.stringify(data); // 객체를 문자열로 직렬화 webviewRef.current.postMessage(serializedData);};  - Web// 웹뷰에서 React Native로부터 데이터를 받는 함수window.addEventListener("message", (event) => { const receivedData = JSON.pa..

타입스크립트 기초 1. 옵셔널 체이닝 옵셔널 체이닝을 사용하면 충접된 객체의 속성이 존재하는가에 관한 조건 분기를 간단하게 할 수 있다. interface User { name: string, social?: { facebook: boolean twitter: boolean } } let user: User user = { name: 'aaa', social: { facebook: true, twitter: true } } console.log(user.social?.facebook); // true user = { name: 'aaa' } console.log(user.social?.facebook); // undefined 2. None-Null 어서션 연산자 컴파일 옵션 --strictNullChe..

타입스크립트 기초 1. Enum 타입 Enum을 사용하면 이름이 붙은 상수 Set을 정의할 수있다. JS에는 없는데 유용하다. // 기존에 이렇게 사용 하던 것을 const aaa = { 'bbb': '1', 'ccc' : '2', } // 이렇게 사용 할 수 있다. enum Aaa = { BBB,CCC } const ddd: Aaa = Aaa.BBB; console.log(ddd); // 1 2. 제네릭 타입 제네릭은 클래스와 함수에 대해, 그 안에서 사용하는 타입을 추상화해 외부로부터 구체적인 타입을 지정할 수 있는 기능. // T는 클래스 안에서 사용하는 임시 타입 이름. class Aaa { private bbb: T[] = []; push(item: T) { this.bbb.push(item);..