부스트코스 강의 웹 프론트엔드 시작하기 (리액트&리덕스)
중 'Ch4 리액트를 활용해보기'를 정리한 내용이다.

props vs state

• 컴퍼넌트 안에서 props는 수정할 수 없다.
• 상위 컴퍼넌트가 하위 컴퍼넌트를 명령할 때는 props를 사용하고, 하위 컴퍼넌트가 상위 컴퍼넌트를 바꾸고 싶을 때는 event를 이용한다.
• redux는 데이터를 각각의 컴퍼넌트에 분산해서 보관하는 것이 아니라 하나의 데이터 저장소가 가지고, 이 데이터의 저장소 값이 바뀌면 값과 관련된 모든 컴포넌트가 알아서 바뀌게 하는 기술이다.

---

create

• CRUD - create, read, update, delete

• React로 create 기능도 구현해보도록 한다. < TOC> 컴퍼넌트와 < Content> 컴퍼넌트 사이에 생성, 수정, 삭제 버튼을 만든다. create 버턴을 누르면 앱 컴퍼넌트의 mode가 create로 바뀌고 contents라는 읽기 모드의 컴퍼넌트가 글을 추가할 때 사용하는 모드의 컴퍼넌트로 바뀐다. 그 컴퍼넌트는 폼이 있고, 폼에 정보를 입력해 저장 버튼을 누르면 < APP> 컴퍼넌트의 contents의 목록에 새로운 컴퍼넌트 정보가 id 값, 제목, 본문이 객체로 담겨 contents에 추가된다.

create mode 변경

• < TOC>와 < Content>사이에 create, update, delete 각각의 mode로 진입하는 버튼을 만들어 준다. 유의해야 할 부분이 있는데 delete는 주의해서 작성해 주어야 한다. 경우에 따라 의도치 않게 내용이 삭제될 수 있으므로 링크 같은 페이지 개념이 아닌 버튼 같은 오퍼레이션 개념의 기능을 사용해야 한다.

• Control.js라는 파일을 새로 만들어 < Control> 컴퍼넌트의 코드를 그곳에 작성해준다. < Control>에서 3개 중 하나를 클릭했을 때 어떠한 일이 발생하게 하기 위해 onChangeMode라는 이벤트를 정의해준다.
  이벤트가 실행 됐을 때 실행되어야 하는 함수를 event handler라고 한다. 링크를 클릭했을 때 onChangeMode라는 event handler가 실행되게 하기 위해 onClick 속성을 추가한다.
  

• onChangeMode가 호출될 때 어떤 역할을 하는 링크인지 알 수 있도록 첫번째 인자를 mode로 받는다. 함수 안에서는 이 mode 변수로 현재 상태가 전달된다. onChangeMode 함수가 호출될 때마다 앱 컴퍼넌트의 mode state 값을 바꾸기 위해 setState() 함수를 사용한다.
  

create mode 전환

• create를 클릭하면 쓰기에서 사용될 컴퍼넌트로 교체하도록 해준다. 기존 Content 컴퍼넌트 이름을 ReadContent로 바꾸고, 파일명도 ReadContent.js로 변경해준다. 또한 CreateContent.js 파일을 추가해준다. App.js의 Content 부분도 바꿔준다.
  
  
  • < Control>에서 create를 클릭하면 < APP> 컴퍼넌트의 mode가 create로 바뀌게 된다.
• 기존 < ReadContent>가 있는 부분을 < CreateContent>로 교체해준다. App.js 파일에서 mode 값에 따라 < article> 영역이 교체되는 부분을 < ReadContent> 영역이 가변적으로 바뀔 수 있도록 _article 변수로 처리해준다.
  

create form 만들기

• < CreateContent>안에 글을 추가하는 기능을 가진 Form을 만든다. 우선 App.js에서 mode를 create로 바꿔 구현하는 것을 확인하기 좋게 바꿔준다.
  

• CreateContent.js 파일의 form 태그 안에는 아래 코드를 입력해준다. 'placeholder' 속성은 아무런 값이 입력되지 않은 경우 'placeholder'에 부여한 값이 출력되는 것이고, < textarea> 태그는 입력할 텍스트가 여러 줄일 때 사용하는 것이다.
  

  • < form>태그는 리액트를 쓰지 않을 때 action 값에 따라 해당 페이지로 사용자가 입력한 정보를 전송한다. submit 버튼을 클릭하면 그 버튼을 포함하는 form 태그의 onSubmit 이벤트가 실행되도록 하고, e.preventDefault()로 submit 버튼을 클릭했을 때 action이 가리키는 페이지로 이동하지 못하게 한다.

onSubmit 이벤트

• submit 버튼을 클릭했을 때 onSubmit 이벤트가 실행되고 createContent 컴퍼넌트를 쓰고 있는 App 컴퍼넌트의 contetns의 끝에 데이터를 추가하도록 한다.

• submit 버튼을 클릭했을 때 createContent의 이벤트로 설치된 함수를 실행시켜야 한다. onSubmit 이벤트를 만들고 그 이벤트가 발생했을 때 실행되는 함수의 입력 값으로 _title, _desc가 전달되면 setState를 통해서 새로운 content 값을 추가한다.
  

  • title과 desc값은 debugger 코드를 추가해 이벤트 객체를 Console창에서 확인해 알 수 있다. e.target.title.value, e.target.desc.value 값을 전달하면 된다.
    
    

contents 변경

• 이제 App 컴퍼넌트의 contetns의 끝에 방금 구한 데이터를 추가한다. 기존에 추가 되었던 데이터들의 id 값보다 1 큰 id값을 만들어 this.max_contetn_id에 지정해준다.
  
• 그리고 CreateContent 컴퍼넌트의 onSubmit이 실행될 때마다 기존 max_contetn_id의 값을 1씩 증가시켜준다. id 값은 max_content_id로, title과 desc값은 아까 구한 data인 객체를 생성해 contetns의 끝에 추가한다.
  • 추가할 때 this.state.contents.push()를 사용하면 원본값이 변경되기에 원본 데이터를 변경하지 않고 새로운 데이터를 추가하는 this.state.contents.concat()를 사용하도록 한다.
  • 이 return 값을 _content 변수에 담고 이를 setState()의 값으로 교체한다.
    

---

update

• < CreateContent> 컴퍼넌트를 만드는 것처럼 < UpdateContent> 컴퍼넌트를 만들어 업데이트 기능을 구현한다.

• UpdateContent.js를 만들어주고, App.js파일에서 불러온다. 현재의 컴퍼넌트 state값 mode가 update로 바뀌면 < UpdateContent>컴퍼넌트를 만들어준다. render()함수가 복잡해지므로 getContent(), getReadContent() 함수를 새로 만들어 render()함수 안의 코드를 분리시켜준다.
  

  • < UpdateContent> 컴퍼넌트가 실행될 때 입력 값으로 현재 선택된 id에 해당하는 contents를 < UpdateContent> 컴퍼넌트에 주입해야하는데, 이를 위해 contents에서 selected_contents_id와 같은 원소를 찾는 getReadcontent()함수를 만들고 data를 리턴한다.
  • 이 함수를 _content 변수에 주입한다.

• 업데이트를 클릭하면 id, title, desc 값이 < UpdateContent>컴퍼넌트의 데이터로 잘 주입된다.

• 컴퍼넌트에 주입된 데이터를 기반으로 컴퍼넌트에 기본적으로 입력되는 값을 세팅한다. 만약 props를 직접 value에 넣을 때 onChange라는 handler를 사용하지 않으면 read-only가되므로 업데이트를 하려면 value값으로 컴퍼넌트 안에서 가변적인 데이터를 state화 시켜줘야 한다. UpdateContent.js에 constructor함수를 생성하고 input 태그를 수정해준다. 이때 input 태그에서 onChange를 이용한다.

  • 하나하나 onChange를 만들기 번거로우므로 inputFormHandler라는 함수를 만들어 사용해 중복을 제거해준다. bind(this)도 매번 작성해야하지 않아도 되게 해결해준다. 이렇게 코드를 깔끔하게 만드는 것으 리팩토링이라 한다.
    

• 업데이트를 할 때 어디를 업데이트 할지 식별자를 만들어준다.
  

• form에서 수정할 때 id와 같이 사용자에게 보일 필요가 없는 데이터는 hidden form에 작성한다. UpdateContent.js에 기록해준다.
  

  • 또 submit 버튼을 눌러 onSubmit 이벤트가 발생할 때 이 컴퍼넌트로 들어온 onSubmit props를 실행해주며 이 때 id 값을 추가한다.
    

• 수정을 하기 위해 Array.from()을 이용해 contents를 복제해준다. contents 안에 있는 원소를 확인해 id값이 수정하고자 하는 것과 같은 원소를 찾고, 그 객체를 교채해준다.
  

  • 기존 contents가 아닌 복제한 contents를 수정하는 것이므로 concat을 사용하지 않고 push를 사용해준다. 원본이 바뀌어도 되기 때문이다.
  • 어떤 컨텐츠를 선택해 업데이트하여 내용을 수정하고 submit할 때 바뀐 내용으로 상세보기를 하기 위해 state의 mode를 read로 바꿔주었다. 이렇게 하면 내용과 본문이 모두 바뀐다.
  • create도 update와 마찬가지로 바꿔준다. 이렇게 하면 create 내용이 추가되고, 추가된 본문 내용이 화면에 출력된다.

---

delete

• delete 버튼은 < Control>의 < input> 태그에서 onChangeMode라는 props를 호출하고 있다. _mode의 값이 delete면 삭제하고 그렇지 않으면 페이지 전환을 해주도록 한다.
  
  • 삭제가 시작되었을 때 한번 더 물어보는 window.confirm()을 사용한다. 삭제를 할 때 누구를 삭제할지는 selected_content_id를 통해 알 수 있고, 얼만큼의 데이터를 삭제할지 contents 배열에서 반복문으로 찾아낸다.
  • contents 배열에서 지울 때는 splice()를 사용해 발견한 특정 원소부터 한 개를 지우도록 한다.
  • 삭제가 잘 되면 mode를 welcome으로 바꿔주고, 삭제가 끝난 것을 알리는 alert()를 추가해주었다.