Props와 State 개요
React의 컴포넌트는 Function형과 Class형이 있습니다. Function형 컴포넌트는 Class형 컴포넌트에 비해 기능이 제한되었고 이를 해결하기 위해 Hook이 등장합니다. React에서는 Hook을 다음과 같이 설명합니다.
Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.
이러하여 React 문법에서 컴포넌트를 작성할 때는 Function형 컴포넌트를 작성한 후 필요한 Hook을 불러와 한계없는 React 기능을 사용합니다.
이번 글에 다루게 될 state와 Props 또한 Hook을 이용한 함수 컴포넌트에서 다룰 수 있는 속성입니다.
Props
객체지향에서 상속이라는 개념이 존재하듯 컴포넌트 간에도 부모 자식 관계를 형성할 수 있습니다. Props는 부모 컴포넌트로부터 자식 컴포넌트가 물려받는 불변의 속성을 의미하는 객체입니다.
Props의 사용법
const Parent = (data) => {
return (
<Child attribute={value}/>
)
}
const Child = (props) => {
return (
<div className='child'>{props.value}</div>
)
}
State
state는 필요한 Hook에서 컴포넌트 안의 값이 변경될 때 달라지는 값을 반환할 때 사용됩니다.