• 리액트 <React.Fragment> === 웹 표준 <template>
• 막간 vue
  • template engine {{}}
• <abbr>
  • code
• base href
  • code

vite 서버옵션

https://ko.vitejs.dev/config/server-options.html

• server.host

  //vite 설정 옵션 객체
  export default defineConfig({
    plugins: [react()],
    server: {
      host: 'localhost',
      port: 3000, //default: 5173
      open: true, //default : false
    },
  });
  

Adjacent JSX elements must be wrapped in an enclosing tag.

: 감싸는 부모 없이 여러 형제요소를 사용시 발생하는 오류

• why…
• 단순히 감쌀 목적으로 <div>로 감싸면 안돼요 🚫

solution 1  ▶️권장 ❌ (js 방법이라 ! )

const MyComponent = () => {
  return (
    <div>
      <h1>Hello</h1>
      <p>World</p>
    </div>
  );
};

solution 2 ⇒ fragment

const MyComponent = () => {
  return (
    <>
      <h1>Hello</h1>
      <p>World</p>
    </>
  );
}

Fragment ( = <>…<>)

: 동일 계층의 형제요소를 여러개 내보낼 때 사용→ DOM을 오염시키지 않고 여러 요소를 반환할 수 있는 특별한 컴포넌트

Fragment (.../) – React

function Exercise(){
	return (
	<React.Fragment>
		<div>밥 먹으면</div>
		<div>왜 졸릴까요?</div>
	</React.Fragment>
	)
}

/* compiled code*/
const compiledExercise = () =>{React.createElement(
	React.Fragment,
	{},
	React.createElement("div",{},"밥 먹으면"),
	React.createElement("div",{},"왜 졸릴까요?"),
)};