[React] App state값으로 input value값 수정하기

서론

저번 글은 CRUD 중 create 기능을 만들어보았었다.
그래서 이번 글은 U(update)를 만들기 위한 첫 번째 단계가 되겠다.

App.js

App 컴포넌트에 render 함수 밖에 이 함수를 선언해준다.
이 함수는 사용자가 선택한 content의 id, title, desc 등의 data를 반환해주는 함수이다.
만약, HTML을 눌렀다면 id:1 title:HTML desc:HTML is Hyper Text Markup Language 이 반환될 것이다.

그리고 render 함수에 있던 모든 코드를 getContent함수로 바꾼다.
금방 만들었던 getReadContent 함수로 선택된 content의 data를 끌어와서 사용하는 형식이다.
mode가 read일 땐 getReadContent로 가져온 data의 title, desc로 화면에 보여준다.
mode가 create일 때는 저번 글과 같이 하고 mode가 update는 create일 때와 외관은 다르지만 역할이 다르다.

UpdateContent.js

업데이트 컴포넌트는 create 컴포넌트를 복사 붙여넣기하고 조금씩만 바꾸면 된다.
첫번째로 해야할 일은 update 컴포넌트는 수정 기능이기 때문에 원래 있는 content의 title과 desc값을 가져와서 input에 보여줘야한다.(value)
그냥 props로 가져오면 Read Only 상태이기 때문에 경고메세지가 뜨고 수정이 되지 않는다.
그래서 Update 컴포넌트에 state를 만들고 onChange 함수를 써야한다.

onChange함수를 보면 inputFormHandler함수를 호출하는 걸 볼 수 있다. 이건 그냥 중복되는 부분이여서 깔끔하게 표현한 것뿐이다.

아무튼 state는 title과 desc로 설정하고, inputFormHandler함수는 setState를 사용한다.
그래서 state의 값이 바뀌면서 input에 value도 바뀌는 걸 확인할 수 있다.
여기서 inputFormHandler함수 안에 []가 보이는데 이건 자바스크립트 최신 문법이다. 즉, 대괄호를 사용하면 대괄호 내의 값을 프로퍼티로 사용할 수 있다.
이렇게 하고 App.js로 넘어가보자

App.js

mode가 update일 때 동작을 만들어보자.
아까 만들었던 getReadContent 함수로 data를 _content 변수에 할당한다.
그리고 _article 변수에 UpdateContent 컴포넌트를 할당하는데, data는 그대로 _content를 쓰고 submit을 하게 되면 function을 실행한다. 이 부분에 수정 기능이 들어갈 것 같다 (아마 ㅎㅎ)

오늘은 오류, 프로젝트 때문에 시간이 없어서 공부를 많이 못 했는데 내일은 시간이 많으니까 더 열심히 해야겠다.
노트북 반납해야해서 폰으로 적었기 때문에 조금 글이 어수선할 수 있다.
고칠 점이나 오류가 있다면 댓글 부탁드립니다 :)