[ React ] 02. props , map , events, useState

props ,  map , events,  useState

 

 

1. props

 

props 는 Properties 의 줄임말

부모 컴포넌트에서자식 컴포넌트에 값을 전달할때 
자식 컴포넌트에서 부모의 값을 받아올때 

JSX 문법에서 
컴포넌트를 작성할 때 컴포넌트에 속성을 지정할 수 있음 , 속성을 지정해주면 각 속성이 하나의 객체로 모여 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달

React 컴포넌트는 상위 컴포넌트에서 하위 컴포넌트로 데이터(props)가 흐릅니다. 하위 컴포넌트는 전달 받은 props를 읽기만 가능하고, 쓸 수 없습니다. (READONLY)

 

 

https://ko.react.dev/learn/passing-props-to-a-component

컴포넌트에 props 전달하기 – React

 

props

 

 

 

 

 

2. map

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Array.prototype.map() - JavaScript | MDN

 

 

https://ko.reactjs.org/docs/lists-and-keys.html

리스트와 Key – React

 

 

https://react.dev/reference/react/Children#children-map

Children – React

 

 

Key
Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

 

 

 

3. events

https://ko.legacy.reactjs.org/docs/handling-events.html

이벤트 처리하기 – React

 

on + 첫글자 대문자

onClick

 

마우스이벤트
click	마우스를 눌렀다가 떼었을때
mousedown	마우스를 눌렀을때
mouseup	마우스를 떼었을때
dblclick	마우스 더블클릭
mousemove	마우스 움직일때
mouseover	마우스를 영역 밖으로 옮겼을때
mouseout	마우스를 영역 밖으로 옮겼을때
mouseenter	마우스를 영역 안으로 옮겼을때
mouseleave	마우스를 영역 밖으로 옮겼을때
contextmenu	마우스 오른쪽

 

 

 

4. useState 

 

https://react.dev/reference/react/useState

useState – React

 

useState구성 요소에 상태 변수를 추가할 수 있는 React Hook입니다 .

const [state, setState] = useState(initialState)

 

최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다.
setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다.

 

import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [todos, setTodos] = useState(() => createTodos());