JH 개발 블로그

Material UI 에서 제공하는 기본적인 컴포넌트가 있지만 완벽하게 가져다 쓰는 경우는 거의 없다. 사용자의 입맛에 따라 커스텀을 하는 경우가 많다. 그럼 사용자의 스타일을 적용하는 방법에 대해서 알아보자. makeStyles Hook Material UI는 직관적으로 사용자 정의 스타일을 적용할 수 있도록 makeStyles React hook을 제공합니다. makeStyles는 @material-ui/core/styles 패키지에서 import 할 수 있으며, 인자로 커스텀 스타일 객체를 받습니다. 커스텀 스타일 객체의 클래스 이름을 키로 갖고 해당 클래스의 CSS 속성을 정의한 객체를 값으로 갖습니다. 이것도 결국은 훅이구나... import React from "react"; import { ..

input 구성 value 의 초기값: keyword = '' onChange 에 함수를 넣음(setState) 검색기능 구현 자바스크립트의 내장 함수 sort, filter 이용 sort 는 원배열을 바꿈 (안에 인자를 생략하면 오름차순으로 정렬) 반면, filter 는 원배열을 바꾸지 않음 toLowerCase 는 대소문자에 관계없이 검색해주기 위함 React + Node Express 체크박스 필터 기능 위와 같이 체크박스 구성 Node Express 도 알면 좋을 것 같아서 다음도 같이 살펴보자. Product.find() 데이터를 조회 할 때는 find() 메소드가 사용됩니다. query를 파라미터 값으로 전달 할 수 있으며, 파라미터가 없을 시, 모든 데이터를 조회합니다. 다시 리액트 체크박스..

페이지네이션 정의 페이지네이션은 전체 데이터를 보여주는 것이 아니라 그 버튼에 맞는 일부의 데이터를 보여주는 것... 과 같은 것 이전/다음 페이지 백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용됩니다. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야할 겁니다. 흔히 게시판의 "이전/다음 페이지"를 끊어 보여주는 기능으로 익숙할 텐데요. 많은 웹사이트에서 널리 사용되고 있는 개념이기에 친숙하게 느끼실 듯 합니다. 프론트엔드에서 현재의 위치(Offset)과 추가로 보여줄 컨텐츠의 수(Limit)를 백엔드에 전달합니다. 백엔드에서는 그에 해당하는 데이터를 끊어 보내주는 방식으로 구현하게 됩니다. 구현 방식 프론트엔드..

Parameter Parameter 는 매개변수라는 뜻 즉, url 경로에 매개변수를 도입할 수 있다!! 1. Path Parameter 와 Query Parameter 의 차이점에 대해서 설명할 수 있다. 2. useNavigate, useLocation, useParams 훅의 용도가 무엇인지 설명할 수 있다. 3. URL 에서 동적인 부분을 변수로 처리할 수 있고, 이를 통해 동적 라우팅 기능을 구현할 수 있다. 4. offset 과 limit 개념을 사용하여 페이지네이션 기능을 구현할 수 있다. 라우팅의 정의를 다시 살펴보면.... (다른 경로에 따라 다른 화면을 보여주는 것) 이다. 라우팅을 사용하는 이유는 -> 리액트는 SPA 이기 때문이다. < 우리가 배운 기존의 라우팅 ..

class 선언없이 컴포넌트에 직접 장착한다. CSS IN JS import styled from 'styled-components'; // import 해와야 한다 컴포넌트에 직접 스타일 넣어서 스타일링하기 let 박스 = styled/div` padding : 20px; ` 이렇게 백틱 안에 스타일 선언한다. css 를 미리 입혀놓은 컴포넌트... className 작명이 필요 없다. let 제목 = styled.h4` font-size: 25px; `; 상세페이지 h4 태그에다가 적용하는 방법이다. 다른 컴포넌트에 전파될 실수를 방지한다. let 제목 = styled.h4` font-size: 25px; color: ${ props => props.색상 } `; 상세페이지 `글자 $ {변수명} 글자`

내가 구현하려고 하는 것은... 로그인이 성공되면 상단바의 아이콘이 사람 모양으로 바뀌어지고, 로그인을 하지 않으면 상단바의 아이콘이 LOGIN / SIGNUP 으로 나타내는 것을 구현하는 것이다. 그래서 내 생각에는 상단바 컴포넌트에서 isToken 이라는 useState 변수를 선언하여, useEffect 를 사용해 만약 isToken 이 true 이면 아이콘이 사람 모양, isToken 이 false 이면 아이콘이 LOGIN / SIGNUP 으로 바꾸도록 코드를 짰었다. (이 모든건 상단바 컴포넌트 안에서 짬) 그런데 멘토님이 조언을 해주었다. 로그인 컴포넌트가 업데이트 된다고 해서 상단바 컴포넌트가 업데이트가 되는 것이 아니다. 그러면 어떻게 하는지 도움을 여쭤봤다. 멘토님 왈..... props..

얼마 전 백엔드와 통신을 하던 중 이상한 일이 발생하였다. 사건을 설명하자면... 나와 백엔드 한 분은 장바구니 기능을 담당하고 있었는데 백엔드에서 보내온 데이터(장바구니에 담긴 상품 정보)를 받는 get 메서드, 내가 수량을 조절해서 그 데이터를 보내는 patch 메서드, 그리고 상품을 삭제할 때 보내는 delete 메서드... get 과 patch 메서드를 이용할 땐 데이터가 정상적으로 통신이 되었는데 이상하게 delete 에서만 문제가 발생되었다... 어떤 상황이냐면... 삭제 버튼을 누르면 백엔드쪽에서는 데이터가 성공적으로 삭제되었지만, 보여지는 쪽(프론트단)에서는 아무런 반응이 일어나지 않았다... 근데 새로고침하면 삭제 되있다... 이게 무슨 의미....????? 일단 확인해보니 delete ..

import React, { useState } from 'react'; import './Cart.scss'; import CartItem from '../CartItem/CartItem.js'; import '../CartItem/CartItem.scss'; const a = [{ item: 'egg' }, { item: 'egg' }, { item: 'egg' }, { item: 'egg' }]; // 불러올 데이터 function Cart({ closeCartMenu }) { const [userCart, setUserCart] = useState([]); const addUserCart = () => { setUserCart(a); }; return ( Cart List photo num pri..

상수데이터 export const RECOMMEND_DATA = [ { id: 1, userId: 'jihyun219', userName: 'jihyun', src: '/images/jihyunLee/profile.jpg', }, { id: 2, userId: 'jihyun123', userName: 'jihyun', src: '/images/jihyunLee/profile.jpg', }, { id: 3, userId: 'jiyoung999', userName: 'jihyun', src: '/images/jihyunLee/profile.jpg', }, ]; 상수데이터에서 [ ] 배열로 선언한 이유는 무엇일까? 바로 map 메서드를 사용하기 위해서이다. {RECOMMEND_DATA.map(story => ..

Hook 은 낚시바늘이라고 생각하면 된다. 컴포넌트는 등장 -> 업데이트(재렌더링) -> 퇴장 의 Lifecycle 을 거치는데 이때마다 훅을 걸어준다고 생각하면 쉽다. 예를 들어, 컴포넌트가 등장하기 전에 훅을 걸어서 "그 전에 이것 좀 해줘" 라고 할 수 있는 것이다. 또는 "퇴장 전에 이것 좀 해줘" 가 될 수 있다. 이것이 훅인데 다시 말해서, Hook 이란 컴포넌트의 LifeCycle 에 딴지를 거는 것이다. * Hook 으로 컴포넌트의 인생 중간중간에 뭔가 명령을 줄 수 있다. e.g.) 퇴장 전에 이것 좀 해주세요 클래스형 컴포넌트를 쓰고 있을 시절...에는 훅을 이렇게 쓸 수 있었다. ▼ class Detail2 extends React.Component { componentDidMount..