5일차 리액트 기초(09~10장) - 생활코딩! React 리액트 프로그래밍

09 Update

10 Delete & 수업을 마치며

 

5일차는 CRUD 중 UD를 실습하게 되었다. 기존에 만들어 두었던 서브루틴에 업데이트와 딜리트를 채워 보았다.

function List(props) {
  const ltag = props.list.map((item) => (
    <li key={item.id}>{item.name}</li>
  ));
 
  return (
    <ol>
      {ltag}
    </ol>
  );
}
 
function Action(props) {
  if(props.type == 'ADD') {
    return (
      <div>
        <h2>Add</h2>
        <input type='text' name='name' placeholder='name' />          
        <button onClick={
          evt => {
            const input = evt.target.parentElement.querySelector("input[name='name']");
            const name = input.value;
            props.callback(props.type, name);
            input.value = '';
          }}>OK</button>
      </div>
    );
  }
  else if(props.type == 'UPDATE') {
    return (
      <div>
        <h2>Update</h2>
        <input type='number' name='itemNum' placeholder='item number' />
        <input type='text' name='name' placeholder='name' />
        <button onClick={
          evt => {
            const numInput = evt.target.parentElement.querySelector("input[name='itemNum']");
            const txtInput = evt.target.parentElement.querySelector("input[name='name']");
            const num = numInput.value;
            const name = txtInput.value;
            props.callback(props.type, { num:num, name:name });
            numInput.value = '';
            txtInput.value = '';
          }}>OK</button>
      </div>
    );    
  }
  else if(props.type == 'DELETE') {
    return (
      <div>
        <h2>Delete</h2>
        <input type='number' name='itemNum' placeholder='item number' />
        <button onClick={
          evt => {
            const numInput = evt.target.parentElement.querySelector("input[name='itemNum']");
            const num = numInput.value;
            props.callback(props.type, num);
            numInput.value = '';
          }}>OK</button>        
      </div>
    );        
  }
}
 
function App() {
  const [isClicked, setIsClicked] = useState(false);
  const handler = ()=>{alert(`I'm a handler. more clicked: ${isClicked}`); setIsClicked(true);};
 
  const [list, _] = useState([{id:1, name:'list1'}, {id:2, name:'list2'}, {id:3, name:'list3'}]);
  const [listVer, setListVer] = useState(0);
  const [actionType, setActionType] = useState('NONE');
  const actionCallback = (type, ret) => {
    if(type == 'ADD') {
      list.push({id:list.length+1, name:ret});
      setListVer(listVer+1);
    }
    else if(type == 'UPDATE') {
      if(ret.num-1 >= list.length) {
        alert("out of list");
      }
      else {
        list.at(ret.num-1).name = ret.name;
        setListVer(listVer+1);        
      }
    }
    else if(type == 'DELETE') {
      if(ret-1 >= list.length) {
        alert("out of list");
      }
      else {        
        list.splice(ret-1, 1);
        setListVer(listVer+1);
      }
    }
  };
 
  return (
    <div>
      <Header Other='Custom' onClickHandler={handler} />
      <List list={list} />
      <p>
        <ul style={{listStyle:'none'}}>
          <li onClick={() => setActionType('ADD')}>Add</li>
          <li onClick={() => setActionType('UPDATE')}>Update</li>
          <li onClick={() => setActionType('DELETE')}>Delete</li>
        </ul>
        <Action type={actionType} callback={actionCallback}/>
      </p>
    </div>
  );
}

 

4일차 코드와 달라진 점은 특정 아이템 변경/삭제를 위해 ul이 아닌 ol로 UI를 변경한 점, UPDATE와 DELETE 로직을 추가한 점이다. 지난 번 포스트처럼 교재와는 다르게 list 자체를 state로 갱신하는 것이 아닌 버전 관리 기법을 이용하여 성능에 초점을 두었다.

간단히 실행 예를 남겨본다.

업데이트 항목을 누르면 아래와 같이 나온다.

여기에 위와 같이 아이템 번호와 수정할 내용을 넣고 OK를 누르면 된다.

이제 Delete를 누르면

4번을 넣고 OK를 누르면 아래처럼 에러가 나온다. (업데이트도 마찬가지)

1번을 넣어보자.

잘 지워진다.

 

교재를 따라가니 자연스럽게 리액트에 익숙해지더라. 일렉트론을 좀 다루기 때문에 바닐라js는 꽤 능숙하게 사용할 수 있는데 일렉트론에서도 그냥 리액트를 쓰는게 낫겠다는 생각이 든다. 어쨌든 이고잉이라는 분이 유명하신 이유를 알겠다. 남은 편도 열심히 공부해야지.