On this page

2022년 04월 15일

수정하기

문서 생성 2022-04-16 23:30:30 최근 수정 2022-04-16 23:55:48

On this page

📚 오늘 도전하고, 배운 것
🤔 학습하면서 궁금하거나 어려웠던 점
🌅 내일은 무엇을?
🖋 log

📚 오늘 도전하고, 배운 것

React

JSX에서 class 대신 className을 사용하는 것처럼 for 대신 htmlFor를 사용한다. (class와 for는 ECMAScript의 예약어이고, JSX는 자바스크립트로 변환되기 때문에)
Button component를 만들 때 props.type을 넘긴다면, 없는 경우를 대비해 props.type || 'button' 처럼 기본값 넣어주기

JSX의 제한사항

JSX에서 root 요소는 하나여야 한다. 서로 나란히 있는 요소가 root에 존재한다면 어떻게 해결해야할까?

요소들을 하나의 <div>로 묶기
- 꼭 <div>여야 하는 것은 아니다. 다른 태그도 가능하다.
배열 사용하기
- 배열로 반환하면 리액트가 요소에 대한 키를 필요로 하는 문제가 있다. 물론 키를 추가할 순 있지만 매번 추가해줘야 하는 불편함이 있다.

여기서 div로 묶어주는 방법을 방법을 사용하면 한 가지 더 문제가 생긴다. 일명 div Soup라는 것인데 불필요한 (구조적으로 의미도 없는) div가 추가되어서 사용자가 보는 화면에 실제로 렌더링된다. 이 문제를 해결하는 방법은 두 가지가 있다.

wrapper 컴포넌트 만들기

다음과 같은 컴포넌트를 만들어서 div를 대체하면 div가 불필요하게 렌더링되지 않는다.

const Wrapper = (props) => {
  return props.children
}

export default Wrapper

React.Fragment 사용하기

wrapper 컴포넌트를 만드는 대신 리액트에서 제공하는 기능을 사용하는 것이다. 아래 코드는 비어 있는 wrapper 를 렌더링한다.

return (
  <React.Fragment>
    <h1>Hello</h2>
    <p>My name is...</p>
  </React.Fragment>

import { Fragment } from 'react'를 추가해서 <Fragment>라고 짧게 사용도 가능하다.

다음과 같이 더 짧게도 사용 가능한데 프로젝트 설정이 지원하는 경우 가능하다

return (
  <>
    <h1>Hello</h2>
    <p>My name is...</p>
  </>

Portal

웹 페이지를 개발할 때 modal을 사용하는 경우가 있다. modal 말고도 뭔가 전체 화면을 덮어씌우는 경우(overlay)에 해당 요소가 body 바로 직계 자식으로 위치해야 마땅한 느낌인데 개발하면서 다른 HTML 요소 안에 중첩되어 있다면 어떨까?

<!-- 대충 이런 느낌 -->

<body>
    <!-- 구조상 모달은 여기 있어야 하는데 -->
    <section>
        <p>...</p>
    </section>
    <section>
        <!-- 여기 있다 -->
        <div class="modal">
        </div>
        <p>Hello, world!</p>
    </section>
</body>

스타일링 덕분에 기술적으로는 전체 화면을 덮어씌우는 것처럼 보여도, 접근성 관점에서 좋지 않다. 스크린 리더가 코드를 해석할 때 오버레이로 인식하지 못할 수도 있다. 그리고 구조적으로 코드만 봤을 때 내부 코드에 중첩되어 있기 때문에 다른 요소에 대한 오버레이인지 명확하지도 못하다. 이 문제를 React에서는 "Portal(포탈)"로 해결할 수 있다. 포탈을 사용하면 어떤 컴포넌트를 body의 직계자식으로 이동시킬 수 있다!

컴포넌트를 이동시킬 장소 정하기
- index.html의 <body> 태그 안에 모달을 넣을 장소를 정한다.
- <div id="modal-root"></div> 처럼 코드를 넣는다.
그곳에 포탈을 가져간다고 알려주기
- modal 컴포넌트 코드에서 JSX 부분에 React.createPortal(<모달 컴포넌트/>, document.getElementById('modal-root')를 넣어주면 된다.

🤔 학습하면서 궁금하거나 어려웠던 점

리액트는 도대체 어떻게 개발했을까? 좋은 기능들도 많고,, 정말 대단하다. 내 능력만 된다면 코드를 따라 읽어보고 싶다.

🌅 내일은 무엇을?

백준 알고리즘 문제 풀기
React 학습

🖋 log

4km 뛰었다.
파일을 열다 문득 1년전 TIL을 보았다. 지금과 작성 방식이 아주 쪼금 달랐다. 기록이 남아 있어서 뭔가 기분이 좋았다. 테니스를 배운지 얼마 되지 않았던 시절이다. 같이 배우던 분들은 계속 배우고 계신데 단톡방에서 뭘 하는지 보고만 있어서 슬프다. 빨리 돈을 벌어서 다시 배우고 싶다.

LINKS TO THIS PAGE

2022년 04월