[React] 리액트 State와 Props의 차이(...defaultProps)

React의 state 와 props

실전 프로젝트가 마무리되어가면서 그동안 공부했던 기본적인 내용들을 하나하나 다시한번 되짚어보려고 한다. 리액트를 사용하게 되면서 가장 기본적이고 중요하게 알아야했던 state와 props의 개념과 차이에 대해서 설명할 것이다.

Props

props는 properties의 약자로 부모 컴포넌트가 자식 컴포넌트로 내려주는 data를 말한다. 즉 상위 컴포넌트의 데이터를 하위 컴포넌트에 공유하는데 사용하며 자식 컴포넌트는 부모 컴포넌트로부터 props를 받아 사용한다. props는 부모요소에서 설정하는 것으로 상속받은 자식 컴포넌트 내에서 수정이 불가능한데 리액트는 부모에서 자식으로라는 일방향성 상속이라는 특징을 가지고 있기 때문이다.

// 페이지네이션에서 넘겨주는 props 예제
// 부모 컴포넌트
const Funding = () => {
  const dispatch = useDispatch();
  const [page, setPage] = React.useState(1)

  const funding = useSelector((state) => state.fund.fund_list);
  const totalPages = useSelector((state) => state.fund.totalPages);

  React.useEffect(() => {
    dispatch(getActions.getFundingAC(page));
  }, [page]);

  return (
    <React.Fragment>
      <FundingCardList funding={funding} />
      
      // Pagination이라는 자식 컴포넌트에 totalPages와 setPage를 넘겨줌
      <Pagination totalPages={totalPages} setPage={setPage}/>
    </React.Fragment>
  )
}

// 자식 컴포넌트
// props로 넘겨받은 totalPages와 setPage
const PaginationSize = ({ totalPages, setPage }) => {
  return (
    <Page>
      <Stack spacing={2}>
        <Pagination
          count={totalPages}
          onChange={(e, page) => setPage(page)}
          shape="rounded"
        />
      </Stack>
    </Page>
  );
}

defaultProps

data를 상속하고 상속받다보면 가끔 data를 빼먹는 실수를 할 수도 있고, 제대로 전달이 이루어지지 않아 렌더링에 실패했을 때 데이터가 나와야할 부분이 비어있으면 당황스러울 수 있다. 그럴 때 props의 값이 비어있지 않도록 기본값을 설정해줄 수 있는데 그게 바로 defaultProps이다.

// 부모 컴포넌트
import React from 'react';
import Practice from '../Pages/Practice';

const App = () => {
  return (
      <Practice />
  );
};

export default App;

// 자식 컴포넌트
import React from 'react';

const Practice = (props) => {
    return <React.Fragment>{props.name}</React.Fragment>
};

Practice.defaultProps = {
    name: "동동이"
};

export default Practice;

State

state는 컴포넌트 내에서 유동적으로 변할 수 있는 data, 상태를 나타내며 컴포넌트 내부에서 선언되기 때문에 그 값을 변경해줄 수 있다. 상태에 따라 값이 변경되기때문에 state가 변경되면 컴포넌트가 다시 리렌더링 된다.

import React, { useState } from 'react';

// state 상태 : page, state의 상태변화 : setPage
const [page, setPage] = useState(1)

const PaginationSize = () => {
  return (
    <Page>
      // button을 클릭할 때마다 page의 초기값인 1에서 page - 1, page + 1 만큼의 값으로 변경됨.
      <button onClick={() => {setPage(page - 1)}}>Previous</button>
      <button onClick={() => {setPage(page + 1)}}>Next</button>
    </Page>
  );
}