[react] CRUD 기초 총 정리

REACT CRUD

리액트에서 가장 기초이자 기본이 crud이다. 다른 블로그들과의 차이점은 가능한 모든 case를 정리하여 성능비교까지 적어보려한다.(계속 업데이트 예정)

 

일반적인 javascript에서 todo list를 만들면서 crud를 많이 구현해 보았을 것이다. 일반적인 Javascript와 react CRUD의 차이점은 Immutability(불변성)에 있다고 할 수 있다. 기본적으로 리액트는 Mutation 하지 않게 작성을 해야한다.

 

아래의 예는 데이터 값을 직접 변경(mutate)하는 예이다. 즉, mutation한 수정이라고 할 수 있겠다.

 

let player = {score: 1, name: 'Jeff'};
player.score = 2;

// 결과값
// {score: 2, name: 'Jeff'}

 

 

아래의 예는 원하는 변과 값이 포함된 새로운 복사본 데이터로 교체하는 것이다. 다른 말로 표현하면, Mutation하지 않은 데이터 수정라고 할 수 있다.

 

let player = {score: 1, name: 'Jeff'};

let newPlayer = Object.assign({}, player, {score: 2});
// 이제 player는 변하지 않았지만 newPlayer는 {score: 2, name: 'Jeff'}입니다.

// 객체 spread 구문을 사용한다면 이렇게 쓸 수 있습니다.
// var newPlayer = {...player, score: 2};

 

즉, 쉽게 말해서 객체나 리스트를 직접 수정하는 것이 아니라, 참조형에 대한 깊은 복사를 통해 새로운 객체를 만들어서 react에 넣어주는 방식을 취해야한다. 이렇게 Immutable한 방식은 아래의 이점을 가진다.

 

1. 복잡한 기능들이 단순해 진다. (Complex Features Become Simple)

2. 변화를 감지할 수 있다. (Detecting Changes)

3. React가 다시 랜더할 시기를 결정할 수 있다. (Determining When to Re-Render in React)

 

좀 더 자세한 설명의 아래의 url을 참고하자.

 

https://han-py.tistory.com/459

 

 

 

 

MOCK 데이터 셋팅

아래는 리스트 내부에 객체가 포함되어 있는 형태이다. 대부분 아래와 같은 방식으로 JSON 데이터를 받아온다. 따라서 데이터를 아래와 같이 받았다고 생각하고 계속보자. 

 

보통 데이터는 GraphQL을 쓰지않는한, 백엔드로 호출해서 가지고 온다. 만약 API를 쓰려면 react 생명주기에 따라 useEffect 내부에서 사용하면 된다.(함수형 컴포넌트) 관련 내용은 아래에서 참고하자.

 

https://han-py.tistory.com/402

[react web] Hook 기초_useEffect

 

그리고 받은 데이터는 useState에 담게된다. useState관련 내용은 아래에서 참고하자.

 

https://han-py.tistory.com/398

[react web] Hook 기초_useState

 

아래는 가상의 데이터를 받았다는 가정하에 받은 데이터를 state로 넣은 코드이다.

 

const [datas, setDatas] = useState([
    {
        id: 1,
        name: kang,
    },
    {
        id: 2,
        name: py,
    },
    {
        id: 3,
        name: han,
    }
]);

 

 

 

 

 Create

 

  handleClick(i) {
    const history = this.state.history;
    const squares=Array(9).fill(null),
    this.setState({
      history: history.concat([{
        squares: squares,
      }]),
    });
  }

 

 

const createOrUpdateCard = data => {
  setDatas(datas => {
    const updated = { ...datas };
    updated[data.id] = data;
    return updated;
  });
};

위의 코드는 setDatas 내부에서 화살표 함수를 통해 이전데이터를 가지고 오는 로직이다. 이러한 방식으로 가져오지 않고 그냥 datas를 쓰면, 데이터가 안들어가는 경우가 발생한다.

 

2. Read

아래의 map 함수를 사용해서 넣어주면된다.

 

 

3. update

const createOrUpdateCard = data => {
  setDatas(datas => {
    const updated = { ...datas };
    updated[data.id] = data;
    return updated;
  });
};

 

 

4. delete

const deleteData = data => {
  setDatas(datas => {
    const updated = { ...Datas };
    delete updated[data.id];
    return updated;
  });
};

data로 인자를 받는다. 그리고 받은 내용이 토함된 id값을 삭제한다. 이때 다른 일반적인 delete 로직과의 차이점은 map을 사용하지 않았다는 것이다.

 

 

 

보통 위와 같이 사용을 많이한다. 위의 단점은 CRUD 시에, 특정한 타겟 값을 찾을 때 리스트 내부의 객체들을 하나씩 들어가서 id값을 확인해야한다. 따라서 아래와 같이 데이터를 받은 후에 변경을 해주면 좋다.

 

const [datas, setDatas] = useState({
    1: {
        id: 1,
        name: kang,
    },
    2: {
        id: 2,
        name: py,
    },
    3: {
        id: 3,
        name: han,
    }
});

우선은 list를 객체로 변경한다. 그리고 내부의 객체의 id값을 밖으로 빼내어 key로 설정을 한다.