props???

시작하며

리액트를 공부하면서 컴포넌트와 props에 대해 많이 접하게 되었습니다. 그래서 제가 배운 내용을 글로 적어 보려고 합니다!

Props란?

props는 properties(속성)의 약자입니다.
우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때 props를 사용합니다.

function Welcome(props) {
  return <h1>안녕, {props.name}!</h1>;
}

function App() {
  return <Welcome name="강현" />;
}

Welcome 컴포넌트에서 name값을 사용하고 싶을때 어떻게 할까요?
컴포넌트에게 전달되는 props는 파라미터를 통하여 조회 할 수 있습니다. props는 객체 형태로 전달되며 만약 name 값을 조회하고 싶다면 props.name을 사용하여 조회 할 수 있습니다.

여러 개의 props

props는 여러 개 전달이 가능합니다. 예를 들어 color라는 값을 추가로 전달하면, 다음과 같이 사용할 수 있습니다.

<Hello name="react" color="red" />

컴포넌트에서 props를 반복해서 사용하다 보면, 비구조화 할당 문법이 훨씬 코드를 간결하게 만들어줍니다. 함수의 파라미터에서 props를 구조 분해하면 아래와 같습니다.

function Hello({ name, color }) {
  return <div style={{ color }}>{name}</div>;
}

이렇게 하면 props.name과 props.color 대신, 바로 name, color를 사용할 수 있어 코드가 더욱 읽기 쉬워집니다.

props는 읽기 전용

props는 부모에서 자식으로만 흐르는 데이터 입니다.
즉 자식 컴포넌트는 props를 변경할 수 없습니다.
만약 데이터를 수정해야 한다면,
부모에서 state를 관리하고 props로 다시 내려주는 방식으로 처리해야 합니다.

function CounterDisplay({ count }) {
  return <h2>현재 카운트: {count}</h2>;
}

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <CounterDisplay count={count} />
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  );
}

count는 부모인 Counter에서 관리됨
CounterDisplay는 단지 그 값을 받아서 보여주기만 함

props의 구조 분해 할당

props.name, props.age 처럼 매번 props.을 쓰는 것은 귀찮을 수 있습니다
이럴땐 구조 분해 할당을 사용하면 깔끔 해집니다.

function UserCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age}살</p>
    </div>
  );
}

function App() {
  return <UserCard name="강현" age={17} />;
}

props state 차이

props는 읽기 전용입니다 상위에서 하위로만 전달 가능 합니다. 하지만 state는 컴포넌트 내부에서 변경이 가능합니다.
props는 상위 컴포넌트에서 관리 합니다. 하지만 state는 해당 컴포넌트 내부에서 관리 합니다.
props의 용도는 컴포넌트 간 데이터 전달이고 state의 용도는는 UI의 상태를 동적으로 변경합니다.

props 기본값 defaultProps

props가 전달되지 않았을 때 사용할 기본 값을 저장할 수 있습니다.

function Hello({ name = "게스트" }) {
  return <h1>안녕, {name}!</h1>;
}
Hello.defaultProps = {
  name: "게스트",
};

이 코드에서는 props를 전달하지 않아도 에러 없이 기본값이 표시됩니다.

children props

컴포넌트 태그 사이에 넣은 내용을 참조 해야 할 떄는 props.children을 활용합니다. 예를 들어 Wrapper 컴포넌트 내부에 자식들을 렌더링하려면 아래와 같이 작성합니다.

function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return <div style={style}>{children}</div>;
}

이 Wrapper 컴포넌트로 감싼 자식들의 내용을 모두 받아 렌더링 합니다. 이를 활용해 여러 컴포넌트를 그룹화 하고 레이아웃을 간편히 구성 가능 합니다.

마무리

오늘은 props의 개념과 state와의 차이점을 간단하게 알아 보았습니다. React에서 컴포넌트 간의 데이터 전달과 내부 상태관리를 효과적으로 할 수 있습니다. 앞으로 저도 프로젝트에 잘 적용하며 써보도록 하겠습니다. 감사합니다.