L'etude36 react useRef 사용해보기 루티너리를 만드는 프로젝트를 진행중에 막히는 부분이 있었다. todo list 처럼 routine list를 만드는데 id 값이 고정되어 있어서 수정을할때 루틴 전부 다 수정이 되고 하나를 삭제하고싶은데 전부 다 삭제가 되는 그런 문제들이 있었다. 그래서 루틴이 추가될때마다 id 값을 1씩 증가해주고 싶었다. 이때, useRef 훅을 사용할 수 있었다. 👻 useRef .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. useRef는 어떤 가변값을 유지하는데에 편리한 훅이다. 이것을 프로젝트에 적용해보았다. const nextId = useRef(0); 이렇게 id 초기값을 0으로.. 2022. 6. 7. react typescript : todo list 수정하기 routine이 todo랑 비슷한 결,, 🐶 원하는것 routine list에서 edit 버튼을 누른다 -> 모달팝업이 뜬다. -> 내용을 수정한다. -> 수정된 내용으로 상태가 업데이트 된다. 우선, edit 버튼을 만들어주었다. 그 다음에는 handleClickOpenEditModal(id) 을 눌렀을 때 모달이 열린다. routine리스트인 routines에서 id가 같은 routine을 찾는다. const routine = routines.find((it) => it.id === id); 모달 열때 사용했었던 요 옆에 코드를 활용해서 모달을 열어준다. 내용 수정해주고~ 이제 수정된 내용으로 상태가 업데이트 되어야하기 때문에 기존에 add 버튼에서 사용중인 handleSubmit에다가 코드를 좀 추.. 2022. 5. 24. Type '{ routine: Routine | undefined; open: boolean; onClose: () => void; onAddRoutine: (routine: Routine) => void; onEditRoutine: (routine: Routine) => void; }' is not assignable to type 'IntrinsicAttributes & Props'. typescript 에러 해결하기 프로젝트 하던 중에 이런 에러가 떴다.. 결국 물어봐서 ㅎㅐ결했다. 에러가 난 부분은 여기인데 내가 지정해둔 type Props에 onEditRoutine이 없어서 에러가 난 것이다. 이렇게 Props안에 타입을 지정해줌으로써 해결했다. 2022. 5. 24. vscode : npm i & npm ci 차이 vscode 다시 설치하고 프로젝트 클론 받아왔는데 패키지들이 없어서 다 에러가 났다. 그래서 찾아본게 npm ci 를 해주면 pakage-lock 파일을 기반으로 패키지들을 설치해준다. npm i 를 하면 package.json에 있는대로 설치해버리고, 그에따라 package-lock 파일도 업데이트해버린다. 근데 나는 yarn 을 썼었어서 yarn install —fronzen-lockfile을 해줘야했다. 2022. 5. 23. 이전 1 2 3 4 5 6 ··· 9 다음
