[웹 FE 스터디] React : 이벤트 ~ 생성 기능

TAB 2022 2학기 학회활동 [팀 스터디]

 TIL 포스팅입니다.

작성자 : 40기_박지민

---

ref. 생활코딩 [React]

---

Event

▶ html과 react의 표현 차이 (ex) onclick

html : onclick = "~"

react : onClick = { }

 

▶ function(event){ }

태그 클릭 시 페이지 리로드가 일어나지 않도록 이벤트 객체를 첫 번째 파라미터로 주입

이벤트 객체에는 해당 이벤트 상황을 제어할 수 있는 여러 정보와 기능이 들어가 있다.

(event) => 로 축약가능

{} 내에는 함수 호출 후 실행될 내용을 입력.

 

▶ event.preventDefault();

해당 코드를 포함한 태그가 동작하는 기본동작을 방지

클릭해도 리로드가 일어나지 않게 한다.

*button태그는 event.preventDefault();를 필요로 하지 않는다.

 

▶onSubmit

form태그(입력, 제출 기능 포함한 태그)에서 발생하는 이벤트 

---

 

State 

컴포넌트 만드는 내부자를 위한 데이터

입력 : prop

출력 : 새로운 ui

const  _mode = useState('초기값'); const mode = _mode[0]; const setMode = _mode[1]; → const[mode, setMode]  = useState('초기값');

*mode와 setMode는 디폴트네임. 이름변경가능.

*id따라 State내용 변경 시 const[id,setId] = useState(null); 추가

 메인코드에 setId(id); 추가

* prop : 컴포넌트 사용하는 외부자를 위한 데이터

* 태그 속성 입력시, 숫자로 입력하여도 태그의 속성으로 넘기면, 문자로 취급

 

▶ import {useState} from 'react';

리액트를 제공하는 기본함수

State사용 시 필수

 

▶ useState(' ');

배열 리턴. 

0번째 원소 : 상태 값을 읽을 때 사용되는 데이터. state초기값(' ' 내 인자)

1번째 원소 : 상태 값 변경 시 사용하는 함수

 

---

생성 기능

<a href="/create" onClick={event=>{ event.preventDefault(); setMode('CREATE'); }}>Create</a>	- 메인 (function(App){})에 들어갈 내용 - Create UI 생성 - 모드 변경
{ content = <Create onCreate={(_title, _body)=>{ const newTopic = {id:nextId, title:_title, body:_body} const newTopics = [...topics] newTopics.push(newTopic); setTopics(newTopics); setMode('READ'); setId(nextId); setNextId(nextId+1); }}></Create> }	- if(mode==='CREATE'){} 내에 들어갈 내용 - create가 복잡한 UI를 가져 별도 컴퍼넌트 Create로 분화 - onCreate의 콜백함수는 title과 body값을 받아옴   사용자가 입력한 값을 create 컴포넌트의 사용자에게 공급 - topics를 상태로 승격시켜   새로운 원소 추가 시 목록이 추가되는 기능 마련   * nextId는 그 다음 원소의 id값
function Create(props){ return <article> <h2>Create</h2> <form onSubmit={event=>{ event.preventDefault(); const title = event.target.title.value; const body = event.target.body.value; props.onCreate(title, body); }}> <p><input type="text" name="title" placeholder="title"/></p> <p><textarea name="body" placeholder="body"></textarea></p> <p><input type="submit" value="Create"></input></p> </form> </article> }	- 생성 양식 제공.   예시 내에서는 제목과 내용 작성란이 placeholder형태로 존재 - onSubmit props제공하여 제출버튼 클릭 시 Jscript 실행 - event.target을 통해 form태그에 소속되어 있는   이름이 title과 body인 태그의 value값 가져옴

---

수정 (업데이트) 기능

 

▶ 원시 데이터 타입

string, number, boolean, bigint, undefined, symbol, null

 

▶ 범 객체

object, array

 

▶ 객체 값의 수정

newValue = {...value} → value값 복제한 새로운 데이터가 newValue의 값이 됨.

newValue 변경 후 setValue(newValue) → 컴포넌트 재실행

* 배열의 경우 {...value} 대신 [...value] 사용

 

▶ 수정 시의 주의점

오리지널 데이터 변경 시 기존 데이터와 변경된 데이터가 같을 경우 컴포넌트는 다시 랜더링되지 않는다.

const[value,setValue] = useState(1); setValue(2);	랜더링 작동
const[value,setValue] = useState([1]);  value.push(2); setValue(value);	랜더링 미작동 (데이터 동일)
const[value,setValue] = useState([1]);  newValue = [...value] newValue.push(2); setValue(newValue);	랜더링 작동

 

▶ 업데이트 주의점

1. 수정 시 기존의 값이 value값으로 주입되었을 때는 props에서 state로 갈아탈 것

2. 값이 변경될 때마다 변경된 값을 state로 바꿔서 그 값을 다시 피드백 받을 것