리액트로만들어진 템플릿을보고 공부중인데

[황정후]

https://coreui.io/react/demo/3.1.0/#/theme/colors

 

이 템플릿을가지고 공부중인데요 코드방식이 첨보는방식이라 잘모르겠어서 혹시 설명이..가능하신지 궁금해서 코드를 가져와봤습니다

"

import PropTypes from 'prop-types'
import React, { useEffect, useState, createRef } from 'react'
import classNames from 'classnames'
import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react'
import { rgbToHex } from '@coreui/utils'
import { DocsLink } from 'src/components'

const ThemeView = () => {
  const [color, setColor] = useState('rgb(255, 255, 255)')
  const ref = createRef()

  useEffect(() => {
    const el = ref.current.parentNode.firstChild
    const varColor = window.getComputedStyle(el).getPropertyValue('background-color')
    setColor(varColor)
  }, [ref])

  return (
    <table className="table w-100" ref={ref}>
      <tbody>
        <tr>
          <td className="text-medium-emphasis">HEX:</td>
          <td className="font-weight-bold">{rgbToHex(color)}</td>
        </tr>
        <tr>
          <td className="text-medium-emphasis">RGB:</td>
          <td className="font-weight-bold">{color}</td>
        </tr>
      </tbody>
    </table>
  )
}

const ThemeColor = ({ className, children }) => {
  const classes = classNames(className, 'theme-color w-75 rounded mb-3')
  return (
    <CCol xs={12} sm={6} md={4} xl={2} className="mb-4">
      <div className={classes} style={{ paddingTop: '75%' }}></div>
      {children}
      <ThemeView />
    </CCol>
  )
}

ThemeColor.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
}

const Colors = () => {
  return (
    <>
      <CCard className="mb-4">
        <CCardHeader>
          Theme colors
          <DocsLink href="https://coreui.io/docs/utilities/colors/" />
        </CCardHeader>
        <CCardBody>
          <CRow>
            <ThemeColor className="bg-primary">
              <h6>Brand Primary Color</h6>
            </ThemeColor>
            <ThemeColor className="bg-secondary">
              <h6>Brand Secondary Color</h6>
            </ThemeColor>
            <ThemeColor className="bg-success">
              <h6>Brand Success Color</h6>
            </ThemeColor>
            <ThemeColor className="bg-danger">
              <h6>Brand Danger Color</h6>
            </ThemeColor>
            <ThemeColor className="bg-warning">
              <h6>Brand Warning Color</h6>
            </ThemeColor>
            <ThemeColor className="bg-info">
              <h6>Brand Info Color</h6>
            </ThemeColor>
            <ThemeColor className="bg-light">
              <h6>Brand Light Color</h6>
            </ThemeColor>
            <ThemeColor className="bg-dark">
              <h6>Brand Dark Color</h6>
            </ThemeColor>
          </CRow>
        </CCardBody>
      </CCard>
    </>
  )
}

export default Colors"

 

반복문을사용한것같진않은데 결과값은 마치 반복문이 사용된것처럼나와서 궁금해서 가져와봤는데 혹시 코드한번만읽고 설명해주실수있을까요..?

 

import해온것들이나 함수등등 className 뒤에 붙은 ref등등 모르는게 너무많습니다

[codingapple]

import 하는 것들 중에 파일,폴더가 아닌 것들은 다 코드짠사람이 임의로 설치한 외부 라이브러리입니다 

라이브러리 사용법을 따로 찾아보셔야합니다 

그냥 컴포넌트한두개 만드는 파일같은데 ref는 state랑 똑같은 데이터저장공간인데

가끔 특정한 html 요소를 찾기쉽게 ref에 저장해서 쓰는 경우가 많습니다 

다만 ref는 변경시 재렌더링이 일어나지않습니다 

함수 컴포넌트 안에서는 보통 ref쓸 때 useRef를 사용합니다 

[글쓴이]

글