인프런 커뮤니티 질문&답변

blossom_mind님의 프로필 이미지
blossom_mind

작성한 질문수

[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

4.2) 첫 React App 생성하기

궁금한게 있습니다.

해결된 질문

작성

·

50

0

실제 일기장 프로젝트를 보면요

App.js 에

  return (
    <>
      <DiaryStateContext.Provider value={data}>
        <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/new" element={<New />} />
            <Route path="/edit/:id" element={<Edit />} />
            <Route path="/diary/:id" element={<Diary />} />
            <Route path="*" element={<Notfound />} />
          </Routes>
        </DiaryDispatchContext.Provider>
      </DiaryStateContext.Provider>
    </>
  
);

이렇게 되어있고

다른 페이지 ( Diary,Ediit,Home,New) 등 페이지에서는

Header 을 공통적으로 include 하고 있는데요 .

혹시 이걸 시작하는 App에서다가 추가하고 실제 Diary에 적용되도록 하는 방법이 혹시 있을까요 ..?

먼가 페이지 마다 인클루드 할려니깐 .중복되는코드 같아서요

답변 1

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

우선 App 컴포넌트도 동일한 리액트 컴포넌트이므로 Header 컴포넌트를 Routes 컴포넌트위에 배치하셔도 괜찮습니다. 그러나 페이지 별로 Header 컴포넌트에 전달하는 Props의 값이 달라지는데 이를 하나의 파일 내에서 관리하기 꽤나 까다로울 것으로 보입니다. 따라서 강의에서 진행한 방식처럼 파일별로 별도로 import 해 주는 방식을 권장드리고 있습니다.

blossom_mind님의 프로필 이미지
blossom_mind

작성한 질문수

질문하기