2023.07.18

React

by 연을 2023. 7. 18. 14:40

728x90

jsx

1. Root 반드시 한거

2. class : className

3. 자바스크립트 변수 : {}

4. style시트 속성을 json으로 속성

5. {}연산은 실행된다.

import "./App.css";

function App() {
  const name = "Tom";
  const naver = {
    name: "네이버",
    url: "https://naver.com",
  };
  return (
    <div className="App">
      <h1
        style={{
          color: "#f0f",
          backgroundColor: "green",
        }}
      >
        Hello, {name}.<p>{2 + 3}</p>
      </h1>
      <a href={naver.url}>{naver.name}</a>
    </div>
  );
}

export default App;

app.js

import "./App.css";
import Hello from "./component/Hello";
import Welcome from "./component/Welcome";

function App() {
  return (
    <div className="App">
      <Hello />
      <Welcome />
      <Hello />
      <Hello />
    </div>
  );
}

export default App;

Hello.js

import World from "./World"

export default function Hello(){
    return (
        <div>
            <h1>Hello</h1>
            <World />
        </div>
    )    
}

Welcome.js

export default function Welcome(){
    return <h2>Welcome</h2>
}

World.js

export default function World(){
    return <h3>World!</h3>
}

결과

style 시트 쓰는 법

Hello.js → h1에 스타일시트를 넣어준다.

import World from "./World"

export default function Hello(){
    return (
    <div>
        <h1
          style={{
            color:"#f00",
            borderRight:"12px solid #000",
            marginBottom:"50px",
            opacity:1,
          }}
        >
            Hello
        </h1>
        <World />
    </div>
    )    
}

결과

app.js

import "./App.css";
import Hello from "./component/Hello";
import Welcome from "./component/Welcome";

function App() {
  return (
    <div className="App">
      <Hello />
      <Welcome />
      <Hello />
      <Hello />
      <div className="box">
        
      </div>
    </div>
  );
}

export default App;

app.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

.box{
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

결과

Hello.js

import World from "./World";
import "./Hello.css";

export default function Hello(){
    return (
    <div>
        <h1
          style={{
            color:"#f00",
            borderRight:"12px solid #000",
            marginBottom:"50px",
            opacity:1,
          }}
        >
            Hello
        </h1>
        
        <div className="box"></div>
        
    </div>
    )    
}

Hello.css

.box{
    width: 100px;
    height: 100px;
    background-color: lightcoral;
  }

결과

Hello.js

import World from "./World";
import style from "./Hello.module.css";

export default function Hello(){
    return (
    <div>
        <h1
          style={{
            color:"#f00",
            borderRight:"12px solid #000",
            marginBottom:"50px",
            opacity:1,
          }}
        >
            Hello
        </h1>

        <div className={style.box}>hello</div>
        
    </div>
    )    
}

Hello.module.css → 무조건 module이라고 써야 먹힌다.

.box{
    width: 100px;
    height: 100px;
    background-color: lightcoral;
  }

결과

app.js

import "./App.css";
import Hello from "./component/Hello";
import Welcome from "./component/Welcome";
import style from "./App.module.css";

function App() {
  return (
    <div className="App">
      <Hello />
      <div className={style.box}>

      </div>
    </div>
  );
}

export default App;

app.module.css

.box{
    width: 100px;
    height: 100px;
    background-color: lightgray;
}

결과

hello.js

import World from "./World";
import style from "./Hello.module.css";

export default function Hello(){
    function showName(){
        console.log("Mike");
    }

    function showAge(age){
        console.log(age);
    }

    function showText(txt){
        console.log(txt);
    }

    return (
    <div>
        <h1>
            Hello
        </h1>
        <button onClick={showName}>show name</button>
        <button onClick={()=>{showAge(10)}}>show age</button><br/>
        <input type="text" onChange={e=>{
            const txt = e.target.value;
            showText(txt);
            }}
        ></input>
    </div>
    )    
}

결과

hello.js

import World from "./World";
import style from "./Hello.module.css";

export default function Hello(){
    let name = "Mike";

    function changeName(){
        name = name ==="Mike"?"jane":"Mike";
        console.log(name);
    }
    return (
    <div>
        <h1>
            state
        </h1>
        <h2>{name}</h2>
        <button onClick={changeName}>change name</button>

    </div>
    )    
}

결과

hello.js

import World from "./World";
import style from "./Hello.module.css";
import {useState} from "react";

export default function Hello(){
    //let name = "Mike";
    const [name,setName] = useState("Mike")

    function changeName(){
        const newName = name ==="Mike"?"jane":"Mike";
        setName(newName);
    }
    
    return (
    <div>
        <h1>
            state
        </h1>
        <h2>{name}</h2>
        <button onClick={changeName}>change name</button>

    </div>
    )    
}

결과 chanage name을 누르면 값이 바뀌어진다.

hello.js

import World from "./World";
import style from "./Hello.module.css";
import {useState} from "react";

export default function Hello(){
    //let name = "Mike";
    const [name,setName] = useState("Mike")

    return (
    <div>
        <h1>
            state
        </h1>
        <h2>{name}</h2>
        <button onClick={()=>{
            setName(name === "Mike"?"Jane":"Mike")
        }}>change name</button>

    </div>
    )    
}

app.js

import "./App.css";
import Hello from "./component/Hello";
import Welcome from "./component/Welcome";
import style from "./App.module.css";

function App() {
  return (
    <div className="App">
      <Hello />
      <Hello />
      <Hello />
    </div>
  );
}

export default App;

결과

hello.js

import World from "./World";
import style from "./Hello.module.css";
import {useState} from "react";

export default function Hello(props){
    const [name,setName] = useState("Mike");
    const [age, setAge] = useState(props.age);

    return (
    <div>
        <h1>
            state
        </h1>
        <h2 id="name">{name}({age})</h2>
        <button onClick={()=>{
            setName(name === "Mike"?"Jane":"Mike");
            setAge(age+1);
        }}>change age</button>

    </div>
    )    
}

결과

hello.js

import World from "./World";
import style from "./Hello.module.css";
import {useState} from "react";

export default function Hello({age}){
    const [name,setName] = useState("Mike");
    const msg = age > 19 ? "성인 입니다." : "미성년자 입니다.";

    return (
    <div>
        <h2 id="name">{name}({age}:{msg})</h2>
        <button onClick={()=>{
            setName(name === "Mike"?"Jane":"Mike");
        }}>change </button>

    </div>
    )    
}

결과

hello.js

import {useState} from "react"
import UserName from "./UserName";

export default function Hello({age}){
    const [name,setName] = useState("Mike");
    const msg = age > 19 ? "성인 입니다." : "미성년자 입니다.";

    return (
    <div>
        <h2 id="name">{name}({age}:{msg})</h2>
        <UserName name={name}/>
        <button onClick={()=>{
            setName(name === "Mike"?"Jane":"Mike");
        }}>change </button>

    </div>
    )    
}

username.js

export default function UserName({name}){
    return <p>Hello, {name}</p>
}

결과

728x90

'React' 카테고리의 다른 글

2023.07.19 (0)	2023.07.19
2023.07.17 (0)	2023.07.17

Hello World!

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

'React' 카테고리의 다른 글

관련글 더보기

추가 정보

인기글

최신글

티스토리툴바