WebFactory

이번 내용은 기초를 넘어 커스텀 훅(Custom Hooks)이나 성능 최적화(useMemo, useCallback) 등 중급 단계로 넘어가는 중요한 지점입니다. 리액트의 기초적인 Props와 State, 그리고 Effect를 넘어 오늘은 더 효율적인 코드를 작성하기 위한 내용입니다.1. Custom Hooks (나만의 훅 만들기)여러 컴포넌트에서 반복되는 로직(예: input 핸들링, API 호출, 스크롤 감지 등)을 하나의 함수로 분리하여 재사용하는 방법입니다.특징: 이름이 반드시 use로 시작해야 합니다.장점: 로직이 분리되어 컴포넌트 코드가 간결해지고, 유지보수가 쉬워집니다.JavaScript // useInput.js (예시)import { useState } from 'react';functi..

리액트를 배운 지 벌써 일주일입니다! 지금까지 컴포넌트를 만들고, State로 상태를 관리하고, Props로 데이터를 전달하는 법을 배웠습니다.하지만 프로젝트 규모가 커지면 필연적으로 "똑같은 로직을 여기저기서 복사 붙여넣기 하고 있네?"라는 고민에 빠지게 됩니다.오늘은 이 고민을 해결해 줄 리액트의 꽃, 커스텀 훅(Custom Hooks)을 심도 있게 파헤쳐 보겠습니다.1. 왜 커스텀 훅이 필요한가? (DRY 원칙)프로그래밍에는 DRY(Don't Repeat Yourself)라는 원칙이 있습니다. "똑같은 일을 두 번 하지 마라"는 뜻이죠.리액트 컴포넌트는 크게 두 부분으로 나뉩니다.UI 로직: HTML 태그를 어떻게 배치하고 스타일링할 것인가?비즈니스 로직: 데이터를 어떻게 가져오고, 상태를 어떻게 ..

리액트 공부 6일차입니다! 오늘은 사용자가 입력하는 데이터를 어떻게 관리하고, 리액트 방식이 아닌 실제 DOM 요소에 직접 접근해야 할 때는 어떻게 하는지 핵심을 정리해 보았습니다.1. 제어 컴포넌트 (Controlled Components)리액트에서는 , 같은 폼 요소의 값을 리액트의 State와 결합하여 관리합니다. 이를 '제어 컴포넌트'라고 부릅니다.동작 방식: 입력창의 value를 State에 연결하고, onChange 이벤트를 통해 사용자가 입력할 때마다 State를 업데이트합니다.장점: 입력값에 대한 실시간 유효성 검사나 데이터 가공이 매우 쉽습니다.JavaScript const [name, setName] = useState("");const handleChange = (e) => { s..

AI(Claude, GPT, Gemini)와 함께 코딩할 때, 우리가 전달하는 프롬프트는 단순한 '질문'이 아니라 '소프트웨어 설계서'가 되어야 합니다.AI는 텍스트의 구조를 통해 맥락을 파악하므로, 마크다운(Markdown)을 얼마나 전략적으로 설계하느냐에 따라 코드의 품질과 환각(Hallucination) 발생률이 결정됩니다.1. 왜 마크다운 설계가 '필수'인가?LLM(대규모 언어 모델)은 토큰(Token)의 관계를 계산하여 답변을 생성합니다. 마크다운의 구조적 기호(#, -, |, >)는 AI에게 각 텍스트 블록의 **'의미적 위계'**와 **'경계'**를 명확히 알려주는 이정표 역할을 합니다.가독성: 사람뿐만 아니라 AI도 구조화된 정보를 훨씬 정확하게 파악합니다.맥락 유지: 프로젝트 전체의 목적..

리액트에서 사용자가 입력하는 값(Input, Textarea 등)을 어떻게 관리할까요?HTML에서는 브라우저가 입력값을 들고 있지만, 리액트에서는 "모든 데이터는 리액트의 상태(State)가 관리한다"는 원칙을 따릅니다. 이를 제어 컴포넌트라고 합니다.1. 제어 컴포넌트(Controlled Component)란?입력창에 타이핑을 할 때마다 리액트의 state를 업데이트하고, 그 state를 다시 입력창의 value로 보여주는 방식입니다. 즉, 데이터의 신뢰 가능한 단일 출처(Single Source of Truth)를 리액트 상태로 두는 것입니다.2. 단일 입력창 관리하기가장 기본적인 방식은 onChange 이벤트와 useState를 조합하는 것입니다.JavaScript import { useState ..

리액트 개발에서 가장 많이 하는 작업 중 하나는 서버에서 가져온 데이터(배열)를 화면에 리스트 형태로 보여주는 것입니다.오늘은 자바스크립트의 배열 메서드인 map()과 filter()를 리액트에서 어떻게 활용하는지 정리해 보겠습니다.1. map() 메서드로 리스트 렌더링하기map()은 배열의 각 요소를 돌면서 새로운 형태(JSX)로 변환해 주는 역할을 합니다. 리액트에서는 반복되는 UI를 만들 때 필수적으로 사용됩니다.기본 사용법:JavaScript const users = ["Ryon", "Alice", "Bob"];function UserList() { return ( {users.map((user, index) => ( {user} ))} );}2. ..

MyBatis를 사용하면서 수만 건 이상의 데이터를 처리할 때 성능 저하를 겪어본 적 있으습니다.단순한 반복문(Loop)으로 insert나 update를 호출하면 매번 데이터베이스와 통신(Network Round-trip)이 발생하여 속도가 급격히 떨어집니다.이때 MyBatis의 ExecutorType 설정을 변경하는 것만으로도 상당한 성능 개선을 이룰 수 있습니다. 1. ExecutorType.REUSE: Statement 재사용REUSE 모드는 이름 그대로 PreparedStatement를 재사용하는 방식입니다.동작 원리: 동일한 SQL 문을 실행할 때, 매번 새로운 Statement 객체를 생성하지 않고 이전에 생성된 객체를 캐싱하여 다시 사용합니다.장점: SQL 파싱 비용과 Statement 생성..

리액트 공부 3일차입니다!오늘은 리액트 컴포넌트가 데이터를 다루는 두 가지 핵심 방식인 Props와 State에 대해 이야기 합니다.이 두 개념만 제대로 이해해도 리액트의 절반은 이해했다고 할 수 있습니다.1. Props (Properties)Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 '읽기 전용' 데이터입니다. 마치 함수의 매개변수(Parameter)와 비슷합니다.특징: 자식 컴포넌트 입장에서는 전달받은 Props를 직접 수정할 수 없습니다. (불변성)용도: 컴포넌트의 재사용성을 높이기 위해 외부에서 데이터를 주입할 때 사용합니다.JavaScript // 자식 컴포넌트function Greeting(props) { return 안녕하세요, {props.name}님!;}// 부모 컴포넌트에..

리액트는 자바스크립트의 최신 문법(ES6 이상)을 적극적으로 활용합니다.리액트 컴포넌트를 더 깔끔하고 효율적으로 작성하기 위해 반드시 알아야 할 세 가지 핵심 문법을 정리해 보겠습니다.1. 화살표 함수 (Arrow Function)리액트 컴포넌트를 정의하거나 이벤트 핸들러를 만들 때 기본적으로 사용되는 방식입니다. function 키워드 대신 =>를 사용하여 간결하게 표현할 수 있습니다.기본 문법:JavaScript // 일반 함수function add(a, b) { return a + b; }// 화살표 함수const add = (a, b) => a + b;특징: 한 줄로 작성할 경우 return과 { }를 생략할 수 있어 코드가 매우 짧아집니다. 리액트에서는 특히 함수형 컴포넌트를 선언할 때 표준처럼..

리액트(React) 공부를 시작하며 배운 핵심 내용을 정리해 봅니다.리액트는 현재 프론트엔드 개발에서 가장 인기 있는 라이브러리 중 하나로, 사용자 인터페이스(UI)를 구축하기 위해 사용됩니다.1. 리액트(React)란 무엇인가?리액트는 페이스북(현 Meta)에서 개발한 UI 라이브러리입니다. 단순히 화면을 그리는 것을 넘어, 복잡한 웹 애플리케이션의 상태를 효율적으로 관리하고 화면을 빠르게 업데이트하는 데 최적화되어 있습니다.컴포넌트(Component) 기반: UI를 독립적인 단위인 '컴포넌트'로 쪼개서 관리합니다. 마치 레고 블록을 조립하듯 화면을 구성할 수 있어 재사용성이 높습니다.Virtual DOM (가상 DOM): 실제 DOM을 직접 수정하는 대신, 메모리에 가상의 DOM을 두고 변경 사항만 ..