본문 바로가기
반응형

분류 전체보기

 (501)
[react & typescript] useRef 사용시 "개체가 null(undefined)인 것 같습니다" 에러 해결하기 프로필 이미지 변경 관련 로직을 구현하던 중 만난 에러였다. // 프로필 이미지 수정을 위한 ref const fileInput = useRef(null); 프로필 이미지 변경 기능 구현을 위해 useRef를 사용하여 파일 업로드를 위한 태그를 가리키거나, 프로필 이미지 클릭 시 프로필 이미지를 가리킬 수 있도록 만들고 있던 찰나 // 프로필 이미지 클릭시 파일 업로더 뜸 const onClickImg = () => { fileInput.current.click(); }; 위의 코드에서 '개체가 null인 것 같다는 에러가 뜨고 말았다ㅠㅠ 타입스크립트 너 진짜 깐깐하다!!! 구글링을 해보니, useRef를 선언할 때, 초기값으로 null을 준 것이 원인이였다. useRef는 초기값을 current에 저장..
[react] navigate 시 props 전달하기 // '수정' 버튼 클릭 시 PostUpdateModal로 이동 const navigate = useNavigate(); const handleEdit = () => { navigate(`/edit/${id}`, { state: responseData }); }; // navigate로 컴포넌트 이동 후 받아온 props const { state } = useLocation();
[react] 구조 분해 할당 이름 변경하기(feat.typeScript) 구조 분해 할당으로 변수를 받아 올 때, 이름을 변경할 수 있다는 사실! const { axiosData: updateC } = useAxios( () => updateComment( "rhino", "https://user-images.githubusercontent.com/94962427/211698399-0cf1ffff-89d3-4595-8abb-5bcb23843a5d.jpeg", editedComment, createdAt, newSingleComment.id ), [editedComment, createdAt], true ); const { axiosData: deleteC } = useAxios( () => deleteComment(newSingleComment.id), [deleteClick..
[react] props를 state로 설정하여 state 변경 실시간 업데이트해주기(feat. Typescript) 메인 프로젝트를 진행하며 가장 궁금했던 부분.. 바로 state 변경 시 화면에 실시간으로 업데이트를 시켜주는 것이다. 댓글이 수정 되었을 때 그것이 실시간으로 반영이 되도록 만들고 싶은데, 이를 위해 매번 state 변경 이후 GET 요청을 보내주어 변경사항을 반영해주어야하는지에 대한 고민을 많이 하였다. 결국 멘토님께 질문을 했고 멘토님께서 해주신 말씀은 이렇다. 자식 컴포넌트의 상태는 자식 컴포넌트에서 관리해야한다. 자식 컴포넌트가 바뀌었다고 그걸 부모 컴포넌트에서 다시 뿌려주는 과정을 거쳐야할까? 부모 컴포넌트는 뿌려주기만 할 뿐, 자식의 상태는 자식이 지지고 볶아야 한다. (적어도 내가 이해한 바로는 이렇다^^7 맞나요 멘토님..? 데헷) 주신 피드백을 바탕으로 댓글 추가/수정/삭제 기능의 리팩..
[react] useAxios 커스텀 훅 사용기1(feat. typescript) 네트워크 통신이 많은 앱을 만들다보니 실시간 데이터 리로딩 로직의 필요성을 느끼게 되었고 더 이상 무수한 get 요청에 의존할 수 없다는 것을 깨달았다... 또한 네트워크 관련 코드들을 정리하여 관심사 분리를 진행해야겠다는 생각이 들었다. 코드가 너무 길고 지저분해지면 클린한 코드가 아니라는 생각이 들었기 때문이다. 작은 프로젝트지만 그래도 최대한 클린코드를 향해 나아가는(?) 마음가짐을 가지고 싶었다 :) 해당 문제를 어떻게 해결할지 팀원 분과 고민을 많이 하다가 멘토님께 조언을 얻기로 하고 질문 목록을 정리하여 미팅에 참석하였다! 멘토님께서 추천해주신 방법은 커스텀 훅을 만들어 네트워크 통신 후 response를 받아오도록 만들고, 네트워크 통신과 관련된 코드는 도메인 별로 나누어 파일로 정리하는 것..
[react] 이미지 hover시 이미지 짙어지며 텍스트 뜨게 만들기 각 컴포넌트 hover 시 짙어지며 원하는 텍스트가 나올 수 있도록 만들어보자. 전체 컴포넌트의 구조는 이렇다! {post.likes} 이제 CSS를 작성해보자. 먼저 각각의 게시글 컴포넌트의 Position을 relative로 만들어주자. 그 다음, 컴포넌트에 꽉 차게 썸네일 이미지를 띄워주기 위해 이미지 컴포넌트의 width, height를 모두 100%로 설정해준다. const ImgWrapper = styled.div` width: 130px; height: 130px; position: relative; .post_thumbnail { width: 100%; height: 100%; } `; 그 다음 각 게시글의 썸네일 이미지 호버시 해당 글에 대한 '좋아요' 수를 표시하고 싶기 때문에 clas..
[react] star-rating 구현하기(feat. typescript) 후기의 핵심.. 별점 매기기 기능을 구현해보도록 하자. 이것도 라이브러리가 몇 개 있었는데, 타스에서 적용이 안된다는 이야기가 많아 자스로 구현된 예시 몇개를 보고 리팩토링을 하는 방식으로 진행하였다! 먼저 별점 매기기 기능의 꽃! 별 아이콘을 가져오자. 나는 클릭 여부에 따라 커스텀을 해야하기 때문에 mui 아이콘을 그냥 사용하지 않고 컴포넌트로 만든 뒤 svg 형식으로 가져와 사용했다. 하단 코드는 공식 홈페이지를 참고하였다. import SvgIcon from "@mui/material/SvgIcon"; interface IProps { key: number; size: string; onClick: () => void; className: string; } const StarRate = (prop..
[react] 텍스트 에디터 react-quill 사용기 (feat. typescript) 우리 프로젝트에는 블로그 형식처럼 음식점에 대한 후기글을 남기는 기능이 있었기 때문에, text editor의 사용은 필수적이였다. react에 적용되면서 typescript로 사용가능하고 레퍼런스가 많은 라이브러리를 찾아보려고 이틀 간 구글링을 정말 열심히 했던 것 같다! ㅠㅠ 타입스크립트로 작성된 플젝의 레퍼런스는 사막에서 바늘찾기... 난 아직 애기인걸.. 타입스크립트 신생아라서 레퍼런스 없이는 감도 안오는걸? 응애 결론적으로 내가 선택한 라이브러리는 react-quill이라는 라이브러리이다. react-quill 라이브러리는 타입스크립트가 적용될 뿐아니라 이미지 업로드 시 파일 업로더를 사용하는 방식으로 구현되어 있어, 유저가 게시글을 작성할 때 더욱 편리하게 이미지를 추가할 수 있겠다고 느껴 선..
반응형

티스토리툴바