FFT in React_PreventDefault로 알아본 이벤트 핸들링

Foot For Thought : 생각할 거리, -를 줄여서 FFT- React(리액트)를 사용하여 TodoList를 구현하던 도중 예기치 않게 발생한 에러를 통해 이벤트 핸들링에 대해 알아보았다. 문제가 발생한 시점 <div> 내부에 <div>를 선언하여, 부모 레벨 div에서는 onClick 이벤트를, 자식 레벨 div에서는 form을 사용한 onSubmit 이벤트를 발생시키도록 했다. 콘솔로 찍어 확인 한 결과 부모 레벨의 div의 onClick 이벤트만이 계속 나오는 것이 확인되었다. 문제가 있었던 부분 SPA 방식에 기준하여 페이지의 전체 새로고침을 하지않고 특정 부분만을 갱신시키기 위해 preventDefault()를 남용한 것이 화근이었다. Continue reading

FFT in React_props 서빙시 반드시 {}괄호를 사용하자!

Foot For Thought : 생각할 거리, -를 줄여서 FFT- React(리액트)를 사용하여 Todo List를 만들었는데, 최종적으로 만들기 직전에 겪었던 문제에 대해서 간단히 정리하기 위해서 글을 쓴다. 문제가 발생한 시점 Todo List로부터 Todo 데이터의 {todo.title}(제목)과 {todo.content}(내용)을 출력하려고 했는데, undefined 문구가 나오면서 출력할 수 없었다. 문제가 있었던 부분 Todo 컴포넌트 선언시 props를 받아오는 부분에서 중괄호를 사용하지 않았던 것이 문제점이였다. const Todo = (todo, todos, setTodos) => {.....} 문제를 개선한 모습 const Todo = ({todo, todos, setTodos}) => {. Continue reading