참고 자료

props 와 지역/전역 다시 이해하기

내가 이해한 props :

• 자식 컴포넌트가 부모 컴포넌트의 어떤 값을 이용하려 할 떄 변수로 받아오는 것

• 간단한 예시

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" color="red"/>
    // 줄 값을 정해준다.
  );
}

export default App;

Hello.js

import React from 'react';

function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}

export default Hello;

이러면 안녕하세요 react가 빨간 글자로 나온다.

이해됐다. 그럼 내 프로젝트에서는 어떻게 프롭스를 넘겼을까?

지역으로 관리한 Header.jsx
e.g
(부모컴포넌트인 PostRead.jsx)

		...
      <Header Navigate={"/postread"} />
        ...

(자식컴포넌트 역할을 하는 Header.jsx)

const Header = (props) => {
  const navigate = useNavigate();
  const params = useParams();
  const dispatch = useDispatch();

  //카테고리별 이동 및 get 을 위한 state 변경
  const onClickCategoryHandler = (data) => {
    navigate(`${props.Navigate}/${data}/${params.sort}`);
  };

아하. prop로 관리하면 지역이고 reducer까지 가면 전역이구나. 이것도 다시 깨달았다.