리액트에서 중요한 keyword 모음
useEffect, useState, inputRef , function, component, App ,dummy, map 함수, 컴포넌트 상속
useEffect : 함수를 특정 조건일 때 발동시킨다.
useState: 변수를 업데이트 할 때 사용한다.
inputRef : 입력 받은 값을 변수에 저장시킨다.
function : 변수를 업데이트 시킬 함수를 저장하는 예약어다.
component : 하나의 앱에 들어갈 요소들 (instance 개념이며, 각각의 컴포넌트 들을 하나의 스크립트 파일로 관리한다.)
App : html에 띄울 최종적인 컴포넌트의 집합
dummy : json 데이터를 가져올 때, import dummy from "json 데이터 파일 경로" 를 사용하여 dummy 변수에 담는다.
map 함수 : 반복문과 동일한 효과. 배열을 가져와서 또 다른 배열을 return할 때 사용한다.
map 함수 예제:
const arr = [ 10, 20, 30, 40, 50 ];
//일반 함수 형태 arr.map(function(item, index) { console.log(index+"번 값", item); });
//화살표 함수 형태
arr.map((item, index) => { console.log(index+"번 값", item); });
https://mjn5027.tistory.com/80
Q: 여기서 궁금 증
이 코드에서 input key = {user.id} 이게 뭘까..? 파라미터인가 변수인가..
또 map함수에서 index라는 파라미터가 따로 존재하는 것인가?
A:
map함수는 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 사용한다.
array.map(callbackFunction(currenValue, index, array), thisArg)
filter, forEach와 같은 구문이다.
callbackFunction, thisArg 두개의 매개변수가 있고
callbackFunction은 currentValue, index, array 3개의 매개변수를 갖는다.
- currentValue : 배열 내 현재 값
- index : 배열 내 현재 값의 인덱스
- array : 현재 배열
- thisArg : callbackFunction 내에서 this로 사용될 값
그렇다네요....
const days = ["Mon", "Tue", "Wed", "Thus", "Fri"];
const smilmingDays = days.map(day => console.log(day));
여기서 map 함수안의 day변수가 days 배열의 각 요소로 맵핑된다.
*중요 문법 : 화살표 뒤에는 괄호가 온다 .
ex) wordList = dummy.words.filter(word => (word.day ===1))
그리고 신기한 문법을 발견했다.
도대체 반복문 안에 태그가 들어있는건 뭐지..? 로직이 이해가 되질 않는다.
'react' 카테고리의 다른 글
React-dom과 렌더링 (render)에 관해서 (0) | 2023.08.31 |
---|