[React]props&state

props를 이용한 문자열 렌더링 실습

App.js

import "./styles.css";

const App = () => {
  const itemOne = "React를";
  const itemTwo = "배우고 있습니다.";

  return(
    <div className="App">
      <Learn attribute={itemOne} />
      <Learn attribute={itemTwo} />
      <Learn />
      </div>
  );
};

const Learn = (props) => {
  return <div className="Learn">
    <p>{props.attribute}</p> {/* 문장렌더링 */}
  </div>
};

export default App;

styles.css

.App {
    font-family: sans-serif;
    text-align: center;
  }

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

onClick 이벤트를 활용한 state 실습

App.js

import "./styles.css";
import React, { useState } from "react";

function NameForm(){
    const [named, setNamed] = useState("");

    const handleChange = (el) => {
        setNamed(el.target.value);
    };

    const handleClick = () => {
        alert(named);
    };

    return(
        <div className="App">
            <h1>Event handler practice</h1>
            <input type="text" value={named} onChange={handleChange}></input>
            <button onClick={handleClick}>Button</button>
            <button onClick={() => alert(named)}>Button</button>
            <h3>{named}</h3>
        </div>
    );
}

export default NameForm;

styles.css

.App {
    font-family: sans-serif;
    text-align: center;
  }
  
  input {
    border-color: #4000c7;
    border-radius: 3px;
    margin: 2px;
    outline: 0;
  }
  
  button {
    border-color: #4000c7;
    border-radius: 3px;
    margin: 2px;
    color: white;
    background-color: #4000c7;
    font-weight: bold;
  }

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

popup event handler 실습
App.js

import React, { useState } from "react";
import "./styles.css";

function App() {
  const [showPopup, setShowPopup] = useState(false);

  const togglePopup = (el) => {
    setShowPopup(el.target.value); // Pop up 의 open/close 상태에 따라
    // 현재 state 가 업데이트 되는 함수
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      <button className="open" onClick={togglePopup} value="false">
        Open me
      </button>
      {showPopup ? (
        <div className="popup">
          <div className="popup_inner">
            <h2>Success!</h2>
            <button className="close" onClick={togglePopup}>
              Close me
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}

export default App;

styles.css

.App {
    font-family: sans-serif;
    text-align: center;
  }
  .App > h1 {
    color: #34495e;
  }
  .open {
    width: 6rem;
    height: 2rem;
    border: none;
    border-radius: 3px;
    background-color: salmon;
    color: white;
    font-weight: bolder;
  }
  .popup {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .popup_inner {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
    margin: auto;
    background: white;
  }
  .popup_inner > h2 {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
    margin: auto;
    color: #34495e;
  }
  .close {
    position: absolute;
    left: 25%;
    right: 25%;
    top: 40%;
    bottom: 25%;
    margin: auto;
    width: 6rem;
    height: 2rem;
    border: none;
    border-radius: 3px;
    background-color: salmon;
    color: white;
    font-weight: bolder;
    outline: none;
  }

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

select 태그를 이용한 event handler 실습

App.js

import React, { useState } from "react";
import "./styles.css";

function SelectExample() {
  const [choice, setChoice] = useState("apple");

  const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];
  const options = fruits.map((fruit) => {
    return <option key={fruit.toString()}>{fruit}</option>; //key값 추가 시 에러 해결
  });
  console.log(choice);
  const handleFruit = (event) => {
    setChoice(event.target.value);
  };

  return (
    <div className="App">
      <select onChange={handleFruit}>{options}</select>
      <h3>You choose "{choice}"</h3>
    </div>
  );
}

export default SelectExample;

styles.css

.App {
    font-family: sans-serif;
    text-align: center;
  }
  select {
    width: 8rem;
    padding: 0.8em 0.5em;
    border: 1px solid#34495e;
    font-family: inherit;
    color: #34495e;
    font-weight: bold;
  }
  
  .App > h3 {
    color: #34495e;
  }

index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);