[React] To Do List

이번에는 리액트로 기능 구현뿐만 아니라 스타일링까지 조금 넣었다. 리액트를 쓰면서 느낀 것은 state의 흐름을 읽지 못하면 그냥 끝나는 거구나 싶었던... 그래서 리덕스나 모벡스와 같이 쓰는 건가 싶었다. 그래서 보통 리액트를 배울 때 세트로 리덕스를 함께 배우는 것인가. 이것 역시 리액트에서 Form을 사용하여 데이터를 받아오고 그걸 출력하는 거라서 어제 했던 상자 만들기와 비슷하지만 조금 더 까다로운 부분이 있다면 내가 입력했던 리스트를 수정하는 부분이다. 

 

 

 

컴포넌트의 구성은  App > TodoList > NewTodoForm - Todo

 

 

class Todo extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isEditing: false, updatedTask: this.props.task };
  }

state에 isEditing을 넣어서 true면 수정할 수 있는 form을 보여주고, false이면 입력해서 만든 task를 보여준다. 그리고 save 버튼을 눌러서 원래 가지고 있던 state를 변경하는 작업을 거쳐야 한다. 

 

 

 

class TodoList extends React.Component {
.
.

  updateTodo = (id, task) => {
    const updateTodoList = this.state.todoList.map(todo =>
      todo.id === id ? { ...todo, task } : todo
    );

    this.setState({ todoList: updateTodoList });
  };

Form compoent에서 state를 받아올 때 리스트마다 고유의 아이디를 부여해서 받아온 todo와 그 아이디가 동일하다면 새로운 task를 덮어 씌우는 걸로 update를 할 수 있게 했다. 

 

 

 

class Todo extends React.Component {
.
.

  onFormSubmit = e => {
    e.preventDefault();
    this.props.updateTodo(this.props.id, this.state.updatedTask);
    this.setState({ isEditing: false });
  };

TodoList에서 만들 걸 Todo의 props로 보내고 'save' 버튼을 눌러서 submit이 작동했을 때 사용할 수 있도록 하는 것. 

 

 

 

리액트를 다루면서 머리를 쥐어짜는 건 어떻게 하면 알기 쉽게 변수명을 지을 것인가, 그리고 아직은 익숙하지 않아서 이 만든 method를 props로 보낼 때 어떻게 쓸 것인가 이다. 강사분은 이 코드가 어떻게 작동하는 지 아는 게 중요하다고 하면서 강의를 할 때도 state를 쓸 때 내가 첫번째에 쓴 코드처럼 쓰고, 'this' 때문에 constructror 안에다가 bind로 새로운 함수를 만든다. 난 그렇게까진 하고 싶지 않아서 method 쓸 때 arrow 함수로 쓰고 있고. 근데 이걸 하위 컴포넌트에 보낼 때 인자가 있냐, 없느냐에 따라서 좀 헷갈렸는데 이걸로 좀 고통(?)을 겪고 나니까 arrow를 쓰면 하위 컴포넌트에는 그냥 this.(method name) 쓰면 되겠더라. 적고 나니 더 명쾌해지네