제인의 블로그

onAddPokemon이 함수가 아니라는 오류가 발생. 이건 onAddPokemon 함수가 PokemonList 컴포넌트로 올바르게 전달되지 않았거나, 함수가 누락되었을 때 발생 가능.이 문제를 해결하기 위해 PokemonContext를 이용하여 addPokemon 함수를 전달하는 방식으로 수정하기. ```pokemonContext.jsx```import React, { createContext, useContext, useState } from 'react'; const PokemonContext = createContext(); export function PokemonProvider({ children }) {   const [selectedPokemon, setSelectedPokemon] = u..

Q1.  Q2.  Q3. Q4. Q5.   Q6. Q7. styled-components를 사용해 props를 기반으로 스타일을 조건부로 설정하는 예시 코드를 작성해보세요. import styled from 'styled-components'; // 조건부 스타일링이 적용된 Button 컴포넌트 const Button = styled.button`   background-color: ${({ primary }) => (primary ? 'blue' : 'gray')};   color: white;   padding: 10px 20px;   border: none;   border-radius: 5px;   cursor: pointer;      &:hover {     background-color: $..

Batching주요 사례와 사용 방법상태 업데이트(batch state updates):리액트 같은 프레임워크에서는 상태 업데이트가 여러 번 발생할 때마다 각각 렌더링을 하지 않고, 특정 시점에 모아서 한 번에 렌더링하는 방식입니다. 이러면 불필요한 렌더링을 줄여 성능이 좋아집니다.예를 들어, 리액트 18에서는 이벤트 핸들러 내부의 여러 상태 업데이트가 자동으로 배칭되며, ReactDOM.flushSync() 같은 메서드를 통해 강제 동기 업데이트도 가능합니다.이벤트 처리(batch event handling):JavaScript에서 스크롤, 리사이즈 같은 빈번히 발생하는 이벤트는 성능에 큰 영향을 줄 수 있습니다. 이러한 이벤트는 requestAnimationFrame, setTimeout 등을 이용해..

하.하하.css파일 짜증난다 style component로 해야댓는데바꾸면서 에러가 뜬다...에러가 뜬다..뜬다..수정을 하면 기능 구현이 안되고이런 썩을 포켓몬 내 상세페이지는 어디갓는데.. 돌려도라.돌려조라.....내놔랑.........그래도 에러는 안뜬다 햇삐 :)  해..햇삐 맞냐고....되물어 보며내일은 삭제버튼도 다시 구현하고~ 포켓몬 추가 버튼누르면 위에 대시보드에 뜨면서 대시보드에 뜬 포켓몬 누르면 상세페이지 넘어가게 여튼 만들어보자공~.~다짐해봅니다 눈누

이렇게 구현완료 일단 css파일로 만들었으니.......내일 또 마저 수정하는걸로 희희....내일 할일 css -> 스타일 컴포넌트로 변경하기...

Supabase와 React를 사용하는 방법React Supabase 1. Supabase 소개와 특징  주요 개념 설명 - Supabase는 오픈 소스 Firebase 대안으로, 데이터베이스, 인증, 스토리지 및 서버리스 함수를 제공하여 빠르게 백엔드 기능을 구현할 수 있도록 합니다. - 특징:   - PostgreSQL 기반 데이터베이스를 사용해 강력하고 확장 가능한 데이터베이스 환경을 제공합니다.   - 실시간 기능: 데이터 변경 사항을 실시간으로 반영합니다.   - 쉽고 빠른 인증: OAuth 제공자와 연동하여 쉽게 인증 기능을 설정할 수 있습니다.   - RESTful API 자동 생성: 데이터베이스 테이블에 REST API와 GraphQL API가 자동으로 생성됩니다. 사용 시나리오 - 스타트..

React Router는 React 애플리케이션에 클라이언트 사이드 라우팅을 제공해 단일 페이지 애플리케이션에서 다중 페이지처럼 사용자에게 다양한 화면을 보여줄 수 있도록 합니다.  React Router  1. React Router의 역할과 필요성  주요 개념 설명 - React Router는 URL을 기반으로 다양한 컴포넌트를 렌더링할 수 있도록 도와줍니다. React는 기본적으로 단일 페이지 애플리케이션(SPA)이지만, React Router를 사용하면 여러 페이지처럼 보이는 UI를 만들 수 있습니다. - 역할과 필요성: 페이지 리로드 없이 URL 변경을 통해 사용자에게 여러 화면을 보여줄 수 있습니다. 라우팅을 통해 UI와 상태를 URL과 동기화하며, URL을 통해 특정 페이지에 직접 접근할 수..

Redux는 복잡한 애플리케이션에서 상태를 보다 체계적으로 관리할 수 있게 해주는 라이브러리입니다.  Redux 1. 상태 관리의 필요성과 Redux 등장 배경 주요 개념 설명 - 상태 관리의 필요성: React 애플리케이션에서 컴포넌트 간 상태가 공유되어야 할 때 props를 통해 전달하거나 Context API를 사용해 데이터를 전달합니다. 그러나 애플리케이션이 복잡해질수록 상태가 여러 컴포넌트에 걸쳐 복잡하게 얽히게 되어 관리가 어려워질 수 있습니다. - Redux의 등장 배경: 애플리케이션 상태를 체계적으로 관리하고, 상태 변경 흐름을 명확하게 하기 위해 Redux가 등장했습니다. Redux는 단일 상태 트리로 전체 애플리케이션 상태를 관리하며, 상태 변경이 예측 가능하게끔 합니다. 사용 시나리오..

1. React 기본 구조와 스타일링 - React의 기본 개념 (컴포넌트 기반, UI 선언적 접근) - JSX의 역할과 기본 문법 - 스타일링 기법 (CSS 모듈, Styled Components, CSS-in-JS) 2. React Hook - Hooks 소개 및 기본 개념 - 주요 Hooks: `useState`, `useEffect`, `useRef`, `useContext` - 커스텀 Hook 만들기 - 실습 예제: 간단한 상태관리 및 효과 처리 3. Redux - 상태관리의 필요성과 Redux 등장 배경 - Redux의 주요 개념: Action, Reducer, Store - Redux Toolkit 소개 및 사용법 - Redux Thunk, 미들웨어 사용법 - 실습 예제: Todo 리스트를 ..

React Hook  1. Hooks 소개 및 기본 개념  주요 개념 설명 - Hooks는 함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있도록 하는 기능입니다. 클래스 컴포넌트 대신 함수형 컴포넌트를 더 유연하고 간단하게 사용할 수 있게 해줍니다. - 기본 규칙:    - Hook은 함수형 컴포넌트의 최상위에서만 호출해야 합니다.   - 조건문이나 반복문 내부에서는 Hook을 호출하면 안 됩니다.   - `use`라는 접두어로 시작해야 하며, 함수형 컴포넌트나 커스텀 Hook 내부에서만 사용할 수 있습니다. 사용 시나리오 - 상태 관리: 컴포넌트 내의 상태를 관리할 때 `useState`를 사용합니다. - 라이프사이클 관리: 특정 이벤트나 데이터 변경 시 효과를 주거나, 구독을 관리할 때 `..