3. Props

💨 Props 란 ? 

 

* 컴포넌트 생성

 

const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
}

 

* 컴포넌트 사용 

 

const App = () => {
  return <div>
    <Welcome name="멍식" />
    <Welcome name="구봉" />
  </div>;
}

 

기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며, 

넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavasScript의 요소라면 제한이 없다. 

주로 Component의 '재사용' 을 위하여 사용합니다. 

 

 

💨 Props 는 읽기 전용이다.

 

🥶 DON'T 

 

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

 

Props 의 값을 임의로 변경해서 사용하면 안된다.

 

😁 DO 

 

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

 

만약 Props의 값을 변경해서 사용하고 싶다면, 새로운 변수를 생성해서 사용해야한다. 

 

💨 React 에서만 쓰이는 새로운 Attribute ( key )

 

const Names = () => {
  const names = [
    { key: '1', value: '멍식'},
    { key: '2', value: '구봉'},
    { key: '3', value: '류크'},
  ]
  return (
    <div>
      {names.map((item) => (
        <li key = {item.key} > {item.value}</li>
      ))}
    </div>
  )
}

 

Key 는 React 가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. 

 

Key 는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정해야한다.

 

 Key 는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다.

 

두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.