6장 오류

[dev-yakuza]

책에 기술된 6장 코드가 잘못 기입된 부분이 있어서 이 이슈에 해당 내용을 공유해 드립니다.

6장 코드가 제대로 진행이 되지 않으신 분들께 참고가 되었으면 좋겠습니다.

불편을 드려서 정말 죄송합니다. 🙇

코드

171 page

import { useState } from 'react';
import styled from '@emotion/styled';
import { DataView } from 'components/DataView';
import { TextInput } from 'components/TextInput';
...
const Container = styled.div`
  ...
`;
...
function App() {
  const [toDoList, setToDoList] = useState(['리액트 공부하기', '운동하기', '책 읽기']);
  const onDelete = (todo: string) => {
    setToDoList(toDoList.filter((item) => item !== todo));
  };
  return (
    <Container>
      <DataView toDoList={toDoList} onDelete={onDelete} />
      <TextInput />
    </Container>
  );
}
export default App;

185 page

import { useState } from 'react';
import styled from '@emotion/styled';
import { DataView } from 'components/DataView';
import { ToDoInput } from 'components/ToDoInput';

const Container = styled.div`
  ...
`;

function App() {
  const [toDoList, setToDoList] = useState(['리액트 공부하기', '운동하기', '책 읽기']);
  const onDelete = (todo: string) => {
    setToDoList(toDoList.filter((item) => item !== todo));
  };
  const onAdd = (toDo: string) => {
    setToDoList([...toDoList, toDo]);
  };
  return (
    <Container>
      <DataView toDoList={toDoList} onDelete={onDelete} />
      <ToDoInput onAdd={onAdd} />
    </Container>
  );
}
export default App;

195 page

import { useState } from 'react';
import { ToDoInput } from 'components/ToDoInput';
import { ShowInputButton } from 'components/ShowInputButton';

export const InputContainer = () => {
  const [showToDoInput, setShowToDoInput] = useState(false);
  const onClose = () => {
    setShowToDoInput(false);
  };
  return (
    <>
      {showToDoInput && <ToDoInput onClose={onClose} />}
      <ShowInputButton show={showToDoInput} onClick={() => setShowToDoInput(!showToDoInput)} />
    </>
  );
};

205 page

import styled from '@emotion/styled';
import { DataView } from 'components/DataView';
import { InputContainer } from 'components/InputContainer';
import { ToDoListContextProvider } from 'contexts/ToDoList';

const Container = styled.div`
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #eeeeee;
`;

206 page

function App() {
  return (
    <Container>
      <ToDoListContextProvider>
        <DataView />
        <InputContainer />
      </ToDoListContextProvider>
    </Container>
  );
}

export default App;

208 page

import styled from '@emotion/styled';
import { Title } from 'components/Title';
import { ToDoList } from 'components/ToDoList';
const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  padding: 32px;
  border-radius: 8px;
`;

export const DataView = () => {
  return (
    <Container>
      <Title label="할 일 목록" />
      <ToDoList />
    </Container>
  );
};

211 page

const Container = styled.div`
  display: flex;
  flex-direction: column;
`;

export const ToDoList = () => {
  const { toDoList, onDelete } = useContext(ToDoListContext);
  return (
    <Container>
      {toDoList.map((todo) => (
        <ToDoItem
          key={todo}
          label={todo}
          onDelete={() => {
            if (typeof onDelete === 'function') onDelete(todo);
          }}
        />
      ))}
    </Container>
  );
};