7장 오류

[dev-yakuza]

228 페이지

...
import { InputContainer } from 'components/InputContainer'; // 삭제
...
function App() {
  return (
    <Container>
      <ToDoListContextProvider>
        <Routes>
          <Route path="/" element={<DataView />} />
          <Route
            path="*"
            element={
              <NotFound>
                404
                <br />
                NOT FOUND
              </NotFound>
            }
          />
        </Routes>
      </ToDoListContextProvider>
    </Container>
  );
}
...

- 이렇게 App.tsx 파일을 수정하고 저장한 후 브라우저를 확인해 보면, [그림 7-4]
+ 이렇게 App.tsx 파일을 수정하고 저장한 후 브라우저로 http://localhost:3000/을 열어 확인해 보면, [그림 7-4]

230 페이지

...
import { DataView } from 'components/DataView'; // 삭제
import { DataView } from ‘pages/DataView';
...

231 페이지

...
import { ToDoInput } from 'components/ToDoInput';
...
function App() {
  return (
    <Container>
      <ToDoListContextProvider>
        <Routes>
          <Route path="/" element={<DataView />} />
          <Route path="/add" element={<ToDoInput />} />
          ...
        </Routes>
      </ToDoListContextProvider>
    </Container>
  );
}
...

232 페이지

...
export const ToDoInput = () => {
 ...
 const onAddTodo = () => {
 if (toDo === '') return;
 onAdd(toDo);
 setToDo('');
 };
 return (
 ...
 );
};

- <ToDoInput /> 컴포넌트는 더 이상 부모 컴포넌트로부터 Props로 데이터를 전달
+ 그리고 더이상 사용하지 않는 ./src/components/InputContainer/index.tsx 컴포넌트를 삭제한다.
+ <ToDoInput /> 컴포넌트는 더 이상 부모 컴포넌트로부터 Props로 데이터를 전달

233 page

...
import { ToDoInput } from 'components/ToDoInput'; // 삭제
import { ToDoInput } from 'pages/ToDoInput';
...

242 페이지

...
import { Routes, Route } from 'react-router-dom';
import { Header } from 'components/Header';
...
// 삭제
const Header = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  background-color: #304ffe;
  padding: 8px 0;
  margin: 0;
`;

// 삭제
const StyledLink = styled(Link)`
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
`;
...
function App() {
  return (
    <Container>
      <ToDoListContextProvider>
        <Header />
        <Routes>
          ...
        </Routes>
      </ToDoListContextProvider>
    </Container>
  );
}

export default App;