react map 에서 hook으로 배열(array)의 특정 컬럼값 업데이트 방법 && 배열 세팅 방법

배열 형태의 리스트 값에서 특정 index 의 특정 컬럼의 값만 업데이트 하려고 한다. 일단 리스트는 map 으로 돌리고 업데이트는 hook인 useState로 하려고 했다. 결론은 map에서 hook 으로 업데이트 할 필요없이 그냥 할당하면 된다. (이렇게 하는게 맞는지는 모르겠으나) 그리고 스프레드 연산자로 배열값 처리하는 방법을 각종 테스트를 통한 예제를 적어봤다. (js 배열 다루기 너무 어렵다)

# 예제 데이터 : name 값을 ‘bbbb’로 변경 하려고 함

const [data, setData] = useState([
 {id:0, name:''},{id:1, name:''},{id:2, name:''}
]);

결과

1.

useEffect(() => {
 data.map((list)=>{
  setData(prev=>([...prev, {name:'bbbb'}]));
 })
},[])

결과

2.

useEffect(() => {
 data.map((list)=>{
  setData(prev=>({...prev, name:'bbbb'}));
 })
},[])

결과

3.

useEffect(() => {
 data.map((list)=>{
  setData({...data, name:'bbbb'});
 })
},[])

결과

4.

useEffect(() => {
 data.map((list)=>{
  setData([...data, {name:'bbbb'}]);
 })
},[])

결과

5.

useEffect(() => {
 data.map((list)=>{
  setData(prev=>[{...prev, name:'bbbb'}]);
 })
},[])

결과

6.

useEffect(() => {
 data.map((list)=>{
  setData({...list, name:'bbbb'});
 })
},[])

결과

7.

useEffect(() => {
 data.map((list)=>{
  setData(prev=>[...prev, {...list, name:'bbbb'}]);
 })
},[])

결과

8.

useEffect(() => {
 data.map((list)=>{
  setData(prev=>[...prev, {name:'bbbb'}]);
 })
},[])

결과

9.

useEffect(() => {
 data.map((list)=>{
  setData(prev=>[{...list, name:'bbbb'}]);
 })
},[])

결과

10.

useEffect(() => {
 data.map((list)=>{
  setData(prev=>[...prev, {name:'bbbb'}]);
 })
},[])

결과

11.

useEffect(() => {
 data.map((list)=>{
  setData(data=>{return {...data, name:'bbbb'}});
 })
},[])

결과

12.

useEffect(() => {
 data.map((list)=>{
  setData({...data[1], name:'bbbb'});
 })
},[])

결과

13.

useEffect(() => {
 data.map((list)=>{
  setData([{...data[1], name:'bbbb'}]);
 })
},[])

결과

14.

useEffect(() => {
 data.map((list)=>{
  setData(...data,[{...data[1], name:'bbbb'}]);
 })
},[])

결과

15.

//성공, 값을 hook으로 업데이트 하는게 아니라 할당하면 된다
useEffect(() => {
 data.map((list)=>{
  list.name='bbb'
 })
},[])

결과

16.

//성공, 값을 hook으로 업데이트 하는게 아니라 할당하면 된다
//filter 로 조건 적용
useEffect(() => {
 data.filter(list=> list.id==0).map((list)=>{
  list.name='bbb'
 })
},[])

결과