React.js 를 사용하다면 state와 props는 절대 빼놓을 수 없다.
저번 포스팅을 통해서 state를 알아봤다면 이번 포스팅에서는 props에 대해서 알아보자.
props란 properties의 약자로써 전달되는 값을 말한다.
리액트 공식문서에서는 props를 매개변수 처럼 입력되는 값을 말한다고 하고있다.
즉 부모 컴포넌트에서 자식 컴포넌트에게 값을 전달해주고 싶을 때 props를 사용한다.
주의해야 할 점은 props는 state와 다르게 read only 이다.
간단한 코드를 통해서 props를 살펴보자
import Circle from "./Circle";
function App() {
return (
<div>
<Circle bgColor="teal" borderColor="red"/>
<Circle bgColor="red"/>
</div>
);
}
export default App;
App이라는 컴포넌트에서 Circle 컴포넌트를 자식 컴포넌트로 랜더링 한다.
이때 Circle 컴포넌트는 bgColor과 borderColor을 전달받고 있다.
Circle 컴포넌트를 살펴보자.
import styled from "styled-components";
interface ICircle {
bgColor:string;
borderColor?:string;
}
const Wrapper = styled.div<ICircle>`
width:100px;
height:100px;
border-radius: 50px;
background-color:${(props) => props.bgColor};
border-color: ${(props) => props.borderColor};
`;
function Circle({bgColor, borderColor}:ICircle) {
return (
<Wrapper bgColor={bgColor} borderColor={borderColor ?? "yellow"}/>
);
}
export default Circle;
**위 코드는 Typescript를 사용하고 있다.
Circle이라는 컴포넌트에서 bgColor, borderColor 이라는 두 props를 입력받아 Wrapper이라는 컴포넌트에 전달해준다.
그리고 Wrapper이라는 컴포넌트는 두 props를 받아서 각각 스타일링을 하고있다.
위에서는 타입스크립트의 optional을 사용했기에 borderColor이라는 props는 선택지가 되어버렸다. 하지만 bgColor이라는 props는 required 이기에 해당 props를 받지 않거나 전달해주지 않는다면 에러 메세지가 발생한다.
위에서 props는 반드시 read only 라고 하였다. 이는 전달 받은 컴포넌트에서 props는 변경되어서는 안된다는 말이다.
리액트 공식 홈페이지에 너무 잘 설명이 되어있어서 이를 그대로 가져왔다.
props와 state는 리액트의 기초중의 기초이기 때문에 정확히 짚고 넘어가야 할 필요성이 있었다.
다음 포스팅에서는 리액트의 useEffect 훅에 대에서 알아보도록 하겠다.