반응형 안전하게 HTML 렌더링1 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 79 (개발자 도구 활용, 리액트 프래그먼트, 안전하게 HTML 렌더링) 목차개발자 도구 활용리액트 프래그먼트안전하게 HTML 렌더링오늘 하루를 돌아보며 개발자 도구 활용리액트 개발자 도구(React DevTools)를 사용하면 컴포넌트 검사 및 데이터(state.props)를 편집할 수 있다. 리액트 앱의 성능 문제를 진단하고 분석할 수도 있다. 리액트 개발자 도구는 Chrome 확장 프로그램을 다운받아 사용한다. 리액트 개발자 도구의 주요 기능과 사용법은 다음과 같다.컴포넌트 트리 확인: 현재 페이지에 렌더링된 모든 React 컴포넌트의 구조를 트리 형태로 볼 수 있다.상태, 속성 확인 및 수정: 각 컴포넌트를 클릭하면 오른쪽에서 해당 컴포넌트의 props와 state 값을 볼 수 있다. 값을 직접 수정하면 화면에 바로 반영된다. (테스트/디버깅에 유용)훅(hooks) 값.. 2025. 8. 28. 이전 1 다음 반응형