React - props

React.js 를 사용하다면 state와 props는 절대 빼놓을 수 없다.
저번 포스팅을 통해서 state를 알아봤다면 이번 포스팅에서는 props에 대해서 알아보자.

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를 받지 않거나 전달해주지 않는다면 에러 메세지가 발생한다.

React는 props를 다룰 때 반드시 순수함수 처럼 동작해야한다.

위에서 props는 반드시 read only 라고 하였다. 이는 전달 받은 컴포넌트에서 props는 변경되어서는 안된다는 말이다.

리액트 공식 홈페이지에 너무 잘 설명이 되어있어서 이를 그대로 가져왔다.

props와 state는 리액트의 기초중의 기초이기 때문에 정확히 짚고 넘어가야 할 필요성이 있었다.
다음 포스팅에서는 리액트의 useEffect 훅에 대에서 알아보도록 하겠다.

 

리액트 공식 홈페이지 > props