React.js Create, Update, Delete

React.js Create, Update, Delete

1. 중간 정리

   • 상위 컴포넌트는 생성자로 state화 시킨다. 하위 컴포넌트에게는 props를 전달하는데 이벤트도 props의 형태로 전달이 가능하다.

   • 하위 컴포넌트가 상위 컴포넌트의 state를 변경할 때는 이벤트를 이용한다. (without REDUX)
   • 하나의 공통 저장소가 있어서 저장소의 데이터 값이 바뀌면 연관된 컴포넌트가 전부 바뀜. (with REUDX)

   
   

2. Create 구현

   • control 컴포넌트 추가 후 onChangeMode 이벤트 설치

   • create / update / delete 각 버튼 클릭시 모드 변경

   • mode가 welcome이거나 read 일시에는 본문 내용 출력 (ReadContent 컴포넌트)

   • mode가 create이면 CreateContent 컴포넌트의 내용 출력

   • form 태그에 입력창 세팅 후 onSubmit 이벤트에서 입력창의 값을 인자로 전달

   • 상위 컴포넌트에서 인자를 받아서 contents 배열에 추가

   • 기존 배열을 건드리는것보다 concat으로 추가한 새 배열을 만드는것이 좋다

     shouldComponentUpdate() 메소드의 return 값을 false로 주면 컴포넌트의 값이 바뀌지 않는이상 re-render가 일어나지 않음

     shouldComponentUpdate() 메소드는 newProps와 기존의 props 모두 접근이 가능하여 비교가 가능하다.

     이것을 활용하여 concat으로 추가한 새 배열로 state를 교체했을시에만 re-render가 일어나게 설정할 수 있는데 원본까지 바꿔버리면 newProps와 this.props가 항상 같으므로 re-render가 일어나지 않는다.

   • setState로 새로운 contents 배열로 re-render

   
   

3. Update 구현

   • UpdateContent 컴포넌트 추가
   • Create와 기능면에서 유사하기 때문에 컴포넌트 복붙
   • 상위 컴포넌트에서 mode === update이면 사용자가 선택한 TOC의 state(배열)를 하위 컴포넌트에게 props로 넘겨준다
   • 하위 컴포넌트에서 선택한 TOC의 title과 desc를 입력창에 출력하는데 props를 그대로 쓰면 error가 발생한다. (props는 read-only이기 때문)
   • props를 state화 시키고 쓰는데 반드시 onChange를 정의해주어야함
   • state의 이름과 이벤트가 발생한 target의 이름을 같게해서 setState로 [e.target.name] : e.target.value로 입력창에 변경된 state 값 출력
   • input type=’hidden’ name=’id’ value={this.state.id} 태그를 하나 더 추가해서 onSubmit 이벤트 발동시 id, 변경된 title, 변경된 desc 값을 넘겨준다
   • 상위 컴포넌트의 onSubmit 이벤트 props에서 기존의 contents 배열을 복사한 뒤 반복문을 돌며 하위 컴포넌트에서 넘어온 id와 복사한 배열의 id값이 일치하는 index를 찾아 배열의 title과 desc 값을 수정하여 다시 setState를 해준다.

   
   

4. Delete 구현

   • contents 배열을 복사한 후 반복문을 돌며 선택한 요소의 id와 배열의 요소의 id가 같은 index를 찾아 splice로 잘라낸다.
   • 편집된 contents를 setState로 교체시킨다.

참고 자료

생활코딩-React.js

reactjs.org - 공식홈페이지

goormedu - 처음 만난 React