반응형 부트캠프65 멋쟁이사자처럼 프론트엔드 부트캠프 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. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 76 (가상 DOM의 작동 방식, 컴포넌트 라이프사이클, 순수 함수와 부수 효과) 목차가상 DOM의 작동 방식컴포넌트 라이프사이클순수 함수와 부수 효과오늘 하루를 돌아보며 가상 DOM의 작동 방식가상 DOM은 실제 DOM 조작의 비효율성을 해결하기 위해 리액트가 도입한 핵심 기술이다. 실제 DOM은 변경될 때마다 전체 DOM을 다시 계산하고 그려야 해서 성능이 저하되지만, 가상 DOM은 메모리상에서 UI의 가벼운 복사본을 만들어 효율적으로 업데이트를 처리한다. 가상 DOM의 작동 원리는 다음과 같다.새로운 가상 DOM 생성: 컴포넌트의 상태(state)가 변경되면 컴포넌트가 다시 렌더링되면서 새로운 가상 DOM 트리가 만들어진다.이전 가상 DOM과 비교(Diffing): 리액트는 새로 만들어진 가상 DOM과 이전 가상 DOM을 비교하여 어떤 부분이 변경되었는지 찾아낸다.실제 DOM 업.. 2025. 8. 25. 이전 1 2 3 4 5 ··· 13 다음 반응형
