Todolist
React를 사용해서 간단한 Todolist를 만드는 연습을 해보았습니다.
App
- 부모 컴포넌트인 App에 state를 설정해주었고, input에 onChange 이벤트가 실행될때 사용 할 changeContent 메서드와 changeSubject 메서드를 선언 해주었습니다.
- onSubmit 이벤트가 실행될때 state를 concat을 사용해서 추가된 값을 포함해 새 배열로 만들어 React에서 state 값이 바뀐것을 알 수 있게하여 리렌더링이 되게 하고 메서드가 종료될때 각 input의 value를 빈값으로 설정하여 onSubmit 이벤트가 실행되고 나면 자동으로 빈칸으로 셋팅되게 해주었습니다.
- render의 return에서 List 컴포넌트에 state를 보내주어 state가 바뀔때마다 리렌더링이 되게 해주었습니다.
Form
Form 컴포넌트에는 각각 제목과 내용의 input value가 변할때마다 value에 넣어줄 수 있도록 onChange 이벤트가 실행될 때 사용할 subjectChange 메서드와 contentChange 메서드를 만들어서 작업을 해주었습니다.
onchange 이벤트가 실행될 때 state를 잘 업데이트해주는지 console.log( )로 확인하였습니다.
onSubmit 이벤트가 실행될 때 App 컴포넌트에 state를 업데이트 해주기 위해 각 value 값들을 꺼내와서 createList 메서드를 실행시켰습니다.
연습용이기에 render( ){ }에는 간단하게 제목과 내용, submit 버튼으로 만들었습니다.
중간 결과
input의 onChange 이벤트가 실행될때 마다 console.log( )로 state가 업데이트되는것을 확인하였습니다.
List
이제 List 컴포넌트에서 props로 App 컴포넌트에게 받아온 업데이트된 state의 board의 값으로 li 함수가 실행될때 subject와 content가 입력된 li,span을 return해주는 배열 newArr을 return하여 state가 바뀔때마다 list 메서드가 실행되어 자동으로 li와 span을 생성해주도록 하였습니다.
결과
부모 컴포넌트인 App 컴포넌트의 state.board의 값을 자식 컴포넌트인 List 컴포넌트가 props로 값을 받은 모습
이런식으로 확인 버튼을 눌렀을때 state가 바뀌었을때 화면이 리렌더링되고 값이 추가되는것을 확인할 수 있습니다.
