[React] 리액트 Props란?

🎯 리액트 Props란?

📝 props란?

// 컴포넌트 생성
const Welcome = (props) => {
    retutn <h1>Hello, {props.name}</h1>;
}

// 컴포넌트 사용
const App = () => {
    return <div>
        <Welcome name="수영" />
        <Welcome name="민수" />
        <Welcome name="영희" />
    </div>;
}

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

 

📝 props는 읽기 전용이다.

// props 값 변경 금지!!!!!!!!!!XXXXXXXXXXXXXXXXXXX
const Welcome = (props) => {
    props.name = props.name + "님";
    return <h1>Hello, {props.name}</h1>;
}

// 새로운 변수 생성 후 가공하여 사용
const Welcome = (props) => {
    const username = props.name + "님";
    return <h1>Hello, {username}</h1>;
}

• props는 읽기 전용이라서 값을 변경하면 안 된다.
• 변경한다고 해서 에러가 발생되는 것은 아니지만 리액트가 props의 변경을 감지하고 재 랜더링 하는데 문제를 야기할 수 있다.
• props 값을 받고 가공하고 싶다면 새로운 변수를 생성하고 props 값을 복제해서 사용한다.

 

📝 DOM Element의 Attributes

• 기본적인 DOM Element(div, span 등)들의 Attribute는 camel case로 작성한다.
  • tabIndex, className 등
• ‘data-’ 또는 ‘aria-’ 로 시작하는 Attribute는 예외
  • data-type, aria-label 등
• HTML의 Attribute와 다른 이름을 가지는 Attribute가 있다.
  • class → className, for → htmlFor 등
• HTML의 Attribute와 다른 동작 방식을 가진 Attribute가 있다.
  • checked → defaultChecked
  • value → defaultValue
  • style은 객체 형태로 작성
• React에서만 쓰이는 새로운 Attribute가 있다.
  • key
  • dangerouslySetInnerHTML(문자를 html으로 변경할 때 사용, 잘 사용 안 함)

 

📝 HTML과 다른 방식의 React Attribute(checked, value)

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

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

 

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

const Names = () => {
    const names = [
        {key: '1', value: '민수'},
        {key: '1', value: '영희'},
        {key: '1', value: '길동'},
    ]
    return (
        <div>
            {names.map((item) => (
                <li key={item.key}>{item.value}</li>
            ))}
        </div>
    )
}

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