• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 React 게시판 react,localstorage 이용해서 todolist만들다 문제가 ....

react,localstorage 이용해서 todolist만들다 문제가 ....

6 글 보임 - 1 에서 6 까지 (총 6 중에서)
  • 글쓴이
  • #27671

    오진희
    참가자

    react와 localstorage 이용해서 남들 다만들어 보는 .. todolist를 만들구 있습니다..

    문제는 ....제가 input창에 새로운 할일을 추가 해놓으면 .

    let save = () => {  
            let copy = [...ya_list, item_obj];    
     1)    console.log(copy);     //여기는 추가가 됬는데 ...
            localStorage.setItem('list', JSON.stringify(copy));
    2)     setya_list(copy);     //왜 stata에 추가가 안되지?....
            setlist_input('');    
            // setcount(count + 1);
           console.log(ya_list);
        }

    이펑션에서는  copy 부분은 추가가 되는데 .... 2번 state변경에서는 추가가 일어나질 않습니다...

    화면 렌더링은 잘 추가 되서 보이긴하지만 ,콘솔에서 찍어볼때는  console.log(ya_list); 이부분이 추가가안된 [] 빈어레이로 나오더라구요 .. 다음껄 추가하면 꼭 하나씩 덜추가되서 배열이 나옵니다..

    이렇게요 ㅠㅠ.. 왜이러는걸까요?애쁠샘 .......ㅠㅠ

    만약 체크 박스 추가하는  아래펑션에서는 

    let changeON = () => {    
          let copy = [...ya_list];              
          copy[mapIndex]['isON'] = !copy[mapIndex]['isON'];    // 기본값 false인데  true로 변경되도록했습니다.
          console.log(copy);  
          localStorage.setItem('list', JSON.stringify(copy));  
          setya_list(copy);   //여기는 되는데 ....
          console.log(ya_list);  
       }  

    배열 개수들은 잘찍히는데 여기서의 문제는 .....  checkbox를 클릭하면 isON값이 true로 바뀌면 

    글씨에 줄쳐지는 클래스가 붙도록 만들었어요. 그런데 ....

    꼭 한번씩 다른 애들꺼 까지 같이 변동 되더라구요 ...

    이렇게 체크박스를 클릭하면 글씨에 줄쳐지도록 만드는 계획입니다...그런데 ..만약 아래 클릭하면 위에 놈도 같이 줄이쳐지더라구요 ...... 아무리 아무리 수정을 해봐도 ㅠㅠㅠ 잘 되질않아서 ... 질문이 길지만 ..... 애쁠쌤께 여쭤봅니당..... 

    #27698

    codingapple
    키 마스터

    state 변경함수는 남들보다 늦게 처리되어서

    state변경함수 바로 밑에서 console.log하면 state 변동사항이 잘 안나옵니다 

    콘솔창에 안나와도 잘바뀌어있을듯요 

     

    원하지않는 요소에 class명이 붙는건

    class명 붙이는 if문이 잘 안되었거나

    체크박스 누른 요소가 몇번 요소인지 잘 기록을 안해놨거나 그런 경우인듯요 

    #27714

    오진희
    참가자

    아~!!! state변경함수  함수가 쫌 늦게 처리되는거였군요..! 그랬구나 ㅠㅠ....

    어쩐지 ...분명 추가 안될리가 없는뎅 ..... ㅎㅎ 

    글구 원래는 체크 박스 클릭시 class붙는 기능도, 인덱스 번호를 state변경함수로 바꿨는데 

    애쁠샘 말씀데로면 조금 늦게 처리되서, 혼자 혼동하는것 같아서 일반  let 변수에 담아서 바꿔주니 

    잘 실행됩니다 ㅎㅎㅎㅎㅎ!!.

    감사합니다~~!! 애쁠샘 ^^!!

    #27825

    오진희
    참가자

    쌤 한가지만 더 여쭤볼게욤...

    제가 일단 공부한내용으로  무작정 이렇게  투두리스트 를 만들긴 했는데... 구글에서 보니 다른사람 들은  성능 까지 고려해서  만들었더라구요.....ㅠㅠ  usememo,usecallback 이케 써가면서.. 전 무작정 일단 만들었긴했지만....  입사때 ..제껀 제대로 않쳐주지  않을지...?...  구글링 으로 검색해보니  미니 플젝들을 js나 리엑트 로  20개정도 넘게 만들더라구요...저도 몇개 만들긴 했지만 ...이렇게 많이 만들지는 못해서.....난노력을 덜한건가....혼자박탈감이 들었습니다....ㅠㅠ  입사때  불리하겠죠......??... 

    #27837

    codingapple
    키 마스터

    20개 만드는건 프로젝트형 강의 그대로 따라한 것일 뿐입니다 

    하나 만들 줄 알면 다른것도 다 만들 수 있어서 양이 중요한 분야는 아닙니다 

    한두개가지고 업그레이드 해나가면 됩니다 

    #27852

    오진희
    참가자

    ㅠㅠ 넹!!!ㅠㅠ 역시!!!  역시 애쁠쌤 쵝오에요!!!👍👍  엄청 걱정 했었거든요 .....🥺🥺 다시한번 힘내겠습니당!!! 

6 글 보임 - 1 에서 6 까지 (총 6 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠