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

props , PropTypes, 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. PropTypes

 

https://ko.legacy.reactjs.org/docs/typechecking-with-proptypes.html

PropTypes와 함께 하는 타입 검사 – React

 

https://react.dev/reference/react/Component#static-proptypes

Component – React

 

 

타입	검사 방법
모든 타입	PropTypes.any
Number 객체	PropTypes.number
String 객체	PropTypes.string
Boolean 객체	PropTypes.bool
Function 객체	PropTypes.func
Array 객체	PropTypes.array
Object 객체	PropTypes.object
Symbol 객체	PropTypes.symbol
Node 객체	PropTypes.node
React 요소	PropTypes.element
여러 타입 중 하나	PropTypes.oneOfType([PropType.number, PropType.string])
특정 클래스의 인스턴스	PropTypes.instanceOf(Date)
전달 속성 제한	PropTypes.oneOf(['name', 'career'])
특정 타입 집합으로 제한	PropTypes.arrayOf(PropTypes.string)
특정 타입을 속성 값으로 하는 객체 제한	PropTypes.objectOf(PropTypes.number)
특정 형태를 갖는 객체 제한	PropTypes.shape({ prop1, prop2 })

 

 

isRequired 설정은 필수로 전달 받는 속성을 말합니다.

 

설정	설명
PropTypes.string.isRequired	문자 형 (필수)
PropTypes.number.isRequired	숫자 형 (필수)
PropTypes.func.isRequired	함수 형 (필수)
PropTypes.bool.isRequired	불리언 형 (필수)

 

 

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  static propTypes = {
    name: PropTypes.string
  };

  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

 

 

3. 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는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

 

 

 

4. events

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

이벤트 처리하기 – React

 

on + 첫글자 대문자

onClick

 

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

 

 

 

5. 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());