목차
개발자 도구 활용
리액트 개발자 도구(React DevTools)를 사용하면 컴포넌트 검사 및 데이터(state.props)를 편집할 수 있다. 리액트 앱의 성능 문제를 진단하고 분석할 수도 있다. 리액트 개발자 도구는 Chrome 확장 프로그램을 다운받아 사용한다.
리액트 개발자 도구의 주요 기능과 사용법은 다음과 같다.
- 컴포넌트 트리 확인: 현재 페이지에 렌더링된 모든 React 컴포넌트의 구조를 트리 형태로 볼 수 있다.
- 상태, 속성 확인 및 수정: 각 컴포넌트를 클릭하면 오른쪽에서 해당 컴포넌트의 props와 state 값을 볼 수 있다. 값을 직접 수정하면 화면에 바로 반영된다. (테스트/디버깅에 유용)
- 훅(hooks) 값 확인: useState, useEffect등 hooks의 현재 값도 확인할 수 있다.
- 컴포넌트 검색 및 선택: 상단 검색창에서 컴포넌트 이름으로 빠르게 찾을 수 있다. 눈(eye) 아이콘 버튼을 클릭하면 실제 페이지의 DOM 요소를 찾아 Elements 탭으로 이동한다.
- 컴포넌트 데이터 콘솔 패널에 출력: 버그(bug) 아이콘 버튼을 클릭하면 콘솔 패널에 컴포넌트의 데이터 및 노드 정보가 출력된다.
- 컴포넌트 코드 확인: 태그(<>) 아이콘 버튼을 클릭하면 컴포넌트 코드를 소스 패널에서 확인할 수 있다.
리액트 프래그먼트
컴포넌트에서 여러 요소를 반환하려면 반드시 하나의 부모 요소로 감싸야 한다. 여러 요소를 반환하려고 <div> 요소로 감싸면 실제 DOM 구조에 불필요한 <div> 요소가 생긴다.
이때 리액트가 제공하는 <Fragment> 요소를 사용하면 불필요한 래퍼 요소를 사용하지 않아도 된다. 이렇게 하면 실제 DOM에는 아무런 래퍼 요소가 추가되지 않는다.
import { Fragment } from 'react'
export default function App() {
return (
<Fragment>
<p>
<code><Fragment></code> 요소를 사용하면 불필요한 래퍼 요소를 사용하지 않아도 된다.
</p>
</Fragment>
)
}
하지만 아래처럼 빈 태그(<>...</>)를 사용하여 <Fragment>를 생성할 수 있고 간단해서 이 방법을 더 자주 사용한다. JSX 구문에서 사용된 빈 태그(<>...</>)는 리액트에 의해 React.createElement로 변환된다.
export default function App() {
return (
<>
<p>
<code><Fragment></code> 요소를 사용하면 불필요한 래퍼 요소를 사용하지 않아도 된다.
</p>
</>
)
}
리스트 렌더링 과정에서 <Fragment>를 사용해야 할 때는 key를 지정해야 한다. 이때는 명시적으로 Fragment 모듈을 불러와서 사용해야 한다.
import { Fragment } from 'react'
export default function Descriptions(props) {
return (
<dl>
{
props.items.map((item) => (
<Fragment key={item.term}>
<dt>{item.term}</dt>
<dd>{item.description}</dd>
</Fragment>
))
}
</dl>
)
}
안전하게 HTML 렌더링
리액트 컴포넌트 내에 HTML 코드가 포함된 문자열을 삽입해야 할 때가 있다. 하지만 기본적으로 리액트는 HTML 태그를 문자 그대로 표시하기 때문에, dangerouslySetInnerHTML 속성을 사용해야 한다.
dangerouslySetInnerHTML은 이름 그대로 위험한 속성이다. 이 속성을 사용해 사용자 입력을 그대로 삽입하면 악성 스크립트가 실행될 수 있어 크로스 사이트 스크립팅(XSS) 공격에 취약해진다. 사용자 입력과 같은 신뢰할 수 없는 HTML을 삽입할 때는 반드시 살균(sanitize) 처리 과정을 거쳐야 한다. 이를 위해 DOMPurify와 같은 라이브러리를 사용하는 것이 좋다.
DOMPurify는 HTML 문자열에서 XSS 공격에 사용될 수 있는 <script> 태그나 이벤트 핸들러를 자동으로 제거해주어, 안전하게 HTML을 렌더링할 수 있도록 도와준다.
따라서, dangerouslySetInnerHTML은 꼭 필요한 경우에만 사용하고, 사용자 입력이 포함된 HTML을 삽입할 때는 DOMPurify로 살균 처리를 하는 것이 안전하다.
오늘 하루를 돌아보며
오늘은 실습을 많이 진행했다. 로컬 서버 테스트 환경에서 사용자 프로필을 불러와서 테이블로 구현하는 것도 하고, 할 일 목록을 구현해서 할 일을 추가하고 수정하고 삭제하는 기능을 구현해봤다. 그리고 틱택토 게임을 구현하다가 수업이 끝났다. 어제까지만 해도 배운 내용이 머리에 안 들어왔는데 오늘 실습을 해보니 배운 내용이 정리되는 것 같다. 리스트 렌더링이 어떻게 작동하는지, 리액트에서 접근성을 어떻게 준수할 수 있는지도 새로 배웠다. 역시 중요한 것은 직접 만들어보고 시도해보는 것이다. 눈으로만 보면서 이해가 안 된다고 하면 이해할 생각이 없는 것으로 볼 수 있지 않을까?
오늘 수업 시간에 끝까지 하지 못한 틱택토 게임을 마저 구현해 봐야겠다. 내가 먼저 시도해 보고 내일 수업을 들으면 이해가 더 빠를 것이다! 하지만 그 전에 복습이 먼저다... 오늘 실습했던 것들을 혼자서 한 번씩 시도해 보고, 시간이 남는다면 틱택토 게임을 마저 구현해 봐야겠다!
