본문 바로가기
반응형

분류 전체보기

 (115)
[개인 과제] 포켓몬 도감 회고 개인 과제 소개 📖react, styled-components, context API를 이용한 포켓몬 도감입니다.배포 링크 : https://pokemon-app-sepia-nine.vercel.app/깃허브 주소 : https://github.com/smu06030/pokemon-app 요구 사항 📌필수 구현 사항✅ Git 브랜치 전략 사용 (props-drilling, context)✅ 페이지 라우팅 구현 (react-router-dom)✅ 도감 페이지 구현각 포켓몬 카드의 추가 삭제버튼클릭 시 디테일 페이지 이동✅ 디테일 페이지 구현뒤로 가기 버튼 클릭 시 기존 리스트 유지✅ 알림 기능 구현 (sweetalert2)✅ styled-components 스타일링 사용 기술 🛠️컴포넌트 기반의 구조..
[트러블 슈팅] 포켓몬 도감 (svg, router, 이벤트 버블링) [개인 과제] 포켓몬 도감 회고개인 과제 소개 📖react, styled-components, context API를 이용한 포켓몬 도감입니다.배포 링크 : https://pokemon-app-sepia-nine.vercel.app/깃허브 주소 : https://github.com/smu06030/pokemon-app 요구 사항 📌필수 구현mingos-habitat.tistory.com포켓몬 도감 만들기를 진행하면서 발생한 트러블 슈팅에 대해 정리해 봤습니다!SVG를 JSX 문법으로 컴포넌트화 하는 과정에서 발생한 Invalid DOM property 오류발생한 오류 🔥`HTML` 속성과 React `JSX` 속성 간의 차이 때문에 발생한 오류 해결 과정 🔎HTML과 JSX 속성의 차이 React..
React는 Hooks를 배열로 관리하는 이유 React는 Hooks를 배열(`Linked List`)로 관리하고 있습니다. 이는 Hooks를 관리하고 있는 배열에 index로 접근할 수 있다는 뜻이며, 호출 순서에 의존하고 있다는 뜻입니다. Hooks의 내부 관리 방식 📖Hooks는 `컴포넌트의 최상위 레벨` 또는 커스텀 훅에서만 호출할 수 있습니다. 조건문, 반복문 또는 기타 중첩된 함수 내부에서는 훅을 호출할 수 없습니다. 각각 `useState`의 인자로 초기값을 받아 배열 구조분해 할당으로 state 변수와 state 설정자(setter) 함수를 받고 있습니다.function App() { const [value1, setValue1] = useState(''); const [value2, setValue2] = useState(0);..
React 숙련 4 (react-router-dom) react router dom 📖리액트 프로젝트에서 라우팅을 가능하게 하는 라이브러리입니다. 설치 방법yarn add react-router-dom 사용 방법`About``Works``Home``Contact` 4개의 컴포넌트를 만듭니다. 가장 중요하다고 할 수 있는 부분인데요, 브라우저에서 URL을 입력하고 이동했을 때 원하는 페이지 컴포넌트로 이동하게 만드는 부분입니다.import React from "react";import { BrowserRouter, Route, Routes } from "react-router-dom";import Home from "../pages/Home";import About from "../pages/About";import Contact from "../pages..
React 숙련 3 (Memoization) Memoization 📖리렌더링 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트 모두최적화리액트에서 리렌더링이 자주 발생한다면 비용적인 측면에서 좋지 않기 때문에 최적화 작업이 필요합니다. 그래서 대표적인 방법으로 아래 3가지 방법이 있습니다. `React.memo` : 컴포넌트를 캐싱`useMemo` : 값을 캐싱`useCallback` : 함수를 캐싱 React.memo📖 1번 컴포넌트가 리렌더링 될 때 2~7번이 모두 리렌더링 됩니다.4번 컴포넌트가 리렌더링 될 때 6~7번이 모두 리렌더링 됩니다. 이 처럼 자식 컴포넌트에서 바뀐 게 없는데 리렌더링 되는 문제를 `React.memo`로 해결할 수 있습니다...
React 숙련 2 (react hooks) useState 📖가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가집니다. 사용 방법구조분해할당으로 상태값 `state`와 상태를 변경하는 함수 `setState`를 사용할 수 있습니다.const [state, setState] = useState(initialState); 함수형 업데이트기존 업데이트 방식과 `함수형 업데이트 방식`이 있습니다.// 기존에 우리가 사용하던 방식setState(number + 1);// 함수형 업데이트 setState(() => {}); 함수형 업데이트 방식을 이용하면 setState `() 안에`함수를 넣을 수 있고 인자로 현재의 state를 가져올 수 있습니다. 두 방식의 차이점const [state, setState] = useState(0);onC..
[트러블 슈팅] styled-components 오류 (표준, 비표준 속성) 발생한 오류 🔥import { useState } from "react";import styled from "styled-components";const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}; margin: 20px;`;function App() { return ( 박스 );}예제를 테스트해 보는 과정에서 `it looks like an unknown prop "borderColor" is being sent through to the DOM, which will likely trigger a React c..
React 숙련 1 (styled-components) CSS-in-JS란? 📖`CSS-in-JS`  방식이란 단어 그대로 자바스크립트 코드로 css 코드를 작성해 컴포넌트를 꾸미는 방식입니다. ❓왜 사용하고 장점은 뭘까요컴포넌트를 꾸미기 위해 css 파일을 만들어 import 하고 `HTML tag`마다 `className`를 넣고 css 코드를 작성하는 것을 반복하는데 조금 불편합니다. 그래서 css-in-js를 사용하면 style을 적용할 때 조건문, 변수 등 다양한 로직을 이용할 수 있습니다. Styled-components 📖리액트에서 `CSS-in-JS` 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지입니다. 사용 방법vscode 터미널에서 아래 명령어를 입력해 패키지를 설치합니다.yarn add styled-components 사용하기imp..

티스토리툴바