위와 같이 인자로 보내주는 것을 보고 이벤트 정보라고 부른다. 이것은 이 함수를 호출할때 자동으로 해당 이벤트에 대한 객체를 전달해준다.
그래서 이걸 가지고 보았을때 onChange 부분에서도 이벤트 정보를 인자로 받아 사용할 수 있다. 그리고 받은 인자들을 함수로 넘기어 줄때는 화살표 함수를 반드시 사용해야한다.
이점도 알아야하는데 대괄호를 써야지 키값이 되고 안쓰면 그냥 스트링이 된다. 그래서 반드시 사용시에 대괄호를 붙여주자.
REACT REPEAT
하지만 이번에는 map함수를 알아볼것이다. map함수는 배열에 사용하는 함수이다. 함수형프로그래밍 map, filter가 대표적이다. map함수는 배열로서 사용하게 된다.
```
const numbers = [1,2,3,4,5];
const newNumbers = numbers.map((e) => {return (e+1)});
const newNumbers = numbers.map((e, i) => {return (e+1)});
```
배열을 변형시키어 새로운 배열을 만들어낸다. 이때 callBack함수안에 numbers에 있는 성분들이 담긴다. 그리고 이 성분들의 반환값을 다른 형태로 반환하면 새로운 배열에 각 성분들이 바뀐 형태로 반환된다.
참고로 map의 두번째 인자는 인덱스 값이다.
마지막성분은 map을 호출한 원본 배열이다.
이때 주의할 점이 만약에 map 함수로 태그를 반복시킨다면 태그에 반드시 key값을 정의해주어야 한다.
안할경우 위와같은 에러메세지를 확인할 수 있다. 이렇게해야하는 이유는 리액트가 virtual DOM을 이용해 변화된 부분만을 rendering하는데 이때 어디가 바뀌었는지 감지할때 key값을 기준으로 찾게 된다. 그래서 key값이 없으면 어떤게 예전 상태와 현재상태와 어떤것을 기준으로 비교해야할지에 대해 비효율적인 부분이 생길 수 있다.

비슷하게 foreach, filter 함수도 존재한다.
foreach함수는 map이랑 비슷하지만 그냥 안에 있는 함수를 실행하기만한다. 즉 반환하는게 없다.
```
numbers.forEach((e)=>{console.log(e)})
```
filter함수는 return 값이 true인 것에대해서만 새로운 배열을 만들어낸다.
```
numbers.filter((e)=>{e>3})
```
reduce는 그 내부의 값이 누적된다. 그래서 리스트 안의 값을 다 더할때 사용하게 된다.
```
const numbers = [1,2,3];
numbers.reduce((init, cur)=>{}, 0);
```
성분은 init과 cur이고 뒤쪽 0은 초기값이다. 그래서
0,1 -> 1,2 -> 3,3 = 6 으로 출력된다.
Input
1. 추가버튼을 누르면 input에 담긴 값이 alert 되도록하는 기능
- useState, onChange, onClick
1) useState로 value와 setValue 선언
2) input의 onChange 이벤트에 input에 담긴 값(e.target.value)을 setValue 함수를 사용하여 value를 변경(하는 함수로 전달)
3) 버튼의 onClick 이벤트가 발생 시 value값을 alert() (하는 함수로 전달)
예를들어 위와 같이 리스트에 값을 계속 집어넣는다면 과연 ul 태그 안에 성분이 나올까? 결론은 아니다. React는 useState로 선언되지 않은 것의 값이 바뀌었다고 새로 render 해주지 않기 때문이다. 그래서 names라는 배열도 useState로 선언해주어야한다.
그래서 위와같이 배열을 useState로 선언하고 성분을 가상DOM으로 접근해서 데이터를 삽입해주어야 한다. 이렇게하면 기존 names의 뒷부분에 value가 추가된다.
그럼 중간이나 처음에 삽입하려면 어떻게 해야할까?
앞에 삽입하려면 위와같이 위치만 바꾸어주면된다. 그럼... 중간은?
그리고 input에 있는 값도 value의 state와 연결해주려면 위와같이 정의해주어야 한다.
Early Return
최적화하겠다고 조건문을 너무 많이 쓰면 이것으로 인하여 callback hell문제점이 생긴다. 들여쓰기가 너무 많아서 가독성이 떨어진다는 것이다. 그래서 이를 해결하고자 early rerturn 해결책이 존재한다.
데이터 제거기능
React에서 리스트를 잘 안쓰는 이유중에 하나가 중간에 있는 데이터 삭제가 쉽지 않기 떄문이었다. 그렇다보니 객체형태로 주로 사용하게 되는데
위와같이 리스트를 바꾸어주자.
객체로 바꾸었으니 위와같이 또 바꾸어주어야 한다.
'
제거기능을 구현해보자.
1. parameter로 받아온 id와 names배열에서 id가 같은 element를 찾는다.
2. 그 element만 제거된 새로운 배열을 만든다. -> filter 함수
3. 새로운 배열을 setNames 함수를 이용해서 names를 변경시킨다.
위의 단계를 거치기 위해서 filter을 사용하게 된다.
그래서 구현결과 위와같이 filter을 이용한 조건에 맞는것만 가져온 리스트를 변수에 넣어 원하는 배열을 가지게 되는 것이 방법이다. 그리고 이걸 구현하기 위해서 위와같이 onDoubleClick 훅을 이용해서 함수를 실행하고 파라미터를 건내준다.
UseRef
- 기능
직접 DOM에 접근 == 컴포넌트가 재렌더링 되더라도 변수가 초기화되지 않음 - useRef 라이브러리 가져오기
import { useRef } from "react" - 선언
const a = useRef("value"); - 사용
a.current - DOM도 저장하여 접근할 수 있음.
'Development(Web, Server, Cloud) > 22) React.js & Node.js' 카테고리의 다른 글
react.js & node.js 6일차 (0) | 2022.01.01 |
---|---|
react.js & node.js 5일차 (0) | 2021.12.31 |
react.js & node.js 3일차 - React Rendering, Input, useState, filter, map, reduce (0) | 2021.12.23 |
react.js & node.js 2일차 (0) | 2021.12.23 |
react.js & node.js 1일차 (0) | 2021.12.22 |