새싹 프론트엔드 실무 과정 7주차 React 이벤트

• 7주차 화요일

7. 이벤트

 

 

이벤트를 사용할 때 주의사항

- 카멜 표기법으로 작성

- 이벤트의 값으로 함수 형태를 전달

- DOM 요소(div, button, input, form)에만 이벤트를 설정 가능

 

 

이벤트에 매개변수 전달하기 : 익명함수를 통해서!

 

 

import React, { useState } from "react";

const ChangeFont = () => {

  const [value, setValue] = useState("안녕하세요");

  const [font, setFont] = useState("50px");

  const fstyle = {

    fontSize: font,

  };

  return (

    <div>

      <div style={fstyle}>{value}</div>

      <button

        onClick={() => {

          setFont("100px");

        }}

      >

        글자크기변경

      </button>

    </div>

  );

};

export default ChangeFont;

 

 

 

import React, { useState } from "react";

const MultiInput = () => {

  const [form, setForm] = useState({ username: "", message: "" });

  function onChange(e) {

    const nextForm = { ...form, [e.target.name]: e.target.value };

    setForm(nextForm);

  }

  return (

    <div>

      <h1>사용자 이름 : {form.username}</h1>

      <h1>내용 : {form.message}</h1>

      <input

        type="text"

        name="username"

        placeholder="사용자 이름"

        onChange={onChange}

      />

      <input

        type="text"

        name="message"

        placeholder="내용을 입력하세요"

        onChange={onChange}

      />

    </div>

  );

};

export default MultiInput;

 

➡ name와 객체를 이용하면 함수를 여러개 만들지 않아도 된다!

[e.target.name] 으로 사용한 이유! 문자열로 인식하기 때문에 [ ]로 묶어주기

 

 

 

 

form 태그를 이용한 데이터 전송

import React, { useState } from "react";

const NameForm = () => {

  const [form, setForm] = useState("");

  function updateValue(e) {

    setForm(e.target.value);

  }

  function submitHandler(e) {

    console.log("submit으로 받은 데이터 : ", form);

    e.preventDefault(); ➡ 새로고침 방지 form이랑 같이 써야함!

    // e.preventDefault();   ➡ 주석을 했을 경우 새로 고침!

  }

  return (

    <div>

      <form onSubmit={submitHandler}>

        <h1>이름 : {form} </h1>

        <input type="text" onChange={updateValue} />

        <input type="submit" value="전송" />

      </form>

    </div>

  );

};

export default NameForm;

 

submit 버튼 : form태그 안에 있는 데이터 전송, 페이지를 새로 고침

새로고침을 방지하기 위해 e.preventDefault()

 

 

 

textarea 태그를 이용한 데이터 전송

 

import React, { useState } from "react";

const TextArea = () => {

  const [text, setText] = useState("");

  function updateValue(e) {

    setText(e.target.value);

  }

  function submitHandler(e) {

    console.log("submit으로 받은 데이터 : ", text);

    e.preventDefault();

  }

  return (

    <div>

      <form onSubmit={submitHandler}>

        <h1>내용 : {text} </h1>

        <textarea value={text} onChange={updateValue} />

        <input type="submit" value="전송" />

      </form>

    </div>

  );

};

export default TextArea;

 

✅ HTML에서와 사용 방법이 다름

HTML : <textarea> 안녕하세요 </textarea>

리액트 : <textarea value={text} onChange={updateValue}/>

 

 

select 태그를 이용한 데이터 전송

import React, { useState } from "react";

const Select = () => {

  const [select, setSelect] = useState("");

  function updateValue(e) {

    setSelect(e.target.value);

  }

  function submitHandler(e) {

    console.log("submit으로 받은 데이터 : ", select);

    e.preventDefault();

  }

  return (

    <div>

      <form onSubmit={submitHandler}>

        <h1> 선택한 과일 : {select} </h1>

        <select value={select} onChange={updateValue}>

          <option value="apple">사과</option>

          <option value="mango">망고</option>

          <option value="banana">바나나</option>

          <option value="watermelon">수박</option>

        </select>

        <input type="submit" value="전송" />

      </form>

    </div>

  );

};

export default Select;

 

✅ HTML에서와 사용 방법이 다름

리액트 : <select value={select} onChange={updateValue}>

 

처음부터 특정 값이 선택되게 하려면,  useState('값');

 

 

 

이미지 추가하기

import React from "react";

import image from "../이미지_경로.jpg";

const InsertImages = () => {

  return (

    <div>

      <h1>이미지 추가하기</h1>

      1️⃣ <img src={image} width="300px" height="200px" alt="파일없음" />

      <br />

      2️⃣ <img

        src={require("../이미지_경로.jpg")}

        width="300px"

        height="200px"

        alt="파일없음"

      />

    </div>

  );

};

export default InsertImages;

 3️⃣ public 디렉터리 내부 이미지 추가

이미지 폴더 생성 후 관리해주면 좋음!

 

 

prevState 이전 상태의 값이 들어옴

 

map함수,,,🤦‍♂️

 

 

 

 

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 7주차 블로그 포스팅