본문 바로가기
반응형

전체 글

 (96)
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..
[트러블 슈팅] 커스텀 훅의 업데이트가 반영되지 않을 때 [개인 프로젝트] 올림픽 메달 트래커를 진행하면서 발생한 트러블 슈팅에 대해 정리해 봤습니다.커스텀 훅의 상태가 업데이트 됐는데 컴포넌트가 렌더링이 되지 않음발생한 오류 🔥국가 추가, 수정, 삭제를 커스텀 훅으로 따로 관리하고 해당 기능이 필요한 곳에서 `useCountry` 훅을 호출하는 방식으로 코드를 수정했는데 국가 추가를 눌렀을 때 `InputGroup` 컴포넌트에서 발생한 `addCountry` 함수는  잘 동작하지만 `MedalList` 컴포넌트에서 리스트가 보이지 않는 문제 발생. 해결 과정 🔎https://react.dev/learn/reusing-logic-with-custom-hooks Reusing Logic with Custom Hooks – ReactThe library for..
React 입문 6 (DOM, VirtualDOM) DOM이란? 📖DOM (Document Obejct Model)이란 웹 문서의 구조화된 표현인데요 엘리먼트를 tree 형태로 표현한 것이 DOM입니다. 트리의 요소 하나하나를 `노드`라고 합니다. 각 `노드`는 해당 노드에 접근과 제어(DOM 조작)를 할 수 있는 API를 제공합니다.// id가 demo인 녀석을 찾아, 'Hello World!'를 대입해줘.document.getElementById("demo").innerHTML = "Hello World!";// p 태그들을 모두 가져와서 element 변수에 저장해줘const element = document.getElementsByTagName("p");// 클래스 이름이 intro인 모든 요소를 가져와서 x 변수에 저장해줘const x = do..
React 입문 5 (명령형, 선언형) 명령형 프로그래밍 vs 선언형 프로그래밍 📖선언형 프로그래밍선언형 프로그래밍은 원하는 결과를 묘사하는 방식으로 코드를 작성합니다. 아래 예시는 자바스크립트를 이용해 배열에 짝수만 필터링하는 간단한 예제입니다.이 코드는 evenNumbers라는 새로운 배열을 만들어, filter메서드를 이용해 짝수만 필터링해 저장합니다. const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];const evenNumbers = numbers.filter(num => num % 2 === 0);console.log(evenNumbers); 이 예시는 짝수를 어떻게 필터링해야 하는지가 아닌, 짝수를 필터링한 결과를 얻는 것에 초점이 맞춰져 있는데요.  ✨선언형 프로그래밍의 특징✨ 데이터를 어떻..

티스토리툴바