Development Vlog

1. 부모 컴포넌트로부터 Paging 컴포넌트에 prop 받기const Paging = ({ handlePageChange, totalCount, currentPage }) => { }`handlePageChange` : 페이지를 변경하는 함수`totalCount` : 전체 항목의 갯수`currentPage` :  현재 페이지 번호2. 페이지 제한과 전체 페이지 계산const pageLimit = 5; // 보여줄 페이지 버튼 수const totalPages = Math.ceil(totalCount / 10); // 전체 페이지 수 계산`pageLimit` : 화면에 보여줄 페이지 번호 버튼의 갯수를 5개로 제한합니다.`totalPages` : 전체 상품 수(`totalCount`)를 10으로 나누어 한..

`styled()` 함수Styled components 라이브러리에서 제공하는 기능으로, 기존 컴포넌트에 스타일을 상속하거나 추가 스타일을 적용할 수 있습니다.// Button.jsimport styled from "styled-components";const Button = styled.button` border: 1px solid #58c4dc; background-color: #343a46; color: #ffffff; padding: 16px; &:hover { background-color: #ffffff; color: #343a46; }`;export default Button;// App.jsimport styled from 'styled-components';impor..

React Router 페이지 나누기Route 컴포넌트를 사용하여 리스트 페이지(Items)와 상세 페이지(Item)를 Route로 묶어 서로 다른 컴포넌트로 분리페이지 라우팅 설정import { Routes, Route } from "react-router-dom";import Items from "./Items";import Item from "./Item";function App() { return ( } /> } /> } /> );}export default App; `/items` 경로는 Item 리스트 페이지를 기본으로 표시, `:id` 경로는 각각의 아이템 상세 페이지(Item)를 렌더링합니다.API 호출 함수아이템의 ..

useEffect, useCallback, useMemoReact에서 제공하는 훅(Hook)으로, 각각 컴포넌트의 성능 최적화 및 부수 효과 관리를 도와주는 기능을 제공합니다.useEffectuseEffect는 컴포넌트가 렌더링된 후에 사이드 이팩트를 수행할 수 있게 해줍니다. 데이터 fetching, 수동 DOM 조작 등이 포함됩니다.useEffect(() => { // 렌더링 후 실행할 코드 return () => { // 정리가 필요한 경우 실행할 코드 }}, [dependencies]); 두 번째 인자로 의존성 배열을 전달하면, 해당 배열의 값이 변경될 때만 실행됩니다. 빈 배열을 전달하면, 컴포넌트가 처음 마운트될 때만 실행됩니다.useCallbackuseCal..

Styled Components란?Styled Components는 React에서 컴포넌트를 만들면서 동시에 해당 컴포넌트의 스타일을 작성할 수 있게 해주는 CSS-in-JS 라이브러리입니다. JSX로 컴포넌트를 만들듯이, CSS를 자바스크립트 코드 안에서 작성할 수 있는 방식으로, React 컴포넌트와 스타일을 보다 직관적으로 결합할 수 있도록 도와줍니다. Styled Components 사용 이유React에서도 일반적으로 CSS 클래스 이름은 전역적인 특성을 가지고 있습니다. 그래서 특정 파일에 CSS 스타일을 정의하고 해당 컴포넌트에만 적용하더라도, 동일한 클래스 이름을 가진 다른 컴포넌트에도 그 스타일이 영향을 줄 수 있습니다. Styled Components는 자동으로 고유한 클래스 이름을 생성..

1. AddItemuseState Hook을 사용하여 `values` 상태를 관리하여 여기에 `imgFile`이라는 이미지 파일을 저장합니다.const [values, setValues] = useState({ imgFile: null,}); `handleChange` 함수는 자식 컴포넌트 `FileInput`에서 전달받은 파일 정보를 `values` 상태에 업데이트 합니다.const handleChange = (name, value) => { setValues({ [name]: value, });}; 이제 `values`와 `handleChange` 함수를 `FileInput` 컴포넌트에 prop으로 내려줍니다.2. FileInputa. 파일 선택 시 미리보기 이미지 설정`handleChan..

React Router란?React Router는 리액트 애플리케이션에서 여러 페이지를 관리하고, 페이지 간에 탐색할 수 있도록 도와주는 라이브러리입니다. 사용자들은 한 페이지에서 다른 페이지로 이동할 수 있으며, URL에 따라 컴포넌트를 로드할 수 있습니다. React Router의 핵심 컴포넌트는 Router, Routes, Route, Link 네 가지입니다. 설치 방법아래 명령어를 사용하여 React Router를 설치해야 합니다.npm install react-router-dom RouterRoutersms React Router에서 페이지의 현재 URL과 페이지 기록 데이터를 가지고 관리합니다. React Routrer의 다른 기능을 사용하려면, 모든 컴포넌트를 Router 컴포넌트 내부에 감..

JSON 파일 데이터 렌더링포켓몬 데이터를 렌더링하고, 정렬과 필터링 기능을 만들기 위해, `pokemon.json` 파일을 불러온 후, `map` 메소드를 활용해 데이터를 렌더링하고, `sort`, `filter` 메소드를 사용하여 정렬과 필터링 기능을 구현할 수 있습니다.// pokemon.json[ { "id": 1, "name": "이상해씨", "types": [ "풀", "독" ] }, { "id": 2, "name": "파이리", "types": [ "불꽃" ] }, { "id": 3, "name": "꼬부기", "types": [ "물" ] }, 우선 위의 `pokemon.json`..

StateReact에서 state는 컴포넌트의 동적인 데이터를 관리하는 방법입니다. `state`는 각 컴포넌트가 자신의 데이터를 저장하고 이를 기반으로 UI를 업데이트할 수 있도록 해줍니다. 주요 특징로컬 상태 관리 : 각 컴포넌트는 자체 `state`를 가질 수 있으며, 이 상태는 해당 컴포넌트 내에서만 사용됩니다. 즉, 다른 컴포넌트와 공유되지 않습니다.비동기적 업데이트 : 상태 업데이트는 비동기적으로 이루어질 수 있습니다. 여러 개의 `setState` 호출이 있을 경우, React는 최적화하여 배치 처리할 수 있습니다.초기 상태 설정 : 컴포넌트가 처음 렌더링될 때 초기 `state`를 설정할 수 있으며, 클래스 컴포넌트에서는 생성자(consteuctor)에서, 함수형 컴포넌트에서는 `useSt..

Props란?JSX 문법에서 컴포넌트를 작성할 때, 컴포넌트에도 속성을 지정할 수 있습니다. React에서 이렇게 컴포넌트에 지정한 속성을 `Props`라고 부릅니다. `Props`는 `Properties`의 약자이며, 컴포넌트에 속성을 지정해주면 속성이 하나의 객체로 모여서 컴포넌트를 정의한 함수의 첫 번째 파라미터로 전달됩니다.// App.jsfunction App() { return ( );}export default App;import diceBlue01 from './asset/dice-blue-1.svg';function Dice(props) { console.log(props); return ;}export default..