확장자명 생략 가능하게 해주는 부분
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
rsolve: {
extensions: [".js", "jsx"],
},
});
import "./App.css";
//Vite환경에서 구현한 React는 확장자명을 생략해도 됨 이라는데...
//처음엔 기재해야지 나오고 이후엔 생략해도 나온다..?
import Header from "./components/Header";
import Main from "./components/Main";
import Footer from "./components/Footer";
import Button from "./components/Button";
//함수 컴포넌트 , class로도 만들 수 있지만 작성해야하는 코드량이 너무 많아진다
//컴포넌트 첫글자를 무조건 대문자로해야한다 , 소문자는 리액트가 인정X
//js함수가 html태그를 반환하게 할 수 있음 -> component라고 부른다
// -> App 컴포넌트 / 현재 Header컴포넌트가 자식 , App컴포넌트가 부모 컴포넌트
// App이 조상역할을 하면 root컴포넌트라 명칭됨 / App이 보통 root로 명칭됨
//Props -> 부모 컴포넌트가 자식 컴포넌트에게 할당하는 것 (properties의 약자)
function App() {
const buttonProps = {
text: "메일",
color: "red",
a: 1,
b: 2,
c: 3,
};
return (
<>
<Button {...buttonProps} />
<Button text={"카페"} />
<Button text={"블로그"}>
<Header />
<div>자식요소2</div>
</Button>
</>
);
}
export default App;
const Button = ({ text, color, children }) => {
//이벤트 객체가 기본적으로 제공됨
const onClickButton = (e) => {
console.log(e);
console.log(text);
};
return (
<button
//이벤트핸들러(이벤트를 실질적으로 실행하는 함수)
//함수를 전달시 ()로 결과를 전달하는건 안됨,콜백처럼 이름만 써야됨
onClick={onClickButton}
//마우스가 올라갔을때
//onMouseEnter={onClickButton}
style={{ color: color }}
>
{text} - {color.toUpperCase()}
{children}
</button>
);
};
Button.defaultProps = {
color: "black",
};
export default Button;
import "./Main.css";
//JSX 주의 사항
//중괄호 내에서는 JS표현식만 넣을 수 있다 -> 값으로 평가 될 수 있는 문
//숫자 , 문자열 , 배열 값만 렌더링 가능 -> 객체는 렌더링 X (.으로 내부 값 접근O)
//모든 태그가 반드시 닫혀있어야한다 -> <img/>
//최상위 태그는 반드시 하나여야한다 -> <>...</>로 빈 태그도 사용 가능(흩뿌리게 사용)
//style에서 css처럼 하이푼을 쓰지 않고 카멜표기법을 사용한다
//JSX에서는 class -> className으로 사용해야함
const Main = () => {
const user = {
name: "sangjun",
isLogin: true,
};
if (user.isLogin) {
return <div className="logout">로그아웃</div>;
} else {
return <div>로그인</div>;
}
// return <>{user.isLogin ? <div>로그아웃</div> : <div>로그인</div>}</>;
};
export default Main;