23.08.10 TIL

김진주·2023년 8월 10일

TJL(Today Jinju Learned)

목록 보기

32/35

리액트 앨리먼트

같은 결과를 출력한다.

// 🏷️React의 createElement 함수를 사용
// ⭐ React.createElement(type, props, ...children)

React.createElement(
      'ul',
      null,
      statusMessage.map((message) => {
        console.log(React.createElement('li', { key: message }, message));
        return React.createElement('li', { key: message }, message);
      })
    ) 
/* -------------------------- 같은 결과 ----------------------------- */
// 🏷️JSX 문법 사용
{ // ⭐ 중괄호 안에 태그를 구성할 수 있고 오로지 값을 내뱉을 수 있는 것들만 들어갈 수 있다
statusMessage.map((message) => {
	console.log(<li key={message}>{message}</li>);
	return <li key={message}>{message}</li>;
	})
}

JSX를 사용한 문법이 훨씬 더 간결하고 코드를 더 이해하기 쉽다.

리액트 앨리먼트 뜯어보기

리액트 앨리먼트는 리액트 애플리케이션에서 UI를 표현하는데 사용되는 객체
리액트 앨리먼트는 가상 DOM(Virtual DOM)의 구성 요소로서, 화면에 렌더링되는 요소를 나타내기 위해 사용

$$typeof: Symbol(react.element)은 리액트 앨리먼트임을 나타내는 심볼입니다.
type: "img"는 해당 앨리먼트의 타입이 <img> 요소임을 나타냅니다.
key: null은 앨리먼트에 대한 고유한 키가 없음을 나타냅니다.
props: {src: '/src/assets/react.svg', alt: '리액트'}는 <img> 요소의 속성을 나타내는 객체입니다.
_owner, _store, _self, _source 등은 내부 리액트 관련 정보를 나타내는 프로퍼티들입니다.

리액트 배열에서의 key 값

리액트에서 배열을 출력하려고 할 때 키 값을 써주지 않으면 에러가 뜨는데 그 이유가 뭔지 찾아봤다.

리액트 내보내기

화살표 함수 vs 함수 선언식

vite는 css가 인라인 속성으로 들어가기 때문에 개발자모드에서 확인할 때 어디 파일인지 찾기가 힘들다. 그걸 정확히 명시해주기 위해서는
그래서 다음과 같은 설정을 해줘야 한다. vite 환경설정이 완료된 파일에서 vite.confing.js 파일을 찾는다. 그 다음 위와 같이 devSourcemap을 true로 설정해주면 다음과 같이 개발자 모드에서 어디 파일인지 알려준다.👏🏼👏🏼👏🏼

절대 경로 설정

상대경로엔 많은 불편함이 있다! 그래서 절대 경로로 설정해줬다.

참고자료

https://ko.vitejs.dev/config/shared-options.html
resolve.alias 파트

https://github.com/rollup/plugins/tree/master/packages/alias#entries

export default defineConfig({
  plugins: [react()],
  css: {
    devSourcemap: true,
  },
  resolve: {// 배열 방식
    // alias: [{ find: '@', replacement: path.resolve(__dirname, './src') }],
    alias: { // 객체방식
      '@': path.resolve(__dirname, './src'),
    },
  },
});

import path from 'node:path'

path 모듈은 파일 경로와 관련된 유틸리티 함수들을 제공하여 파일 경로를 다루는 데 도움을 준다.

node:path 형식 의 모듈 경로는 ECMAScript 모듈 형식을 CommonJS 모듈 형식으로 변환해주는 것으로, Node.js 환경에서 ECMAScript 모듈을 사용하면서 내장 모듈을 불러올 때 유용하게 사용된다.

정적파일 & 동적파일

정적파일은 public에서 관리하지않나요? src에 넣는 경우는 어떤경우가 있을까요?
정적이고 자주 바뀌지 않는 것들은 다 퍼블릭!
동적으로 바뀌는 파일들은 src의 asset로

이미지의 경로는 인터폴레이션 해서 변수로 넣는다
import reactImagePath from '@/assets/react.svg'

<img className="/" src=`${reactImagePath}` alt="/" />

⭐ 이때 절대경로를 써야 빌드해서 위치가 바뀌었을때 문제생기지 않는다

src

동적 파일 관리한다
cache에, 내용이 바뀌었더라도 파일명 , 크기가 비슷한 파일이 있으면 수정이 갱신되지 않는다. 그래서 build될 때 파일명에 해쉬값이 들어간다.

동적파일인 src이하 파일은 경로를 지정할때 import, interpolation 해서 절대경로로 넣는다

public

정적 파일을 관리한다.(회사 로고같은 잘 바뀌지 않는 파일)
빌드할때 파일에 해쉬값이 들어가지 않는다.

이 디렉토리는 빌드시 자동으로 절대경로로 취급됨
import 해서 절대경로를 가져올 필요가 없다!

react snippet

// rafc -> reactArrowFunctionComponent
import React from 'react'

export const 파일명 = () => {
  return (
    <div>파일명</div>
  )
}
/* -------------------------------------------------------------------------- */
// rafce -> reactArrowFunctionExportComponent
import React from 'react'

const 파일명 = () => {
  return (
    <div>파일명</div>
  )
}

export default 파일명

/* -------------------------------------------------------------------------- */
// rfc -> reactFunctionalComponent
import React from 'react'

export default function 파일명() {
  return (
    <div>파일명</div>
  )
}
/* -------------------------------------------------------------------------- */
// rfce -> reactFunctionalExportComponent
import React from 'react'

function 파일명() {
  return (
    <div>파일명</div>
  )
}

export default 파일명