[새싹(SeSAC) 프론트엔드] day32 221129

 

📍이벤트 

* 이벤트 사용 시 유의사항 

 

- 카멜 표기법

: 이벤트 이름은 카멜 표기법으로 작성

- onClick, onKeyUp 등

 

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

: 실제 자바스크립트 코드를 전달하지 않음 

 

- DOM 요소에만 이벤트를 설정할 수 있음 

: div, button, input, form 등에만 이벤트 설정 가능 

: 직접 만든 컴포넌트에는 이벤트 설정 불가능  

 

이벤트 이름	이벤트 호출시험	JSX DOM 이벤트 프로퍼티
click	엘리먼트의 마우스나 키보드가 클릭될 때	onClick
submit	폼의 데이터가 전송될 때	onSubmit
mousemove	엘리먼트 위에서 마우스 커서가 움직일 때	onMouseMove
mouseover	엘리먼트 영역 위로 마우스 커서가 돌아다닐 때	onMouseOver
mouseout	엘리먼트 위로 마우스 커서가 영역을 떠나갈 때	onMouseOut
keydown	키보드 버튼이 눌렸을 때	onKeyDown
keypress	키보드 버튼 입력이 완료되었을 때	onKeyPress

 

 

preventDefault.html 

 

1. html 인라인으로 함수 작성

 

2. 함수 만들어서 호출

 

 

3. 리액트

 

 

* 실습

App.js

function App() {
  function linkClick(e) {
    e.preventDefault();
    console.log("link is clicked");
  }
  return (
    <div className="App">
      <a href="https://www.naver.com" onClick={linkClick}>
        클릭하세요
      </a>
    </div>
  );
}

 

 

 

🟥 onClick 이벤트에 매개변수 전달하기 

App.js

function App() {
  const [value, setValue] = useState("안녕하세요");
  const [font, setFont] = useState("50px");

  const fstyle = {
    fontSize: font,
  };

  function changeFont(size) {
    setFont(size);
  }

  function linkClick(e) {
    e.preventDefault();
    console.log("link is clicked");
  }
  return (
    <div className="App">
      {/* <a href="https://www.naver.com" onClick={linkClick}>
        클릭하세요
      </a> */}

      <div style={fstyle}>문구 크기 바꿔보기</div>
      <button
        onClick={function () {
          changeFont("100px");
        }}
      >
        버튼1
      </button>
      <button onClick={() => changeFont("30px")}>버튼2</button>
      {/* 에러코드 */}
      {/* <button onClick={changeFont("30px")}>버튼3</button> */}
      <button onClick={() => setFont("10px")}>버튼4</button>
    </div>
  );
}

 

 

 

🟥 onChange 이벤트

EventOnChange.jsx

const EventOnChange = () => {
  const [message, setMessage] = useState("onChange 이벤트");

  function printConsole(e) {
    console.log(e.target.value);
  }

  function onChange(e) {
    setMessage(e.target.value);
  }

  return (
    <div>
      <h1>{message}</h1>
      <input
        type="text"
        name="msg1"
        placeholder="내용을 입력하세요 "
        onChange={printConsole}
      />
      <input
        type="text"
        name="msg1"
        placeholder="내용을 입력하세요 "
        onChange={onChange}
      />
      <br>
      </br>
      <input
        type="text"
        onChange={(e) => {
          console.log(e.target.value);
        }}
      />
      <input
        type="text"
        onChange={(e) => {
          setMessage(e.target.value);
        }}
      />
    </div>
  );
};

 

 

 

🟥  input 태그가 여러개인 경우 

 

MultiInput.jsx

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

  console.log(form);
  console.log(form.username);
  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>
  );
};

 

 

🟥  form 태그를 이용하여 데이터 전송하기 

const NameForm = () => {
  const [form, setForm] = useState('');

  function updateValue(e) {
    setForm(e.target.value);
  }

  function submitHandler(e){
    console.log("submit 으로 받은 데이터 : ", form);
    e.preventDefault();
  }
  return (
    <div>
      <form onSubmit={submitHandler}>
      <h1>이름 : {form}</h1>
      <input type="text" onChange={updateValue} />
      <input type="submit" value="전송" />
      </form>
    </div>
  );
};

 

 

🟥 textarea로 내용입력받고 submit 

 

 

리액트에서 textarea 사용시 value={값}으로 넣어줘야 함 ! 

  <textarea value="안녕하세요">반갑습니다</textarea>



html에서는 textarea안의 값을 value에 넣어주면 나오지 않음 

 

 

TextArea.jsx

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}
          cols="30"
          rows="4"
          onChange={updateValue}
        ></textarea>
        <input type="submit" value="전송" />
      </form>
    </div>
  );
};

 

 

🟥 select

html에서 쓸 때

<select>
	<option>사과</option>
	<option selected>바나나</option>
</select>

 

react에서 쓸 때 

<select valeu={"selected하고 싶은 값"}>
	<option>사과</option>
	<option>바나나</option>
</select>

 

Select.jsx

const Select = () => {
  const [fruit, setFruit] = useState("");

  function updateValue(e) {
    setFruit(e.target.value);
  }
  function submitHandler(e) {
    e.preventDefault();
    console.log("submit으로 받은 데이터  : " + fruit);
  }
  return (
    <div>
      <form onSubmit={submitHandler}>
        <h3>선택한 과일 : {fruit}</h3>
        <select value="망고" onChange={updateValue}>
          <option value="사과">사과</option>
          <option value="망고">망고</option>
        </select>
        <input type="submit" value="전송" />
      </form>
    </div>
  );
};

 

 



select안에 value를 "망고"로 잡아둬서 페이지가 로드될때 "망고"에 selected 되어 있음 

 

 

 

🟥 이미지 추가하기

 

기타 잡다한 것들은 public 폴더에 넣어주기 

 

✅ import 

import 사용할_변수명 from '이미지_파일_경로'

➡️ 변수에 담겨져 있기 때문에 원할 때 불러와서 사용할 수 있다 

 

✅ require()

require("이미지_파일_경로") 

 

 

✅ public 디렉토리 내부에 이미지 추가 

<img src="/images/dog.png" />

: public 방식을 제일 많이 사용함 

 

✅ 외부 서버의 이미지 추가 

<img src="URL">

 

 

InsertImage.jsx

import React from "react";
import image from "../images/dog.jpeg";

const InsertImage = () => {
  const url = "https://pbs.twimg.com/media/Df6SctGV4AAKAIS.jpg";
  return (
    <div>
      <h1>이미지 추가하기</h1>
      <img src={image} width="200px" height="200px" alt="강아지 사진" />
      <br></br>
      <img
        src={require("../images/dog2.jpeg")}
        width="200px"
        height="200px"
        alt="강아지사진"
      />
      <br></br>
      <img src="/images/dog3.jpeg" width="200px" height="200px" />
      <br></br>
      <img src={url} width="200px" height="200px" alt="" />
    </div>
  );
};

select에 이미지 넣기 

➡️ 반복적인 일이니깐 map()을 활용하여 출력 

 

 

 

 

 

 

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