React JS #8 props - 초보자를 위한 리액트 강좌

props
properties
속성값

App.js

      <Hello age={10}></Hello>
      <Hello age={20}></Hello>
      <Hello age={30}></Hello>

Hello.js

export default function Hello(props) {
    console.log(props);
}

콘솔

Hello.js

<h2 id="name">{name}({props.age}세)</h2>

브라우저

이 값은 컴포넌트 내부에서 변경할 수 없다. 넘겨받은 그대로 사용해야 한다.

만약 컴포넌트 내부에서 변경하고싶다면 state를 만들어야한다.

버튼을 누를 때마다 나이가 한 살씩 올라가도록 하고싶다면

const [age, setAge] = useState(props.age);

이렇게 초기값이 props.age인 useState를 만들고

            <h2 id="name">{name}({age}세)</h2>
            <button onClick={() => {
                setName(name === 'robyn' ? 'robin' : 'robyn');
                setAge(age + 1);
            }}>Change</button>

이렇게 적는다.
넘겨받는 값을 변경하는 것이 아니다. age를 변경하는 것이다.

넘겨받은 값을 변경하려고하면

props.age = 100;

Hello.js:4 Uncaught TypeError: Cannot assign to read only property 'age' of object '#'
이렇게 에러가 난다.

챗지피티한테 설명해보라고하니까 이렇게 나온다.

export default function Hello({age}) {

age를 이렇게 받아올 수도 있다.

    const msg = age > 102 ? '늙은이' : '젊은이';

    return (
        <div>
            <h2 id="name">{name}({age}) {msg}</h2>

한 컴포넌트가 가지고 있는 props를 state로 넘길 수도 있다.

UserName.js라는 파일을 만든다.

export default function UserName({name}){
    return <p>hi, {name}</p>
}

그리고 Hello.js에 다음과 같이 적으며 name을 전달한다.

<UserName name={name}></UserName>

name은 Hello 컴포넌트에서는 state이지만 UserName 컴포넌트에서는 props다.