반응형 분류 전체보기47 Immer Immer는 React에서 상태(state)를 업데이트할 때마치 state.user.name = ... 처럼 직접 수정(mutate)하는 코드처럼 작성해도,라이브러리 내부에서 안전한 불변성(immutability) 을 유지한 새로운 state를 만들어주는 도구다.React는 상태 변경을 “값이 바뀌었다”가 아니라 참조(reference)가 바뀌었는지로 감지한다. const [user, setUser] = useState({ name: 'Josh', profile: { age: 30 },})function updateAge() { user.profile.age = 31 // ❌ 원본 수정 setUser(user) // 참조 동일} 문제점user.profile.age 값.. 2026. 2. 11. useActionState, useEffectEvent 1. useActionState란?폼 액션(Form Action)의 결과에 따라 상태를 업데이트하고, 비동기 처리 중인 상태(Pending)까지 한 번에 관리할 수 있게 해주는 React 19의 새로운 훅입니다.핵심 역할: "서버에 데이터를 보낸 뒤, 그 결과를 화면에 보여주기까지" 필요한 모든 상태 관리를 자동화합니다.1-1. 기본 문법const [state, formAction, isPending] = useActionState(fn, initialState, permalink?);fn (Action 함수): 폼이 제출될 때 호출될 함수입니다. 이 함수는 첫 번째 인자로 **이전 상태(previousState)**를, 두 번째 인자로 **폼 데이터(formData)**를 받습니다.initialStat.. 2025. 12. 15. ref - DOM 직접 접근 장치 ref를 사용해야될때특정 요소에 포커스 주기스크롤 위치 조작canvas, video 같은 DOM API 사용외부 라이브러리(Swiper, Chart.js 등) 사용시 1. DOM 요소 참조용 refimport { useRef } from 'react';function MyComponent() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( 포커스 );}inputRef.current 는 랜더링이 발생되도 유지가되며컴포넌트가 처음 랜더링된 이후에 DOM이 생성되고 난뒤에 참조된다.current 안에 실제 DOM노드가 들어있다. 2. .. 2025. 11. 25. 이벤트 핸들링 리액트에서의 이벤트 핸들링은 기존의 HTML 이벤트를 기반으로 만들어졌기 때문에 HTML 이벤트와 명칭과 사용법이 유사하다.리액트에서의 이벤트명칭은 camleCase로 되어있다. onclick -> onClick 리액트의 이벤트 핸들러는 이벤트 객체를 따로 지정해주지 않아도 인자로 전달해준다.const handleClick = (event) => { console.log(event.target);};handleClick(e)}>Click meClick me 이벤트의 흐름 1. 캡처링 단계 (Capturing Phase)이벤트가 발생하면 가장 바깥요소 부터 시작하게 된다.window → document → html → body → ... → (이벤트 타깃 요소) → ... → body → html → .. 2025. 11. 17. 컴포넌트 함수형 컴포넌트 VS 클래스형 컴포넌트 리액트 공식 메뉴얼에서는 함수형 컴포넌트 사용을 권장, 현재 함수형이 표준, 클래스형은 레거시로 본다.리액트 18버전 이후에는 hook을 본격적으로 지원함으로써 함수형 컴포넌트 + hooks가 성능 최적화에 더 유리함이후 버전에서도 계속 hook을 고도화 하는 방향으로 업데이트 1. 선언 방식의 차이 함수형 컴포넌트function Hello() { return Hello;} JSX 반환 → 컴포넌트this 없음 클래스형 컴포넌트class Hello extends React.Component { render() { return Hello; }} ES6 class 문법 사용반드시 render() 필요this 바인딩 필요해서 문법이 더 복잡함 2. 상태 .. 2025. 11. 17. render(), virtual DOM, JSX render()컴포넌트의 UI/동작을 최종적으로 화면에 정의하는 함수트리형태로 중첩되어있는 컴포넌트를 역순으로 (최하위->최상위) 컴포넌트를 재귀하며 맨 마지막 최상위 컴포넌트까지 랜더링작업 이후에는 해석한 정보들 마크업/DOM/페인팅(브라우저 랜더링 동작) 작업을 거치며 최종적으로 화면에 출력된다.랜더함수가 호출되는 시점state/props 가 변경될 때부모컴포넌트가 다시 랜더링될 때 virtual DOM랜더함수는 이전의 DOM트리 형태에서 변경이 있는 부분만 비교해서 가상의DOM을 실제의 DOM으로 반영하기위한 추상단계→초기 비용 높음, 업데이트되는 부분이 적을수록 성능적으로 유리함 리액트의 슬로건지속적으로 데이터가 변화하는 대규모 어플리케이션 구축하기 ≠ 변화가 적은 소규모 어플리케이션(효율X)정.. 2025. 11. 10. 자바스크립트의 메모리 관리 (가비지 컬렉션) 자바스크립트에서는 개발자가 메모리를 직접적으로 해제하지 않고도 자동으로 메모리를 관리해 주는 언어이다.메모리 관리는 크게 다음 두 가지로 나눌 수 있다.1. 메모리 할당 (Memory Allocation)메모리 할당은 단순하게 변수를 선언하고 값을 할당할 때 발생된다. 2. 가비지 컬렉션 (Garbage Collection)가비지 컬렉션은 할당받은 메모리가 더 이상 사용하지 않을 때 메모리에서 해제하여 메모리 누수를 방지하는 과정이다.자바스크립트에서는 Mark-and-Sweep 알고리즘을 사용하여 가비지 컬렉션을 수행한다. 마킹 단계: 모든 객체가 "도달 가능"(reachable)한지 여부를 결정합니다. 도달 가능한 객체는 루트(root) 객체(예: 전역 객체, 스택에 있는 변수들)에서 시작하여 참조를 .. 2024. 6. 9. xcodebuild: WARNING: Using the first of multiple matching destinations: React Native ios 빌드실행중 해당에러 발생xcode File > project Settings... 프로젝트 경로로 설정해주었다 2024. 2. 17. 가민 에픽스 gen2 후기(일상편) with 피닉스7x 목차 서론 피닉스7x의 단점 피닉스7x의 장점 워치 페이스 스트랩 알림 충전 마무리 서론 기존에 갤럭시 워치 액티브 2 44mm 블루투스 스테인리스 모델을 3년 조금 넘게 사용하다가, 운동용으로 사용하기에는 배터리가 너무 약해져서 이번에 가민 모델로 갈아타게 되었다..! 19년도에 액티브2 알루미늄 모델이 직접 차 보니 장난감 같은 느낌이어서.. 스테인리스 모델로 바로 갈아탔었다.. (워치 페이스가 그립다..) 가민 제품을 유튜브나 카페에서 찾아보고, 매장에서 실물까지 확인한 후 배터리 깡패라고 불리는 피닉스 7x와 엔드류2 에 눈길이 갔었다.(AOD 기준으로 15일, 태양광 충전까지 하면 +@) 두 모델 가격대가 만만치 않아서... 상태 좋은 피닉스 7x를 입양하게 됐다! 결론부터 말하자면 날씨가 너무.. 2023. 1. 29. [React] 사진첩 게시판 저번에 작업했던 vue2_photo_board와 컴포넌트 구조, 스타일링, 변수, 함수를 최대한 동을하게 구성하여 해서 진행하였다. 목차 1. 환경 2. 반응형 화면 3. 기능 4. 프로젝트 구조 5. 컴포넌트 구조 6. 통신과 랜더링 7. 전체소스 1. 환경 node v18.12.1 react v18 (useContext, react-query) 2. 반응형 화면 3. 기능 1. 사진 상세보기 (모달창 활성화) 2. 페이징 처리 3. 상세페이지 닫기( 모달창 비활성화) 4. 프로젝트 구조 src ⌞ api ⌞ board.js : context방식의 api 인스턴스 ⌞ boardClient.js : axios로 직접적인 통신 ⌞ components ⌞ layout ⌞ImageLoading.jsx : 이미.. 2023. 1. 4. 이전 1 2 3 4 5 다음 반응형
