[React]간단 CRUD 앱 (U는 생략..)

CRUD란?

CRUD란 Create, Read, Update, Delete의 첫 알파벳을 따서 만든 단어입니다.

모든 어플리케이션을 만드는 것에 있어서 기초라고 단언할 수 있습니다.

 

React 구현

이번 포스팅에서는 CRUD 중 CRD를 아주 간단하게 구현하여 다음의 웹사이트를 만들어보겠습니다.

어플리케이션 설명

1. <input /> 박스에 아이템을 타이핑합니다.

2. <button>Save In Local</button> 버튼을 클릭하여 Local DB에 내용을 저장합니다.

3. 저장된 내용들이 index와 함께 화면에 출력됩니다.

4. <button>delete</button> 버튼을 클릭하여 내용을 삭제할 수 있습니다.

 

Code

import React, {useState} from 'react';

function App() {
  const [localDB, setLocalDB] = useState([]);
  const [input, setInput] = useState("");

  return (
    <div>
      <div>Local DB 내용</div>
      <ol>
        {localDB.map((value, index) => {
          return (
            <li key={index}>
              {value}
              <button
                onClick={(e) => {
                  setLocalDB((prev) => {
                    return prev.filter((value, _index) => index !== _index)
                  })
                }}
              >delete</button>
            </li>
          )
        })}
      </ol>
      <div>
        <input type={"text"} onChange={(e) => setInput(e.target.value)} value={input} />
        <button onClick={(e) => {
          setLocalDB((prev) => {
            return [...prev, input]
          });
          setInput("");
        }} >Save in LocalDB</button>
      </div>
    </div>
  );
}

export default App;

1. LocalDB를 useState로 선언합니다.

2. <input />과 상호작용을 할 input을 useState로 선언합니다.

3. React에서는 배열에 담긴 원소가 React Element일 경우,

단순히 그 배열을 return 안에서 사용하는 것 만으로 내부의 element들을 출력할 수 있습니다. (map, filter 등)

4. <input /> 태그에서 onChange를 통해 input값을 실시간으로 업데이트하고, 그 변경된 input값이 다시 <input />의 value가 되도록 value={input}으로 세팅합니다.

 

위의 코드는 정상적으로 동작하지만 

좀 더 깔끔하게 리팩토링하겠습니다.

import React, {useState} from 'react';

function App() {
  const [localDB, setLocalDB] = useState([]);
  const [input, setInput] = useState("");

  const onClickDelete = (index) => {
    setLocalDB((prev) => {
      return prev.filter((value, _index) => index !== _index)
    })
  }

  const onChangeText = (e) => {
    setInput(e.target.value)
  }

  const onClickSave = () => {
    setLocalDB((prev) => {
      return [...prev, input]
    });
    setInput("");
  }

  return (
    <div>
      <div>Local DB 내용</div>
      <ol>
        {localDB.map((value, index) => {
          return (
            <li key={index}>
              {value}
              <button onClick={onClickDelete}>delete</button>
            </li>
          )
        })}
      </ol>
      <div>
        <input type={"text"} onChange={onChangeText} value={input} />
        <button onClick={onClickSave} >Save in LocalDB</button>
      </div>
    </div>
  );
}

export default App;

위의 코드처럼 각각의 기능을 하는 함수를 미리 선언하고

그것을 불러와 사용하는것이 더 깔끔합니다.

 

이러한 리팩토링은 단순히 깔끔하게 정리하는 것 이상으로 중요합니다.

만일 리팩토링이 되지 않은 코드일 경우 똑같은 기능의 함수를 매번 정의해줘야합니다.

그렇게되면 개발자들이 실수를 하기 쉽고,

똑같은 기능을 해야하는 두 함수가 미묘하게 다른 기능을 담당할 수도 있죠.

이것은 특히 다른 개발자들과 협력할 때 더욱 두드러집니다.

 

위의 코드에서 더 이상 진행할 리팩토링은 이제 없을까요?

당연히 있습니다.

예를 들어, LocalDB.map()부분을 App 컴포넌트가 아닌 다른 컴포넌트에서 정의하고 이곳에 import한다면 훨씬 깔끔하겠죠?

그리고 당연하게도 이것은 권장되는 리팩토링 중에 하나입니다.

 

 

 

이번 포스팅에서는 간단한 React CRUD 어플리케이션을 만들고 리팩토링 해보았습니다.

감사합니다 ( _ _ )