Props

Props란?

props 는 컴포넌트로 전달되는 매개변수로 생각하면 된다. 쉽게 함수의 매개변수. 컴포넌트에서 어떤 값을 전달받아 처리하고 싶다면 props 를 이용한다. 그리고 컴포넌트를 호출할 때 props 를 넘겨주어야 함.

기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며 넘겨 줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없다. 주로 Component의 재사용을 위해 사용한다.

function Introduce(props) {
  return <h2>I am a {props.name}!</h2>;
}

const element = <Introduce name="Effy"/>

• Props는 읽기 전용, props의 값을 임의로 변경해서 사용하면 안됨!

const Welcome = (props) => {
  const username = props.name + "님"
  return <h1>Hello, {username}</h1>
}

DOM Element의 Attributes

• 기본적인 DOM Element(div, span 등)들의 Attribute는 camelCase로 작성
  ex) tabIndex, className 등
• But! ‘data-‘ 또는 ‘aria-‘ 로 시작하는 Attribute는 예외
  ex) data-type, aria-label 등 (접근성과 관련한 attribute)
• HTML의 Attribute와 다른 이름을 가지는 속성
  class → className, for → htmlFor 등
• HTML의 Attribute와 다른 동작 방식을 가지는 속성
  checked(defaultChecked), value(defaultValue), style(obj로 작성) 등
  react에서는 최초 설정된 값이 변경되지 않음, 기본 값을 설정하고 싶은 경우, ( )의 속성 값을 사용해야함

<input type="checkbox" checked={false} />

HTML에서 checked 또는 value는 해당 값이 '초기값'으로 쓰이지만 React 내에서는 현재 값을 의미
즉, checked 값이 false로 고정되어 있는 경우 사용자가 checkbox를 클릭하여도 값의 변화가 일어나지 않음
만약, '초기값'의 의미로 checked 또는 value 를 사용하고 싶다면 defaultChecked, defaultValue를 설정

• React에서만 쓰이는 새로운 Attribute
  key, dangerouslySetInnerHTML 등

const Name = () => {
  const names = [
    {key: '1', value: '민수'},
    {key: '2', value: '영희'},
  ]
  reuturn (
    <>
    {names.map(item) => (
      <li key = {item.key}>{item.value}</li>
    )}
    </>
  )
}

• Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
• Key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야 한다. (재렌더링 시, 효율적)
• Key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다.
• 두 개의 다른 배열을 만들 때 동일한 Key를 사용할 수 있다.