생활코딩 : React - Update & Delete 기능 구현

update

read 기능과 create기능이 결합되어 있다.

update란 기존의 콘텐츠를 수정하는 것이다.

read처럼 기존의 콘텐츠를 불러와서 form에다가 내용을 추가해주는 작업이 필요하다.

 

form이 들어있는 CreateComponent를 복사해서 이름을 바꾼다.

내용도 바꾼다.

 

App.js로 와서 

import에 CreateComponent를 추가한다.

그리고나서 render()부분에 else if 부분을 복사해서 붙여넣기 한다.

(this. state.mode === 'update')로 바꿔준다.

 

UpdateComponent.js 에서 제목을 Update로 바꿔준다.

 

결과 : 브라우저에서 update를 클릭하면 내용부분에 Update라고 뜨고, 콘솔 컴포넌트에서도 mode: update로 바뀐다.

 

 

render 안에 있는 모든 내용을 getContent(){ 여기 } 안에 넣는다. 

그리고 getContent()는 _article을 return 해준다. 함수 안에 써준다.

getContent()를 쓰는 것은 _article이기 때문에

return 부분에서 _article부분을 getContent()로 바꿔준다.

 

결과 : render() 가 훨씬 슬림해졌다. 보기 좋아졌다.

 

 

 

UpdateContent가 실행될 때, 입력값으로 id가 2인 값을 주입시킨다.

 

getReadContent(){ }를 새로 만들어서 해당 내용을 넣는다.

그 내용은 전에 짰던 코드인 this.state.mode ==='read'일 때의 while문이다.

 

return 값을 data로 한다.

 

getContent()에서 

this.state.mode ==='read' 의 else if 구문에서 

var _content = this.getReadContent();  넣는다. 실행하기 때문이다.

 

그리고 _article에서 title={_content.title}  desc={_content.desc} 으로 바꾼다.

 

결론 : 똑같이 동작하지만 getContent라는 깔끔한 형태로 리펙토링 된다.

 

 

this.state.mode ==='update' 의 else if 구문에서도

_content = this.getReadContent(); 가져와서 넣는다.

 

그리고 _article에서 <UpdateContent> 안에  data={_content}로 주입시켜 준다.

 

결론 : 콘솔에서 id값과 tiltle값이 잘 들어온다. 앞으로 이 값을 이용해서 form의 기본값을 셋팅하면 된다.

 

 

 

---

update 구현 : form

 

React 공식문서 -> Docs -> Main Concepts -> Forms 에서 공부한다.

 

UpdateContent.js 파일에서

form 태그 안에 p 태그 안에 input 태그 안에

value={this.props.data.title}입력한다.

 

그런데 콘솔 에러에 props를 직접 value에 넣어버리고 onChange라는 핸들러를 사용하지 않으면 read-only가 된다고 적혀있다. = 수정이 안된다.

value 값이 개입되니 아무것도 할 수 없게 된다.

 

 

해결 방법 : value 값으로 가변적인 데이터, state화 시켜준다.

value={this.props.title}로 바꿔준다.

 

결과 : 아직도 브라우저에서 update 안에 CSS가 수정되지 않는다.

 

원하는 것 : input의 값을 바꿨을 때, state의 값을 바뀌게 한다 -> read-only 상태가 아니게 된다.

 

뱡법 : onChange={ function(e){ }.bind(this) }를 input 안에 넣는다.

 

이벤트(e)가 발생할 때마다 어떤 값이 들어오는가? -> input 태그의 value 값이 어떤 것이 들어오는가?

브라우저에서 Update 선택 후 제목에 내용을 더해봐도 콘솔에는 입력이 한 글자만 된다.

 

한글자씩 바뀌는 것을 바로바로 component state에 동기화 시켜준다.

this.setState({ title:e.target.value })  이렇게 처리를 한다.

결과 : update에서 title내용 바뀐다!!!

        콘솔 컴포넌트에서도 UpdateContent 컴포넌트의 state가 동적으로 바뀌는 것을 볼 수 있다.

 

 

 

textarea도 같은 방법으로 state에 desc로 입력하고,

p 태그 안에서 textarea에 {this.state.desc} 추가한다.

Update를 클릭하면 브라우저 화면에는 다음과 같이 뜬다.

그러나! 리액트는 이런 것을 허용하지 않는다. HTML과 React 는 다르다. React 안에서 HTML 코드를 짠다고 해도 유사 HTML일 뿐이다. 

 

value={this.state.desc} 로 <textarea> 태그 안에 값을 넣는다.

그리고 앞에 input 태그 안에 있는 onChange 값을 그대로 복붙한다.

결과 : 브라우저에서 Update 항목에서 잘~수정된다.

 

 

inputFormHandler(){ } 함수를 만들어서 onChange함수 중복을 제거한다.

[e. target. name]으로 받아온 이벤트(e)의 target의 name값이 들어오게 한다. 

onChange 부분을 바꿔준다.

 

.bind(this) 부분이 반복되는 것이 보기 싫기 때문에 

constructor에서 다음 코드를 넣어서 값을 바꿔준다. = 리펙토링

.bind(this)는 지워준다. (2개)

 

 

 

---

update 구현 : state 변경

 

update를 하려면 어디를 업데이트 해야하는지 알아내야하는 식별자가 필요하다.

 

보통 id는 수정할 필요가 없기 때문에 hidden form을 사용한다. 

<input type="hidden"></input>

 

state 안에 id: this.props.data.id 넣고 input태그 안에 value={this.state.id} 넣는다.

위 코드 만든 이유 : 자바스크립트가 동작하지 않을 때도 코드가 동작하게 한다는 것이 기본적인 기조이기 때문이다. (??)

자바스크립트 없이도 기본적인 구현에 충실하는 것이 좋다.

 

submit 버튼을 눌렀을 때, onSubmit 이벤트가 발생할 때, 해당 props를 실행한다.

그 안에 id값까지 준다. 동기화가 되기때문에 다른 값들도 그렇게 코드를 바꾼다.

 

App.js에서 

this.state.mode === "update" 일 때, 

onSubmit가 실행될 때, 첫번째 인자로 id값을 준다.

 

max_content_id 관련 코드는 create가 필요할 때 사용하는 것이므로 지운다.

concat (기존 데이터 추가할 때 쓰는 것이기 때문에) 지운다. (현재는 수정하는 것이므로) 

 

Array.from으로  this.state.contents를 복사한 새로운 배열이 생긴다. 그것을 _contents라는 이름으로 바꾼다.

 

contents 하나하나를 뒤져서 id값이 수정하고자 하는 것과 같은 원소를 찾는다.

그 _contents[i]를 교체해준다.(하늘색 부분처럼)

더 반복문을 할 필요가 없으므로 break를 한다.

 

결과 : Update에서 내용 수정하고 제출하면, 콘솔 컴포넌트에서 App component에서 state의 contents의 id가 2인 CSS에서 title과 desc이 바뀌었다.

그리고 CSS를 누르면 수정한 내용으로 목차와 내용이 바뀐다!

 

this.state.mode === "update"에서,

setState에서

mode: 'read'로 추가해서 바꿔준다.

결과 : Create 하면 내용과 본문이 모두 바뀐다.

 

 

this.state.mode === "create"에서,

setState에서

mode: 'read'로 추가해서 바꿔준다.

selected_content_id: this.selected_content_id 추가해서 바꿔준다

결과 : Update 하면 내용과 본문이 모두 바뀐다.

 

 

Update 하는법 정리 

1. 어떤 state를 선택한다.(HTML, CSS, JavaScript 중)

2. Update 버튼 누른다.

3. 내용을 바꾸고 submit 버튼을 누른다.

4. 수정된 내용이 목차와 본문 영역에 보여진다.

 

 

 

---

delete 구현

 

App.js 에서 

state의 mode를 welcome으로 바꾼다! 

 

[목차 중 하나(HTML, CSS, JavaScript)를 선택하고, delete버튼을 누르면 삭제가 되게 하고싶다!]

 

delete 버튼 위치 찾기!

Control.js에서

input 태그 안에 delete 버튼이 있다.

onChangeMode라는 props를 호출하고 있다.

onChangeMode가 delete로써 호출되면 삭제 operation이 실행된다.

 

App.js에서

return부분에 Control 컴포넌트에 다음 코드를 추가한다.

_mode가 delete이면 삭제하고 그렇지 않으면 페이지 전환만 한다.

 

[정말 삭제할지 물어본다]

window.confirm 사용한다.

사용자가 확인 누르면 True가 된다.

사용자가 취소 누르면 False가 된다.

 

누구를 삭제할 것인가? -> selected_content_id를 통해 알 수 있다.

반복문을 사용한다.

 

 

this.state.contents는 나중에 setState에 들어갈 것이기 때문에 복제해둔다.

var _contents = Array.from(this.state.contents);

ths.state.contents를 _contents로 바꾼다.

 

반복문 안에서,

만약 content id가 선택된 content id와 같다면 삭제하면 된다.

 

삭제하려면 splice를 사용한다.

splice(a, b)의 뜻 : a원소부터 b개를 지우겠다

 

마지막으로 break를 때려준다.

 

 

setState에 

contents : _contents를 넣어준다.

그리고 삭제가 잘 되었다면, 

mode: 'welcome'을 넣어준다.

 

confirm() 안에

'really?'라는 문구를 써준다. 

브라우저에서 알림창에 문구도 같이 나온다.

 

결과 : 목록에서 삭제가 잘 되었고, 본문 화면도 welcome으로 잘 나온다. 그리고 콘솔 component에서 state에서도 잘 삭제된 것이 보이다.

 

 

삭제가 끝났다는 알림창을 띄워준다.

위치는 while문 안에, setState 뒤이다.

,

 

 

---

수업을 마치며

 

머리가 복잡해지기 전에 배운것을 충분히 써먹자!

 

immutable 

immutable-js.github.io/immutable-js/

Immutable.js

배열과 객체를 불변성으로 다루는 것들이 있다.

모든 연산이 원본을 건드리지 않고 복제된 원본을 바꾼 결과를 리턴한다.

 

더욱 견고한 프로그램 만드는데 도움된다.

리액트와 단짝이다.

 

router

reactrouter.com/

React Router: Declarative Routing for React

리액트는 url만으로 화면을 보여줄 수 없다.

이때, 리액트 라우터를 사용하면 url에 따라 적절한 component (UI)를 보여준다. 

 

npm을 통해서 설치해서 사용할 수 있다. 플러그인 같은 프로그램이다.

 

create-react-app

편리하지만 독선적이다.

이때, npm run eject 를 실행하면 감춰진 기능들을 개발자 용이대로 수정할 수 있다.

한번 eject을 하면 다시 돌아갈 수 없다.

 

redux

컴포넌트 하나가 바뀌면 수많은 컴포넌트가 바뀌어야 한다.

리덕스는 중앙에 데이터 저장소를 하나 만든다.

모든 컴포넌트는 중앙의 저장소와 직접 연결된다.

저장소가 변경되면 관련된 모든 컴포넌트가 변경된다.

리액트 위에 플러그인 이다.

react server side rendering

서버쪽에서 웹페이지를 완성한 후에 클라이언트에 완성된 html을 전송하면서 어플리케이션 구동한다.

초기 구동시간을 단축할 수 있다.

그러면서도 자바스크립트 언어 특유의 로딩이 없는 특성을 계속 유지할 수 있다.

검색 엔진들이 html 태그를 직접 읽을 수 있게 한다.

 

 

react native

리액트와 같은 방법으로 앱을 만들 수 있다.

하나의 코드로 모든 어플리케이션에서 동작할 수 있다.