해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.

props

이전 시간에는 컴포넌트가 관리하는 상태값, state 에 대해서 알아보았다.

이번에는 props 에 대해서 알아보자.

props 는 properties 의 약자로, 속성값을 의미한다.

props 값은 컴포넌트 내부에서 변경할 수 없다.

props 값은 넘겨받은 그대로 사용해야 한다.

만약 props 값을 변경하고 싶다면, 컴포넌트 내부에서 state 를 다시 새로 만들어야한다.

예를들어, age 에 대한 state 를 하나 만들어보자. → state 가 하나 더 생성되었다.

age 는 state 값을 바꿔주고 있다. 현재는 props.age 를 바꿔주고 있는게 아니다.

화면의 어떤 데이터를 갱신하기 위해서는 useState, props 2가지를 사용하는 것이 좋다.

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

Hello.js

<UserName> 태그 안의 {name} 은 Hello 컴포넌트 안에서는 state 이다.

userName 컴포넌트 입장에서 {name} 은 props 이다.

개발자가 해줘야 할일은 데이터만 적절히 바꿔주면 된다.

데이터 변경시 컴포넌트는 자동적으로 랜더링을 하고, 화면의 UI 정보는 갱신된다.

일일히 어떤 요소를 어떤 값으로 바꿔줘야 할지 찾아다닐 필요가 없어졌다.