▶ 리액트 JSX 자동완성 설정
ctrl + shift + P 눌러서 setting.json 검색후 Open User Settings(JSON) 클릭
그럼 settings.json 파일이 열리는데 파일 맨밑 마지막 괄호 전에
를 복사 붙혀넣기 하면 이제 리턴 영역에서 태그 자동완성이 알아서 뜸!!(아주 매우 편함)
▶어제 만든 값을 입력하는 파일에 삭제 버튼을 추가하고 선택한 데이터를 삭제하는 버튼 만들기
삭제 할때 배열 안에 삭제할 값 빼고 나머지들을 다시 담아주어야 하기때문에
뺄 값의 index를 가져와서 배열 안의 값들과 비교하여 !== 를 통해 같지 않은것만 다시 넣기
■ 여기서 window.confirm 말고 SweetAlert2 를 가르쳐 주심(출처 : https://sweetalert2.github.io/)
terminal 창에 bash를 하나더 만들어서
npm install sweetalert2 입력하면 자동으로 설치
▶ 설치한 sweetalert2를 사용하여 삭제 event 작성하기
confirmButtonText 가 isConfirmed 값을 true로 주고
cancelButtonTest가 isConfirmed 값을 false로 값을 준다.
(showCancelButton을 true 설정 해주어야 cancelButton이 화면에 나타남)
그러고 Swal 괄호 끝에 if-else 문 처럼 .then을 붙혀줘서 result 값을 가져와서 if구문에 result.isConfirmed 값이 true일 때
삭제할 데이터를 배열안에서 index 비교하여 삭제할 index를 제외하고 나머지 값들은 다시 가져오도록 한다.
▶ 입력된 내용을 수정할 수 있게 만들기
tbody 안에 있는 입력되 내용을 클릭 하였을 때 수정 할 수 있도록 만들기
onClick, onChange 같은 곳엔 함수 호출이 아니라 정의가 들어가야함!!
handleEditClick을 실행하면 매개변수로 key, index를 받아온다.
(위에 onClick 할 때 handleEditClick("username", index) 로 넣은 값들이 매개변수이다.)
` ` (백커터) : 값을 문자열로 나타낼때 나타내고 싶은 문자열에 값을 넣고 전부 ` `(백커터)에 넣는다.
받은 매개변수와 map을 사용하여 기존 배열의 key값과 index가 같은 값을 비교하여
result 값으로 수정 받은 값을 그 자리에 수정 해준다.
▶ Array map 정리
aList = [10, 20, 30] 이라는 배열이 있다.
배열에는 .map을 사용 할수 있는데
.map(funtion) 맵 안에는 함수가 들어온다.
-> const fx = (value, index) => {}
.map( () => ) 함수 호출
map을 호출하면 반복문이 시작된다.
ex)
functon map(fx) {
let newList = [ ]; // 반복문이 시작되면서 새로운 배열 하나가 만들어진다.
for(let i = 0; i < aList.length ; i++) {
const a = aList[i];
newList = [ ...newList, fx(a, i) ];
}
return { newList };
}
● 함수 정의
map( ( value, index ) => {
if( index === 1 ) {
return {
...aList,
[value]: 40;
}
}
}
▶ Array filter 정리
aList = [10, 20, 30] 이라는 배열이 있다.
배열에 .filter를 사용 하면
.filter(funtion) 맵 안에는 함수가 들어온다.
-> const fx = (value, index) => {}
.filter( () => ) 함수 호출
filter을 호출하면 반복문이 시작된다.
ex)
let newList = [ ];
for(let i = 0; i < aList.length ; i++) {
const a = aList[i];
if(fx(a, i)) {
newList = [ ...newList, a ];
}
}
return { newList };
●함수 정의
filter( ( value, index ) => {
return value.newList !== "b";
또는
return index !== 2;
}
■ 매번 새파일 만들고 function 이랑 export default 치는 extensions 설치
extensions 검색창에 Simple React Snippets 설치하기
파일 생성후
ffc 엔터 하면 function 이랑 export default를 자동으로 입력 해준다.
▶ 만들기
input 을 3개를 만들고
추가, 수정, 삭제 버튼을 3개 그리고 확인, 취소 버튼 2개를 따로 또 생성
추가 buttonClick : input 박스에 입력 할 수 있게 되고, 추가 버튼을 안눌렀을땐 input 박스에 데이터 입력 못하게 하기
수정 buttonClick : 수정 할 데이터를 checkBox를 통해 한개의 데이터만 체크하여 수정 할 수 있도록 하기
삭제 buttonClick : 체크박스에 체크하여 여러개의 데이터 삭제 할 수 있도록 생성
를 만들어 볼 예정이다.
파일이 너무 많아 링크 첨부 : https://github.com/mjy102097/korit_6_sqf_react_study/tree/main/src/ch11
'react' 카테고리의 다른 글
| react 수업 정리(5일차) (0) | 2024.06.25 |
|---|---|
| react 수업 정리(4일차) (0) | 2024.06.24 |
| react 수업 정리(2일차) (0) | 2024.06.21 |
| react 수업 정리(1일차) (0) | 2024.06.19 |