반응형 전체 글74 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 81 (리액트에서 DOM 참조 다루기, 클래스 컴포넌트의 Ref) 목차리액트에서 DOM 참조 다루기클래스 컴포넌트의 Ref오늘 하루를 돌아보며 리액트에서 DOM 참조 다루기리액트는 가상 DOM을 사용해 효율적으로 UI를 관리하지만, 특정 상황에서는 실제 DOM 요소에 직접 접근해야 한다. 이럴 때 useRef 훅을 사용한다. DOM 참조의 주요 사용 사례는 다음과 같다.초점/스크롤 제어: 특정 인풋 요소에 자동으로 초점을 맞추거나, 특정 섹션으로 스크롤을 이동시킬 때 사용한다.외부 라이브러리 연동: Canvas Confetti, Vanilla Tilt, GSAP 등 DOM을 직접 조작하는 외부 라이브러리와 함께 사용할 때 필요하다.미디어 제어: , 와 같은 HTML 미디어 요소를 재생하거나 일시 정지하는 등 직접 제어할 때 사용한다.Canvas 제어: 요소에 그림을 .. 2025. 9. 1. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 80 (리액트 훅의 규칙, 값 참조(Ref), DOM 참조(Ref)) 목차리액트 훅의 규칙값 참조(Ref)DOM 참조(Ref)오늘 하루를 돌아보며 리액트 훅의 규칙리액트에서 훅은 함수 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있게 해주는 함수다. 하지만 올바르게 사용하기 위해 반드시 지켜야 할 규칙이 있다. 함수 컴포넌트 안에서만 사용리액트 훅 함수는 함수 컴포넌트의 본문 안에서만 사용할 수 있다. 여러 훅 함수를 조합해 만드는 함수인 커스텀 훅 내부에서도 사용할 수 있지만, 클래스 컴포넌트나 일반 함수, 컴포넌트 외부에서는 사용할 수 없다.import { useState, useEffect } from 'react'export default function App() { const [count, setCount] = useState(0) // ✅ useEf.. 2025. 8. 29. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 79 (개발자 도구 활용, 리액트 프래그먼트, 안전하게 HTML 렌더링) 목차개발자 도구 활용리액트 프래그먼트안전하게 HTML 렌더링오늘 하루를 돌아보며 개발자 도구 활용리액트 개발자 도구(React DevTools)를 사용하면 컴포넌트 검사 및 데이터(state.props)를 편집할 수 있다. 리액트 앱의 성능 문제를 진단하고 분석할 수도 있다. 리액트 개발자 도구는 Chrome 확장 프로그램을 다운받아 사용한다. 리액트 개발자 도구의 주요 기능과 사용법은 다음과 같다.컴포넌트 트리 확인: 현재 페이지에 렌더링된 모든 React 컴포넌트의 구조를 트리 형태로 볼 수 있다.상태, 속성 확인 및 수정: 각 컴포넌트를 클릭하면 오른쪽에서 해당 컴포넌트의 props와 state 값을 볼 수 있다. 값을 직접 수정하면 화면에 바로 반영된다. (테스트/디버깅에 유용)훅(hooks) 값.. 2025. 8. 28. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 78 (엄격 모드로 문제 검토, 데이터 가져오기) 목차엄격 모드(Strict Mode)로 문제 검토데이터 가져오기(Data Fetching)오늘 하루를 돌아보며 엄격 모드(Strict Mode)로 문제 검토엄격 모드(Strict Mode)는 개발 중에 잠재적인 문제를 찾기 위한 리액트의 특별한 도구다. 이 모드는 실제 배포 환경에는 영향을 주지 않고, 오직 개발 환경에서만 활성화된다.import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'const root = createRoot(document.getElementById('root'))root.render( ) 엄격 모드는 특정 작업을 두 번 반복 실행하여 잠재적인 버그를 노출한다.컴포넌트 마운트.. 2025. 8. 27. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 77 (순수 함수와 부수 효과, 컴포넌트 부수 효과 관리) 목차순수 함수와 부수 효과(Side Effects)컴포넌트 부수 효과 관리오늘 하루를 돌아보며 순수함수와 부수 효과(Side Effects)함수는 일반적으로 입력을 받아 출력을 만들어내는 과정을 담당한다. 하지만 때로는 함수가 외부 상태에 의존하거나 외부를 변경하기도 한다. 이것을 부수 효과(Side Effects)라고 한다. 부수 효과의 예시로는 다음과 같은 것을 들 수 있다.외부 변수 변경: 함수 밖의 변수 값을 수정API 요청: 서버에서 데이터를 가져오거나 전송DOM 조작: 웹 페이지의 특정 요소 변경 부수 효과과 있는 함수는 예측하기 어렵기 때문에 버그 발생 가능성이 높다. 따라서 부수 효과가 없는 코드를 작성하고, 동일 입력에 항상 동일 출력을 반환하는 것이 견고한 프로그램을 만드는 두 가지 중.. 2025. 8. 26. 이전 1 2 3 4 5 6 ··· 15 다음 반응형
