Unit.6 [React]이벤트 처리

onChange 

function NameForm() {
  const [name, setName] = useState(""); // const [초기값, set함수] = 초기값은" " 

  const handleChange = (e) => { // 이벤트가 발생하면
    setName(e.target.value); // set함수를 이용해서 이벤트타겟에 입력된 value값으로 초기값을 업데이트한다.
  }

  return ( // input 창에 이름을 입력하면 h1크기로 이름이 출력되는 컴포넌트
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <h1>{name}</h1>
    </div>
  )
};

---

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 value={fruit}>{fruit}</option>; // 바뀐과일을 리턴한다.
  });
  console.log(choice); // 바뀐과일을 콘솔에 찍는다
  const handleFruit = (event) => { // 이벤트가 발생하면
    setChoice(event.target.value); // 해당 이벤트에 입력된 value 값을 choice의 값으로 업데이트해준다.
  };

  return (
    <div className="App">
      <select onChange={handleFruit}>{options}</select> //목록을 변경하면 set함수가 실행된다.
      <h3>You choose "{choice}"</h3>
    </div>
  );
}

---

onClick

function NameForm() {
  const [name, setName] = useState(""); 

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return ( // input박스 안에 이름을 입력하면 h1크기로 이름을 출력해주고 이름을 알림창이 팝업된다. 
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={alert(name)}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

---

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

function App() {
  const [showPopup, setShowPopup] = useState(false); // state의 초기값은 false

  const togglePopup = (event) => { 
    setShowPopup(event.target.onClick = true); // 버튼이 클릭되면 set함수를 이용하여 state초기값을 true로 업데이트해준다.
  };
  const togglePopup2 = (event) => {
    setShowPopup(event.target.onClick = false);// 버튼이 클릭되면 set함수를 이용하여 state초기값을 false로 업데이트해준다.
  };

  return (
    <div className="App">
      <h1>Fix me to open Pop Up</h1>
      <button className="open" onClick={togglePopup}> //open me버튼 클릭시 온클릭 이벤트가 발생하고 set함수를 실행시킨다.
        Open me
      </button>
      {showPopup ? ( //state 값이 true라면 success 문구와 함께 close me 버튼이 나온다.
        <div className="popup">
          <div className="popup_inner">
            <h2>Success!</h2>
            <button className="close" onClick={togglePopup2}> // close me 버튼을 누르면 온클릭 이벤트가 발생하고 set함수2를 실행시킨다.
              Close me
            </button>
          </div>
        </div>
      ) : null} // false라면 아무것도 실행하지않는다.
    </div>
  );
}

---

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

export default function App() {
  const [username, setUsername] = useState(""); // username의 초기값은 " "
  const [msg, setMsg] = useState("");// msg의 초기값은 " "



  return (
    <div className="App">
      <div>{username}</div>
      <input
        type="text"
        value={username} //인풋박스의 value는 username이다
        onChange={(event) => setUsername(event.target.value)}
        //인풋박스의 value가 변경되면 ssetUsername함수가 실행되어서 입력되는 값을 username의 값으로 업데이트해준다
        placeholder="여기는 인풋입니다."
        className="tweetForm__input--username"
      ></input>
      <div>{msg}</div>
      <textarea
        type="text"
        value={msg} //텍스트에어리어의 value는 msg이다
        onChange={(event) => setMsg(event.target.value)}
        textarea의 value가 변경되면 ssetUsername함수가 실행되어서 입력되는 값을 username의 값으로 업데이트해준다
        placeholder="여기는 텍스트 영역입니다."
        className="tweetForm__input--message"

      ></textarea>
    </div>
  );
}

---

const Tweets = () => {
  // TODO : 새로 트윗을 작성하고 전송할 수 있게 useState를 적절히 활용하세요.
  const getRandomNumber = (min, max) => {
    return parseInt(Math.random() * (Number(max) - Number(min) + 2));
  };
 
  const [msg, setMsg] = useState('');
  const [user, setUser] = useState('')
  const [tweets, setTweets] = useState(dummyTweets)
  const handleButtonClick = (event) => {
    if(user.length < 1 || msg.length < 1){
      return alert('내용 적어야겠지? 응?')
    } 
    const tweet = {
      id : tweets.length,
      username : user,
      picture : `https://randomuser.me/api/portraits/women/${getRandomNumber( 1, 98)}.jpg`,
      content : msg,
      createdAt : String(new Date()),
      updatedAt : String(new Date()) 
    };
    setTweets([tweet, ...tweets])
    setMsg('')
    setUser('')
    console.log(tweet)
  };

  const handleChangeUser = (event) => {
    
    setUser(event.target.value)
  };

  const handleChangeMsg = (event) => {
    setMsg(event.target.value) 
  };
  
  return (
  
  
   <div className="tweetForm__container">
        <div className="tweetForm__wrapper">
          <div className="tweetForm__profile">
          
            <img src="https://randomuser.me/api/portraits/men/98.jpg" />
          </div>
          <div className="tweetForm__inputContainer">
            <div className="tweetForm__inputWrapper">
              <div className="tweetForm__input">

                <input        
                  type="text"
                  value={user} 
                  placeholder="your username here.."
                  onChange={handleChangeUser}
                  className="tweetForm__input--username">
                </input>

                 <textarea            
                    type="text"
                    value={msg} 
                    placeholder="your message here.."
                    onChange={handleChangeMsg}
                    className="tweetForm__input--message">
                    </textarea>

              </div>
              <div className="tweetForm__count" role="status">
                <span className="tweetForm__count__text">
                  {/* TODO : 트윗 총 개수를 보여줄 수 있는 Counter를 작성하세요. */}
                  total: {filtertweets.length}
                </span>
              </div>
            </div>
            <div className="tweetForm__submit">
              <div className="tweetForm__submitIcon"></div>
              {/* TODO : 작성한 트윗을 전송할 수 있는 button 엘리먼트를 작성하세요. */}
              <button className='tweetForm__submitButton' onClick={handleButtonClick}>Submit</button>
            </div>
          </div>
        </div>
      </div>