같은 결과를 출력한다.
// 🏷️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 값
리액트에서 배열을 출력하려고 할 때 키 값을 써주지 않으면 에러가 뜨는데 그 이유가 뭔지 찾아봤다.
vite는 css가 인라인 속성으로 들어가기 때문에 개발자모드에서 확인할 때 어디 파일인지 찾기가 힘들다. 그걸 정확히 명시해주기 위해서는
그래서 다음과 같은 설정을 해줘야 한다. vite 환경설정이 완료된 파일에서 vite.confing.js 파일을 찾는다. 그 다음 위와 같이 devSourcemap을 true로 설정해주면 다음과 같이 개발자 모드에서 어디 파일인지 알려준다.👏🏼👏🏼👏🏼
상대경로엔 많은 불편함이 있다! 그래서 절대 경로로 설정해줬다.
참고자료
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이하 파일은 경로를 지정할때 import, interpolation 해서 절대경로로 넣는다
이 디렉토리는 빌드시 자동으로 절대경로로 취급됨
import 해서 절대경로를 가져올 필요가 없다!
// 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 파일명