변경사항

1. state.welcome 업데이트 기능 추가
2. state.subject 삭제
3. delete 기능 수정
4. welcome 모드 전환 방식 변경

welcome, subject는 변경되는 값이 아니기에 state로 관리하지 않아도 될 것 같음

• welcome 문구를 수정할 수 있게 만들자
• subject는 변수에 담아두자

state.welcome 업데이트 기능 추가

1번 방식

"update" mode에서 welcome 내용 편집 ⇒ welcome의 데이터와 contents의 데이터가 분리되어 있어서 구현이 쉽지 않을 듯 함 (조건문을 통해 어떤 데이터가 들어왔는지 판단)

2번 방식

welcome을 편집하는 별도의 mode 추가

welcome을 편집할 때는 welcomeupdate라는 모드로 전환

App.js

else if (mode === "welcomeupdate") {
  _article = (
    <UpdateContent
      data={welcome}
      onSubmitUpdate={function(_id, _title, _desc) {
        console.log(_id, _title, _desc);

        this.setState({
          welcome: { id: _id, title: _title, desc: _desc },
          mode: "welcome"
        });
      }.bind(this)}
    />
  );
}

• 컴포넌트까지 새로 만드는 건 너무 비효율적일 것 같아서, UpdateContent 컴포넌트를 재사용할 수 있는 방향으로 진행함

  • welcome 구조 변경 contents의 데이터 구성인 { id, title, desc }를 welcome에도 적용해야 UpdateContent를 사용할 수 있을 것 같음

    App.js

    // welcome: { title: "welcome", desc: "Hello, React!!" }
    welcome: { id: 0, title: "welcome", desc: "Hello, React!!" }
    

  • UpdateContent 의 props

    UpdateContent.js

    const { data: { id, title, desc }, onSubmitUpdate} = this.props;
    
    ...
    
    <form
      action="/update_process"
      method="post"
      onSubmit={function(e) {
        e.preventDefault();
        onSubmitUpdate(id, title, desc);
      }}
    >
    

Welcome Update랑 Contents Update가 따로 있으니, 보기 안좋아.

⇒ Mode에 따라 Control을 다르게 보여주자.

Control.js

{mode === "welcome" ? (
	<li>
    <a
      href="/welcome_update"
      data-name="welcomeupdate"
      onClick={function(e) {
        e.preventDefault();
        onChangeMode(e.target.dataset.name);
      }}
    >welcome update</a>
	</li>
) : (
	<li>
		<a
			href="/contents_update"
			data-name="update"
			onClick={function(e) {
			e.preventDefault();
			onChangeMode(e.target.dataset.name);
			}}
		>contents update</a>
	</li>
)}

state.subject 삭제 후 해당 내용 변수에 담기