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..

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

1️⃣ 리액트 생명주기(life cycle)에 대해 설명해 주세요.React Life Cycle이란?React는 컴포넌트 기반의 View 중심인 라이브러리로, 각각의 컴포넌트에는 고유한 라이브사이클(생명주기)이 존재합니다. 컴포넌트의 생명주기는 보통 페이지에 렌더링되기 전 준비 과정에서 시작하여 페이지에서 사라질 때 종료됩니다. 이를 통해 React는 컴포넌트 생성, 업데이트, 그리고 제거될 때마다 특정 작업을 수행할 수 있는 기회를 제공합니다. React 라이프사이클은 크게 세 단계로 나눌 수 있습니다. Mounting (마운트)컴포넌트가 처음 생성되어 DOM에 삽입되는 단계입니다. `componentDidMount`와 같은 메서드를 통해 초기화 작업을 수행할 수 있습니다. Updating (업데이트)..

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 컴포넌트 내부에 감..

1️⃣ React에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요. Virtual DOM란?Virtual DOM(Virtual Document Object Model)은 실제 DOM을 조작하기 전에 그 변경 사항을 메모리상에 시뮬레이션하는 가상화된 객체입니다. 주로 React 같은 프레임워크에서 사용되며, 실제 DOM과 동기화 작업을 효율적으로 처리하여 성능 개선하는 데 도움을 줍니다. Virtual DOM의 작동 방식 1. 변경 사항 추적상태가 업데이트되면, Virtual DOM이 새로운 Virtual DOM 트리를 생성하여 변경된 부분을 추적합니다. 2. 차이 계산(Diffing)이전 Virtual DOM과 새로운 Virtual DOM을 비교하여 어떤 요소가 변경되었..

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..