Today 요약

1. 최적화 강의

1. What I Learned?

최적화 강의

텍스트 줄바꿈 처리하기

"message": {
  "intro": "가장 진실된 것으로\n가장 당신을 위한 생각으로\n나의 마음을 가득 채워가고 싶다\n참 작은 마음이지만\n당신을 위한 것 중 가장 작은 것일지라도\n당신이 허락해준다면\n나 내 온 마음 그것이라 하겠다.\n\n이경선, <마음>",
  "invitation": "소중한 분들을 초대합니다\n살랑이는 바람결에\n사랑이 묻어나는 계절입니다.\n여기 곱고 예쁜 두 사람이 사랑을 맺어\n인생의 반려자가 되려 합니다.\n새 인생을 시작하는 이 자리에 오셔서\n축복해 주시면 감사하겠습니다."
},

위와 같이 내려오는 message라는 정보를 \n를 기준으로 줄바꿈 처리하는 Text 컴포넌트

import React from 'react'

function Text({ children }: { children: string }) {
  const message = children.split('\n').map((str, idx, array) => {
    return (
      <React.Fragment key={idx}>
        {str}
        {idx === array.length - 1 ? null : <br />}
      </React.Fragment>
    )
  })

  return <div>{message}</div>
}

export default Text

Mixin

SCSS의 경우 공통적으로 처리하고 관리할 코드가 있다면 mixin을 이용해서 관리할 수 있다.

@mixin txt-content {
  text-align: center;
  line-height: 26px;
}

@import '@scss/utils.scss';

.container {
  @include txt-content;

  .ico-post {
    width: 20px;
    height: 20px;
    margin: 72px 0 8px;
  }
}

이런식의 타이핑도 가능하다.

function Contact({
  groom,
  bride,
}: {
  groom: Wedding['groom']
  bride: Wedding['bride']
}) {

PropsWithChildren

import classNames from 'classnames/bind'
import styles from './Accordion.module.scss'
import { PropsWithChildren, useState } from 'react'

const cx = classNames.bind(styles)

interface AccordionProps {
  label: string
}

function Accordion({ label, children }: PropsWithChildren<AccordionProps>) {
  const [expanded, setExpanded] = useState(false)

  const handleToggle = () => {
    setExpanded((prev) => !prev)
  }