react

react 2일차

miin1635@ 2023. 8. 18. 11:31

리액트에서 중요한 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

 

[ JavaScript ] 자바스크립트 map( ) 함수

값을 여러개 가지고 있는 배열에서 모든 값을 꺼내고자 할 때, 꺼내는 방법은 정말 다양하게 알려져 있다. 이번 포스팅에선 이러한 배열에서 값 꺼내는 방법 중 map( ) 을 다뤄보도록 하자. 아래와

mjn5027.tistory.com

 

 

 

Q: 여기서 궁금 증 

{userList.map((user, index) => (
        <input key = {user.id} type= "text"
        placeholder={user.name}
        style = {{display:"block"}}/>
    ))}

이 코드에서 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))

 

그리고 신기한 문법을 발견했다. 

const wordList = dummy.words.filter(word => (word.day ===1))
return (<>
<table>
    <tbody>
        {dummy.words.map(word=>(
        <tr>
            <td>
                    <tr><td>
                            {word.eng}
                        </td>
                        <td>
                            {word.kor}
                        </td>
                    </tr>
       
            </td>
        </tr>
        ))}
    </tbody>
</table>

</>
        );

도대체 반복문 안에 태그가 들어있는건 뭐지..?  로직이 이해가 되질 않는다. 

'react' 카테고리의 다른 글

React-dom과 렌더링 (render)에 관해서  (0) 2023.08.31