[리액트] todo 리스트 만들기

초기 화면

 

운동하기 입력 후 추가 버튼 클릭

공부하기 입력 후 추가버튼 클릭

완료버튼을 누르면 해당todo리스트 제거(운동하기 클릭)

리액트 클래스형 컴포넌트를 이용해서 todo 리스트를 만들어 보았다.

 

우선 [App.js] 파일 코드이다.

 

다음은 [LifecycleExam.js] 파일이다.

css 파일은 생략하고, 이번에 만들어보면서 깨닫게 된 점들을 정리해보겠다.

 

yarn start로 실행을 시키면 제일 상단의 최초화면이 뜨고, 개발자 도구를 열어서 콘솔창을 확인해보면 다음과 같은 순서로 실행된 것을 확인할 수 있다.

컴포넌트 별로 console.log 를 작성하여 흐름을 파악 할 수 있게 하였다. 우선 [생성자]를 먼저 거치고 다음 가장 아래에 작성한 [render]에서 렌더링을 하고 무사히 마운트가 되면 [componentDidMount]까지 오게되며, 여기까지가 리액트 실행시키고 최초의 페이지가 나올때 까지의 흐름이다.

 

그리고 '운동하기'를 입력하고 추가 버튼을 눌렀을 때의 흐름이다.

[추가]버튼을 누르면 [enterTodo] 함수가 실행하게 된다.

input에 입력한 값을 가져와서 'inputValue'에 담고 이를 todo_title에 setState 해준다. 여기서 특이한 것을 발견했는데, this.setState({todo_title:inputValue}); 을 거치는 순간 나는 constructor 의 this.state={todo_title}이 변하는 줄 알았다. 

바로 아래에 console.log를 추가하고 콘솔창을 확인하면 다음과 같다.

생성자 state todo_title 의 초기화가 공백인 상태 그대로이다. 초기 코드에는 enterTodo 함수에 모든 코드를 다 작성했다. 다음과 같이...

이렇게 하니까 처음 투두리스트 하나 추가하면 계속 첫 시작은 공백의 리스트가 추가되고 다음부터 1개씩 밀려서 투두리스트가 추가되는 문제때문에 머리가 아팠다. 확실한 것은 enterTodo 에 작성한 this.setState({todo_title:inputValue}); 에서는 아직 아무런 변화가 없다는것. 아직 한창 공부중이라 확실하지는 않지만 render를 지나고나서 변화된 것이 반영이 되는거 같다고 생각하게 되었고 일부 코드를 [componentDidUpdate] 에 작성하여 다음과 같이 나누었다.

다음과 같이 나누어 작성하였더니 공백이 들어가지않고 의도대로 작동하였다. 아무래도 [componentDidUpdate]가 실행 될 즈음에는 constructor 의 this.state = {todo_title : 새로운 값} 이 갱신이 완료된 상태인거같다. 이 지점에서 append를 시키니 처음 추가되는 리스트부터 공백이 아니라 내가 작성한 것이 무사히 추가 되었다.

 

아직 해야 할 일은 완료를 누르면 삭제되는 부분인데, 삭제는 무사히 진행은 되지만 이는 [removeTodo] 가 실행된 것이어서그런지 [componentWillUnmount] 는 아무 반응이 없었다. 좀 더 수정하여 willUnmount 부분까지 실행 되도록 해야겠다.