리액트 (22) 썸네일형 리스트형 [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.. section4/Unit3/[HTML/CSS] 심화(11/24) 웹팩과 리액트 리액트 개발에 꼭 필요한 라이브러리 1. react, react-dom 너무나 당연한 이야기지만, 리액트 컴포넌트와 Hooks, 라이프 사이클에 대한 정보가 모두 들어있는 리액트와 이 리액트 코드를 브라우저에 보여줄 수 있는 react-dom은 꼭 필요하다. 2. babel React를 학습하기 전, JSX부터 배워야 했었다. 그런데, 브라우저에서 JavaScript는 읽을 수 있지만 JSX는 읽을 수 없다. 지금까지 React를 JSX로 작성해왔는데브라우저에서 내가 만든 React 애플리케이션을 볼 수 있었던 이유는 create-react-app에 포함되어 있는 babel이 jsx를 js로 변경해주어 번들링을 해줬기 때문이다. 참고로 babel은 JSX를 JavaScript로 변경하여 e.. 이전 1 2 3 다음
