기능구현

• 클릭을 하면 사라지는 코드를 작성해보자

leaf component

• 가장 말단에 있는 컴포넌트 부터 작업을 해보자.

const TodoItem: React.FC<{ text: string, onDelTodo: (event: React.MouseEvent) => void }> = (props) => {
    return <li className={classes.item} onClick={props.onDelTodo}>{props.text}</li>;
};

• 우선 props로부터 넘어온 값은 전부 컴포넌트 옆에 정의를 해줘야하는데 text는 필드값이고 onDelTodo는 메서드라서 위와같이 지정을 해줬다.

• 이때 onDelTodo안의 매개변수에는 따로 인수가 안 들어가도 된다. 왜냐하면 해당 컴포넌트에서 매개변수를 이용한 로직이 없기 때문이다. 하지만 보다 명확한 정의를 위해서 추가를 해줬다. 다시 말하지만 매개변수 관련 로직이 없다면 추가를 하지 않아도 된다.

barnch component

• 중간 가지 컴포넌트이다.

const Todos: React.FC<{ items: Todo[]; onDelTodo:()=>void }> = (props) => {
    return (
        <ul className={classes.todos}>
            {props.items.map((item) => (
                <TodoItem key={item.id} text={item.text} onDelTodo={props.onDelTodo}/>
            ))}
        </ul>
    );
};

• leafCompoent(TodoItem)에 onDelTodo 속성값은 단지 부모 컴포넌트로부터 넘어오는 메서드를 전달하는 역할밖에 하지 않기 때문에 그냥 props.부모컴포넌트에 정의된 메서드 정도로 작성하면 된다.

root component

• 데이터를 욺직이는 컴포넌트들 중 가장 부모 컴포넌트이다.

const delTodoHandler = (todoId: string) => {
  setTodos((prevState) => {
    return prevState.filter(todo => todo.id !== todoId);
  })
};

return (
  <div>
    <NewTodo onAddTodo={addTodoHandler}/>
    <Todos items={todos} onDelTodo={delTodoHandler} />
  </div>
);

• 데이터를 삭제하는 함수를 정의하고 특정 데이터를 삭제하기위해선 반드시 id값이 필요하다.
• 하지만 이렇게 놓고 보면 id값이 필수기 때문에 매개변수에 넣어줬고 이 필요한 매개변수를 채우기 위해서 branch component로 보내는 props에 onDelTodo를 추가하였다.

여기서 이상한 점을 발견했다면 아주 휼륭하다.

• 자세히 보면 root component에서 특정 데이터를 삭제하기위해서 id값을 매개변수로 전달하였는데,
  branch component에서는 해당 매개변수가 없다고 코드를 짰다. 여기서 문제이다. 그러다면 어떻게 해결할까?
  2가지 방법이 있다.
  1. 매개변수와 데이터를 올려주는 함수를 한개씩 더 만들어서 leaf=>branch=>root 컴포넌트 순으로 올려준다.
  2. 단순히 bind()를 이용한다.
• 당연히 조금 더 편리한 bind함수를 사용해보자.

const Todos: React.FC<{ items: Todo[]; onDelTodo:(id:string)=>void }> = (props) => {
    return (
        <ul className={classes.todos}>
            {props.items.map((item) => (
                <TodoItem key={item.id} text={item.text} onDelTodo={props.onDelTodo.bind(null, item.id)}/>
            ))}
        </ul>
    );
};

• 우선 onDelTodo에서 받아온 props에는 반드시 id값이 들어가야하니 데이터 타입을 그에 맞춰 바꿔준다.

• 다음 해당 데이터 타입에 맞춰 props를 구성하면 되는데 이때 bind함수를 사용하면 된다.
  첫번째 변수에는 this에 들어갈 값이지만 this 키워드를 사용하지 않으니까 null이고
  두번째 변수에는 이 함수에 제일 앞에 들어갈 데이터를 지정하면 되는데 즉, 여기에 우리가 root 컴포넌트로 넘겨주고 싶은 값을 넣으면 된다고 생각하면 편리하다.

• 조금 더 자세한 bind에 대하여 자세히 알고싶다면 이렇게 객체에 관련된 것 뿐만 아니라 setTimeout과도 함게 쓰이니 자세히 살펴보길 바란다.