반응형 분류 전체보기68 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 86 (에러 바운더리, 상태 유지와 key, 캡쳐 이벤트 리스너, 복잡한 상태 관리) 목차에러 바운더리상태 유지와 key캡쳐 이벤트 리스너복잡한 상태 관리오늘 하루를 돌아보며 에러 바운더리리액트의 클래스 컴포넌트는 라이프사이클 메서드를 제공한다. 오류 처리에 사용되는 라이프사이클은 다음과 같다.getDerivedStateFromError: 자손 컴포넌트 오류 발생할 때 호출(error 제공)componentDidCatch: 자손 컴포넌트 오류 발생할 때 호출(error, info 제공) 오류 경계, 즉 에러 바운더리(Error Boundary)는 오류가 발생해도 앱이 멈추지 않고 대체 UI(에러 메시지 등)를 보여주기 위해 사용한다. 리액트 앱에서 코드에 오류가 나면 전체 앱이 안 보일 수 있기 때문이다. 변수 이름을 잘못 쓰거나, 예상치 못한 에러가 나면 앱 전체가 멈춘다. 그.. 2025. 9. 10. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 85 (포털(차원 이동), 참조 객체 전달) 목차포털(차원 이동)참조 객체 전달오늘 하루를 돌아보며 포털(차원 이동)포털(Portal)을 사용하면 애플리케이션 영역을 벗어나 특정 위치에 컴포넌트를 렌더링할 수 있다. 포털을 통해 컴포넌트가 어느 위치에든 렌더링될 수 있으면서 다른 리액트 컴포넌트와 동일하게 작동한다. 렌도링된 컴포넌트가 DOM의 어느 위치에 있더라도 리액트 컴포넌트 트리에 포함되기 때문이다. 즉, 원하는 DOM 위치에 컴포넌트를 자유롭게 렌더링할 수 있다는 뜻이다. 포털을 사용하려면 우선 포털 전용으로 사용할 DOM 요소를 만들어야 한다. 에 직접 추가하는 것보다는 별도로 요소를 만들어서 그 안에 렌더링하는 것이 좋다. 그렇게 하면 코드 디버깅도 쉬워지고, 하위에 여러 요소가 뒤섞여 혼란스러워지는 것도 막을 수 있기 때문이다.Re.. 2025. 9. 9. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 83 (폼(Form) 컨트롤, 입력 컨트롤, 단방향 데이터 흐름, 폼 라이브러리 활용) 목차폼(Form) 컨트롤입력 컨트롤: 제어된 vs. 제어되지 않은단방향 데이터 흐름폼 라이브러리 활용오늘 하루를 돌아보며 폼(Form) 컨트롤리액트에서 폼을 올바르게 다루는 것은 사용자 경험(UX)과 접근성을 높이는 데 매우 중요하다. HTML에서 요소는 Enter 키나 제출 버튼을 누르면 페이지를 새로고침하는 기본 작동을 가지고 있다. 하지만 리액트에서는 이벤트 핸들러에서 e.preventDefault()를 호출하여 이 기본 동작을 막고, 자바스크립트를 통해 폼 제출을 제어하는 것이 일반적이다. 폼 제출은 onClick 이벤트보다는 onSubmit 이벤트를 사용하는 것이 좋다. onSubmit은 버튼 클릭뿐만 아니라 Enter 키 입력까지 모두 처리하기 때문에 더 안전하고 편리하다. 입력 컨트롤: .. 2025. 9. 4. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 82 (useMemo 훅, useCallback 훅, 사용자 정의 훅 함수) 목차useMemo 훅useCallback 훅사용자 정의 훅 함수오늘 하루를 돌아보며 프론트엔드 개발에서 성능을 최적화하고 코드를 효율적으로 관리하는 것은 매우 중요하다. 리액트는 이러한 문제를 해결하기 위해 useMemo, useCallback과 같은 훅과 사용자 정의 훅(커스텀 훅 custom hooks)이라는 강력한 기능을 제공한다. useMemo 훅useMemo는 메모이제이션(Memoization)을 활용하여 불필요한 반복 계산을 줄여주는 훅이다. 메모이제이션은 한 번 계산한 결과를 저장해 두었다가 동일한 입력이 들어오면 재계산 없이 저장된 값을 반환하는 기법이다. 컴포넌트가 리렌더링될 때마다 반복되는 대규모 데이터 필터링, 복잡한 수학 연산 등 비용이 많이 드는 계산을 최적화하기 위해 useM.. 2025. 9. 2. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 81 (리액트에서 DOM 참조 다루기, 클래스 컴포넌트의 Ref) 목차리액트에서 DOM 참조 다루기클래스 컴포넌트의 Ref오늘 하루를 돌아보며 리액트에서 DOM 참조 다루기리액트는 가상 DOM을 사용해 효율적으로 UI를 관리하지만, 특정 상황에서는 실제 DOM 요소에 직접 접근해야 한다. 이럴 때 useRef 훅을 사용한다. DOM 참조의 주요 사용 사례는 다음과 같다.초점/스크롤 제어: 특정 인풋 요소에 자동으로 초점을 맞추거나, 특정 섹션으로 스크롤을 이동시킬 때 사용한다.외부 라이브러리 연동: Canvas Confetti, Vanilla Tilt, GSAP 등 DOM을 직접 조작하는 외부 라이브러리와 함께 사용할 때 필요하다.미디어 제어: , 와 같은 HTML 미디어 요소를 재생하거나 일시 정지하는 등 직접 제어할 때 사용한다.Canvas 제어: 요소에 그림을 .. 2025. 9. 1. 이전 1 2 3 4 ··· 14 다음 반응형
