[React] useState hook - 동적 테이블 구현

[React] useState hook - 동적 테이블 구현

useState hook - 동적 테이블 구현

이번 게시글에서는 state를 이용하여 간단한 동적 테이블을 구현해보자

이름과 나이만 있는 직원 리스트를 구현해보자.

 

실습 코드가 필요한 경우 핵심 코드만 작성할 것이다.

전체 코드는 링크해둔 url에서 확인할 수 있다.

최종 코드 보러가기 : 링크.

 

◆ 동적 테이블 구현하기

구현할 동적 테이블 기능은 아래와 같다.

• 항목 : 이름, 나이
• 항목 추가
• 항목 삭제
• 항목 내용 변경

 

그럼 위 기능을 가진 state는 어떤 구조일까? 를 생각해보아야 한다.

테이블 데이터이니 배열 형태의 구조를 가지고 있을 것이다.

또한 이름과 나이를 가지고 있으니 최종 모습은 아래와 같을 것이다.

 

- 초기 값은 빈 배열

 

- 값이 1개인 경우

 

위 구조를 바탕으로 테이블을 구현하면 아래처럼 구현할 수 있다.

userList 배열을 map으로 순회하며 tr, td 태그를 이용하여 항목을 렌더링한다.

현재는 userList 배열이 빈 배열이라 어떠한 정보도 보이지 않는다.

map으로 렌더링 하는 경우 key가 필요한데 임의로 map의 index로 사용했다.

(+ 사실 현재 구조상 key를 index로 사용하면 성능이 떨어진다.)

(+ react map key 사용방법 을 참고)

 

이제 추가, 삭제, 내용 변경 기능을 구현해보자.

제일 처음 해야하는 추가 기능을 먼저 구현해보자.

추가를 하면 userList state에 이름과 나이를 가지고 있는 객체가 하나 추가되어야 한다.

즉 [] -> [ { name: "", age: 0 } ] 으로 변경이 되어야 한다.

(+ name: "", age: 0 이 초기 값으로 가정)

 

위처럼 userList state를 변경시키려면 어떻게 해야할까?

아래처럼 구현하면 된다.

concat 함수는 새로운 배열을 return 해주기 때문에 기존 userList와 주소 값이 다르다.

따라서 정상적으로 react는 렌더링을 진행할 것이다.

위 코드 1줄로 추가 기능을 구현할 수 있다.

그럼 삭제 기능은 어떻게 하면 될까?

삭제 기능은 배열에서 1개의 index만 지우면 된다.

따라서 삭제하고 싶은 항목의 index만 알면 쉽게 해결할 수 있다.

그럼 아래와 같이 구현할 수 있다.

(+ index 변수가 해당 항목의 index라고 가정)

 

방법 - 1 (slice)

방법 - 2 (filter)

간단하게 위 2가지 방법을 생각해낼 수 있다.

방법 1은 slice 함수를 이용하여 해당 index 항목만 제외하고 앞 뒤로 배열을 나누고 다시 합친 것이다.

방법 2는 filter 함수를 이용하여 해당 index 항목만 제외하고 새로운 배열을 만든 것이다.

편한 것으로 사용하면 된다. (성능 생각 X)

2개 모두 코드에 반영해두었으니 github 코드를 참고하도록 하자.

 

마지막 기능인 항목 내용 변경을 구현해보자.

항목 구현도 삭제와 비슷하다.

몇 번째 항목인지 알아야 쉽게 변경할 수 있다.

이름, 나이 변경 모두 동일한 방법이니 이름만 알아보도록 하자.

(+ index 변수가 해당 항목의 index라고 가정)

삭제 방법 1의 방법을 그대로 사용하면 된다.

아래 코드를 확인해보도록 하자.

위 코드가 핵심 코드이다.

코드는 쉬우니 금방 이해될 것이라고 생각된다.

그러나 여기서 살펴볼 내용이 있는데 target 변수이다.

만약 ...(spread syntax)를 사용하지 않으면 어떻게 될까?

(+ 직접 ...을 지우고 실행해보자)

 

불변성이 깨지게 된다.

불변성이 깨진다는 것은 원본 객체에 영향을 준다고 생각하면 된다.

즉 ...을 사용하지 않으면 setUserList를 하기도 전에 userList의 값이 변경되어 있을 것이다.

(+ 직접 실행한 후 확인해보자. console.log 하면 됨)

 

따라서 불변성을 지키기 위해 ... 문법을 사용해주었다.

이것도 depth가 1인 경우만 되는 것이니 참고하도록 하자.

(+ depth 마다 전부 해주어야 함.)

추후 시간이 나면 불변성에 대해 더 자세히 알아보도록 하자.

 

◆ 정리 및 다음 게시글 소개

이번 게시글은 useState를 이용히여 동적 테이블을 구현하였다.

사실 state와 state를 변경하기 위해서 setState를 이용한다는 개념만 있으면 쉬운 내용이었다.

어려웠거나 이해가 잘 되지 않았다면 JavaScript 개념이 부족할 것이라는 생각이 든다.

(+ 사실 내가 설명을 못 했을 확률이 99%이다 ...)

 

아래 2개 링크를 참고히여 코드를 읽어보도록 하자.

리팩토링 전 : 코드 보기

리팩토링 후 : 코드 보기

위 코드를 참고하여 어떻게 깔끔하게 정리할 수 있는 지 확인도 해보자.

특히 input을 다룰 때 많은 도움이 될 수 있을 것 같다.

 

다음 게시글에서는 userRef hook을 배워보고 useState hook과 차이점을 알아보도록 하자.

마지막

해당 내용은 틀릴 수도 있습니다. 틀린 내용이 있으면 조언 부탁드립니다.