티스토리

4전

검색하기

블로그 홈

4전

2yh-develop4jeon.tistory.com/m

감자당근 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[React] 리액트에서 Virtual DOM과 diffing 알고리즘 | Diffing 알고리즘이란Diff는 두 대상 간의 "차이점"을 의미합니다. 말 그대로 이전 트리와의 차이점을 구하는 알고리즘 입니다.리액트는 우리가 작성한 UI를 브라우저에 효율적으로 그리기 위해 Virtual DOM이라는 중간 단계를 거치면서 Diffing 알고리즘을 활용해 차이를 비교 합니다.효율적으로 그린다?리액트는 UI 상태가 바뀔 때마다 새로운 Virtual DOM을 만들고, 이전 Virtual DOM과 비교하여 실제로 바뀐 부분만 실제 DOM에 반영합니다.이 비교하는 과정을 바로 Diffing 알고리즘이라고 부릅니다.| Virtual DOMVirtual DOM은 실제 DOM을 추상화한 자바스크립트 객체입니다.리액트에서는 Virtual DOM을 활용해 최소한의 변경사항만을 실제 DOM에 한 .. 공감수 5 댓글수 0 2025. 3. 28.
Next.js에서 페이지 전환 애니메이션 구현 웹사이트에서 페이지가 전환될 때, 단순한 화면 변경보다 부드러운 애니메이션이 적용되면 사용자 경험에 있어 긍정적인 영향을 미친다고 생각합니다. Next.js에서는 기본적으로 페이지 이동 시 애니메이션이 없지만, 이를 직접 구현하여 자연스러운 페이지 전환을 만들 수 있습니다. 이번 글에서는 좌우 슬라이드 전환 애니메이션을 적용하는 방법을 공유하겠습니다. 이를 위해 Context API를 활용하여 애니메이션 상태를 관리하고, 커스텀 훅을 만들어 애니메이션을 쉽게 적용할 수 있도록 해보겠습니다.본 예시에서는 Next.js Tailwind CSS를 사용하였습니다.| Context 생성하기먼저, 페이지 전환 애니메이션을 관리할 Context를 생성합니다.이 Context는 애니메이션을 위한 className과 애.. 공감수 4 댓글수 0 2025. 3. 5.
[React] useState와 useRef를 통한 상태 관리 (애니메이션 상태 최적화) 리액트에서 훅은 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 강력한 도구입니다.그중에서도 useState와 useRef는 상태 관리를 위해 자주 사용됩니다. 하지만 코드를 보다 보면 어떤 상황에서는 useState로,또 어떤 경우에는 useRef로 상태를 관리하는 모습을 종종 보게 됩니다. 특히 DOM 조작을 위해 useRef를 사용하는 경우는 자주 보며 이해하기 쉽지만,이 외에 이유로 상태 관리를 위해 useRef를 사용하는 사례는 헷갈릴 때가 있습니다. 이번 글에서 이 두 가지 훅을 통한 상태 관리의 차이점을 공부해 보고,상황에 따라 어떤 것을 사용하는 것이 적절한지 정리해 보겠습니다.| React의 상태 관리와 UI 업데이트 방식리액트는 상태(state)나 props의 변경에 .. 공감수 5 댓글수 0 2024. 12. 30.
[React] 리액트에서 컴포넌트 추상화에 대한 고민 추상화는 불필요한 세부 사항을 제거하고 중요한 부분만 남겨시스템을 더 쉽게 다룰 수 있게 만드는 과정입니다. 프로그래밍에서는 인터페이스, 추상 클래스, 함수, 모듈 등을 통해 기능을 추상화할 수 있습니다.이를 통해 코드 재사용성, 유지보수성, 확장성을 높일 수 있습니다. React에서 컴포넌트를 설계할 때 이런 추성화 기법을 사용하여재사용성, 유지보수성, 유연성 등을 높일 수 있습니다. 최근 리액트로 만들어진 다른 사람의 코드를 보던 중,문득 "이 부분을 좀 더 추상화하면 관리가 더 쉬워질까?"라는 생각이 들었습니다. 코드를 처음 보면 간단해 보이지만,새로운 요구사항이 추가될 때마다 코드가 복잡해질 수 있지 않을까 고민했습니다.| 구현해 볼 컴포넌트제가 고민한 내용을 간단한 컴포넌트를 만들면서 공유해보려.. 공감수 11 댓글수 0 2024. 9. 21.
[vite.js / react] yarn berry 사용하기 (vscode 타입스크립트 오류) yarn berry는 yarn의 최신 버전(yarn 2와 그 이후의 버전)을 지칭합니다.PnP(Plug 'n' Play) 방식, Zero Install 방식을 지원하며 인기가 많은 패키지 관리 도구입니다.| yarn berry 특징Cache와 Zero-Installyarn berry는 설치된 패키지를 글로벌 캐시에 저장하여, 같은 패키지를 여러 프로젝트에서 사용할 때 다운로드 시간을 절약합니다. 패키지는 zip 파일 형태로 .yarn/cache에 저장되며,이를 통해 네트워크 요청 없이 빠르게 패키지를 불러올 수 있고,디스크 공간을 효율적으로 사용할 수 있습니다. 또한, Zero Install 기능을 통해, 패키지들이 리포지토리에 함께 저장하며 프로젝트를 클론 하는 것만으로 필요한 모든 패키지를 바로 사용.. 공감수 4 댓글수 0 2024. 7. 14.
무한 스크롤을 구현하기 위한 몇 가지 방법들 (Intersection Observer API를 사용하는 이유) 무한 스크롤은 사용자가 페이지를 스크롤할 때 콘텐츠를 동적으로 로드하는 기법입니다.무한 스크롤을 구현하는 방식은 몇 가지가 있는데 그중 몇 가지 방법을 사용해 보고,어떤 방식이 가장 좋은지 확인해 보려 합니다.| json-sever해당 글에서 기본적으로 예시 코드를 구현할 때 json-server라이브러리를 사용하여 구현하였습니다.https://www.npmjs.com/package/json-server json-server[![Node.js CI](https://github.com/typicode/json-server/actions/workflows/node.js.yml/badge.svg)](https://github.com/typicode/json-server/actions/workflows/node.. 공감수 94 댓글수 1 2024. 6. 17.
[Next.js] 프로젝트에 PWA 적용하기 최근에 지도 서비스를 개발하면서 사용자들이 해당 서비스를모바일에서 보다 편리하게 사용할 수 있도록 PWA를 적용하기로 했습니다. 오늘 포스팅에서 Next.js에서 PWA를 적용했던 과정을 적어보려 합니다.| manifest.ts먼저 pwa를 적용하기 위해서는 manifest라는 json 파일을 통해서 앱의 이름, 아이콘,기타 설명 등등을 설정해 줘야 사용할 수 있습니다. 따라서 우선적으로 해야 할 부분은 manifest파일을 만들고, 설정을 입력하고,html의 head태그 안에 아래와 같이 link태드를 넣어주면 됩니다. 하지만 Next.js에서는 직접 manifest.json을 만들고 link를 걸어줄 필요가 없고,공식문서를 보면 manifest.ts파일을 통해 자동으로 manifest를 생성하고,자동.. 공감수 124 댓글수 0 2024. 5. 28.
[Next.js, React(vite.js)] 로컬 개발 환경 https 적용하기 보통 웹 개발을 진행할 때 로컬 환경에서의 개발 주소는대부분 http://localhost 이런 식으로 되어 있는 경우가 많습니다. 일반적으로 개발을 진행할 때에는 문제가 되지 않지만 쿠키를 사용하는 경우secure 속성으로 인해 http에서 쿠키를 사용하지 못하는 경우가 있습니다. 이럴 경우 로컬 개발 환경에 https를 적용하여 개발을 진행할 수 있습니다.| mkcerthttps를 적용하기 위해서는 TLS/SSL 인증서가 필요합니다.mkcert는 자체 서명된 인증서를 만들어 주고,이를 신뢰할 수 있도록 로컬 CA(인증 기관)를 설치하고 관리합니다.따라서 개발 중 보안 경고 없이 https를 사용할 수 있도록 합니다. 먼저 mkcert를 설치해 줍니다.리눅스brew install mkcert윈도우cho.. 공감수 114 댓글수 0 2024. 5. 2.
[React] next.js ssr api요청에 쿠키 포함해서 보내기 홈페이지에서 사용자 인증에 대한 jwt 토큰을 쿠키에 저장하고, api요청 시 해당 쿠키가 같이 전송되며 사용자 인증을 처리하는 경우가 있습니다. Next.js를 사용하여 서버 사이드 렌더링을 통해 API요청으로 데이터를 받아올 때 쿠키가 포함이 안 돼서 데이터를 받아오지 못하는 경우가 있습니다. 이때 Next.js에서 제공하는 cookies 함수를 사용하여 쿠키를 직접 포함시켜 보낼 수 있습니다. | cookies cookies함수는 next.js 13부터 제공되는 함수로 서버 컴포넌트에서 쿠키를 읽고 쓸 수 있도록 해주는 함수입니다. get() 메서드 cookie함수의 get(name) 메서드로 쿠키의 이름을 사용해 쿠키의 이름과 값을 포함하는 객체를 반환할 수 있습니다. 만약 이름이 포함된 쿠키가 .. 공감수 93 댓글수 0 2024. 4. 19.
Vite.config에 환경변수 넣기 보통 vite를 사용하여 리액트 프로젝트를 할 때 환경변수를 import.meta.env.VITE_DEVELOP 이런 식으로 불러와서 사용할 수 있습니다. 하지만 이런 식으로 불러오는 것은 기본적으로 클라이언트에서 사용되는 거라 서버에서 불러와지지 않습니다. 따라서 process.env를 통하여 가져와야 하는데 그냥 사용하면 환경변수가 적용이 안되게 됩니다. https://vitejs.dev/config/#using-environment-variables-in-config vite.js 공식문서에 따르면 vite는 설정을 마친 뒤 어떻게 파일을 불러올 것인지 알 수 있기 때문에, 기본적으로 .env파일을 로드하지 않는다고 합니다. 따라서 필요시 loadEnv 헬퍼를 사용해 .env 파일을 불러온 후 사용.. 공감수 87 댓글수 0 2024. 4. 15.
[React] createPortal 사용 이유 (모달창) 리액트로 코드를 작성하면서 모달창을 만드는 경우가 많습니다. 언듯 보면 간단해 보이지만, 실제로는 예상하지 못한 복잡성을 내포하고 있습니다. 최근 저는 모달창을 구현하면서 z-index 관련 문제가 발생하였고, 이를 해결하기 위해 createPortal을 이용한 내용을 작성해보고자 합니다. | 문제 상황 문제 상황을 보기 위해 리액트 프로젝트를 만들고 간단한 모달창 하나를 만들어 보겠습니다. 먼저 props로 상태를 받아서 화면에 보여주고 닫을 수 있는 Modal 컴포넌트 하나를 만들어 주겠습니다. // Modal import styles from "./index.module.css"; type Props = { open: boolean; onClose: VoidFunction; }; const Moda.. 공감수 88 댓글수 0 2024. 4. 4.
[TanStack Query] Optimistic Update(낙관적 업데이트)로 사용자 경험 개선하기 최근에 프론트엔드 사용자 경험 개선에 관해 공부를 하다가 낙관적 업데이트라는 개념을 알게 되었습니다. 이왕 공부해 본 김에 프로젝트에 한번 적용해 보면 좋을 거 같아서 TanStack Query를 사용하여 적용해보고자 합니다.| Optimistic Update(낙관적 업데이트)낙관적 업데이트는 프론트엔드 개발에서 사용되는 데이터 동기화 전략입니다.사용자가 데이터를 수정하거나 추가할 때 서버로부터 오는 응답을 기다리지 않고,UI를 즉시 업데이트 하는 방식입니다. 낙관적 업데이는 사용자가 서버의 응답을 기다리지 않고 지연 없이 즉시 피드백받게 되므로,사용자 경험 개선에 큰 도움이 될 수 있습니다. 다만 오류가 발생했을 때 이를 적절히 처리하고 원상 복구 시키는 로직을 잘 작성해야 하고,금전적인 정보, 사용자.. 공감수 35 댓글수 0 2024. 3. 11.
[React] React lazy로 웹 성능 최적화 하기 (코드 스플리팅) 최근에 리액트로 프로젝트를 하면서 한 번에 여러 컴포넌트들을 불러오게 되면서 웹 성능이 떨어지는 일이 있었습니다.이에 React.lazy를 통한 코드 스플리팅으로 성능을 개선해보고자 했습니다.| 코드 스플리팅리액트에서 개발을 하고 배포할 때 빌드를 하게 되는데 이때 보통 단일 Javascript 파일로 번들링 하게 됩니다.이 방식은 애플리케이션의 크기가 커지면 초기 로딩 시간이 길어지는 문제를 야기할 수 있어서 코드 스플리팅을 통해 전체 번들을 더 작은 크기로 나누고, 이를 비동기적으로 로드할 수 있게 함으로써 로딩 시간을 개선하게 해주는 것을 코드 스플리팅이라 합니다.| React lazy리액트의 lazy와 Suspense로 필요할 때에 컴포넌트를 로드할 수 있도록 하려면 아래와 같이 코드를 작성하면 .. 공감수 2 댓글수 0 2024. 2. 12.
[React] 상태 관리를 통한 사용자 경험 개선 (페이지 전환) next.js로 프로젝트를 진행하면서 리스트에서 어떤 아이템을 클릭하면 해당하는 아이템의 상세 페이지로 이동하는 기능을 구현하였습니다. 이때 상세페이지로 첫 진입 시 next.js서버에서 데이터를 불러온 후 페이지로 이동되면서 아이템을 클릭하면 즉각적으로 페이지로 이동되는 것이 아닌 아래 이미지와 같이 딜레이가 생기는 현상이 있었습니다. 클릭하면 즉각적인 반응이 없기 때문에 클릭된 건지 안된 건지 헷갈리기도 하고 마치 렉이 걸린 듯하여 사용자 경험이 매우 떨어진다고 생각해 이를 개선하고자 했습니다. | 전역 상태 관리 store생성 먼저 아이템을 클릭했을 때 클릭했다는 상태를 저장하기 위해 전역에 상태를 저장해 줍니다. 해당 프로젝트에서는 zustand라는 라이브러리 사용하였습니다. // useLoadi.. 공감수 3 댓글수 0 2024. 2. 6.
[React] 리액트 Render와 Commit 리액트에서 컴포넌트는 화면에 보이기 전에 반드시 렌더링이 된다고 합니다. 그리고 이 렌더링 과정을 공식문서에는 아래와 같은 세 가지 단계로 설명을 하고 있습니다. 1. 렌더링 트리거 (Triggering a render) 2. 컴포넌트 렌더링 (Rendering the component) 3. DOM에 커밋 (Commiting to the Dom) 먼저 각 단계가 어떤 것을 의미하는지 알아보겠습니다. | 렌더링 트리거 (Trigger a render) 컴포넌트가 렌더링 되는 이유는 2가지가 있다고 하는데 아래와 같습니다. 1. 컴포넌트의 초기에 렌더링 2. 해당 컴포넌트나 상위 컴포넌트의 상태(state)가 업데이트되었을 때 1. 초기 렌더링 앱이 시작되면 초기 렌더링을 트리거하는 것이 필요합니다. 그리.. 공감수 3 댓글수 0 2023. 10. 24.
[React] 이벤트 버블링(bubbles, propagates) 리엑트에서 onScroll 이벤트를 제외한 모든 이벤트들은 부모 컴포넌트의 자식 컴포넌트에서 발생한 이벤트가 부모컴포넌트로 전파가 됩니다. 이를 "bubbles", "propagates"라고 합니다. | 예시 import React from 'react'; import './style.css'; export default function App() { return ( { console.log('1'); }} > console.log('2')}>children ); } 이런 식으로 부모요소를 클릭하면 콘솔에 1이 출력되고, 자식 요소인 버튼을 클릭하면 콘솔에 2가 출력되도록 해 보겠습니다. 그럼 이런 식으로 부모를 클릭했을 때 1이 출력되고, 자식 버튼을 클릭하면 버블링 현상으로 2와 1이 같이 출력이 됩.. 공감수 0 댓글수 0 2023. 10. 23.
[React] 커스텀 훅 만들기(Custom Hooks) 리액트에는 useState, useEffect 같은 내장되어 있는 훅 들이 있고, 이러한 훅들을 사용하여 나만의 로직을 만드는 경우가 자주 있습니다. 이럴 때 반복되는 로직들은 custom hooks로 만들어서 재사용 쉽게 만들면 좋은데 한번 간단한 예시를 통해 만들어 보겠습니다. | 예시 공식 문서에 따르면 커스텀 훅을 만들 때는 앞에 use라는 키워드를 붙여서 만들라고 해서 저도 use키워드를 붙여서 만들어 보겠습니다. 1. useInput input이 바뀔 때 입력값들을 useState를 통해 state로 저장하고 그 값을 input value로 보여주는 코드를 일반적으로 작성하려면 import { useState } from "react"; import { useInput } from "./hoo.. 공감수 1 댓글수 1 2023. 10. 9.
[React] create-react-app 작업 환경 구성, 파일 정리 리액트로 프로젝트를 할 때 create-react-app으로 시작하면 npx create-react-app ./ 아래처럼 여러 가지 파일과 폴더가 생깁니다. 당장에 프로젝트할 때 필요 없는 파일들이 있을 수 있으니까 각 파일들이 어떤 건지 알아보고 정리해 보려 합니다. | public 폴더 1. index.html 정리 먼저 아래처럼 주황색박스로 표시해 놓은 곳을 정리를 합니다. 그럼 이런 식으로 정리가 됩니다. 2. logo192.png, logo512.png, favicon.ico, manifest.json 제거 logo192.png, logo512.png - 리액트 기본 로고 이미지 이므로 제거 favicon.ico - 리액트 기본 아이콘 브라우저 위에 표시됨 본인 프로젝트 아이콘으로 대체 mani.. 공감수 0 댓글수 0 2023. 7. 18.
[React] react-ace 홈페이지에 코드 에디터 생성 리액트에서 홈페이지에 코드를 작성할 수 있는 코드 에디터를 생성하고 싶을 때 react-ace 패키지를 사용하면 편하게 생성할 수 있습니다. | 설치 먼저 이런 식으로 react-ace 패키지를 설치해 줍니다. npm install react-ace ace-builds | 사용 import AceEditor from "react-ace"; import "ace-builds/src-noconflict/mode-python"; // 언어를 바꾸려면 python 부분 바꾸면 됨 import "ace-builds/src-noconflict/theme-twilight"; // 태마를 바꾸려면 twilight 부분 바꾸면 됨 이런 식으로 사용하려 하는 언어와 태마 그리고 에디터를 임포트 해 온다음 function .. 공감수 2 댓글수 0 2023. 7. 3.
React - useCallback() 알아보기 useCallback()은 리액트에서 최적화를 위해 사용되는 훅(Hook)이라고 해 함수형 컴포넌트에서 반복되는 함수를 메모이제이션하여 재사용하도록 해줘 | useCallback() 함수형 컴포넌트는 말 그대로 함수고, 함수는 다시 호출되면 함수 내부 함수가 초기화됩니다. 따라서 함수형 컴포넌트가 렌더링이 되는 것은 함수가 다시 호출되는 것이고, 해당 컴포넌트의 함수도 초기화되는 거라고 할 수 있습니다. function App() { // 렌더링 될때마다 초기화 const 오래걸리는함수 = (num) => { return num + 10; }; return 값: {오래걸리는함수(5)}; } useCallback()을 사용하면 메모이제이션한 함수를 제사용 하기 때문에 함수가 초기화되는 것을 막을 수 있습니.. 공감수 0 댓글수 0 2023. 6. 16.
React - useMemo() 알아보기 useMemo()는 리액트에서 최적화를 위해 사용되는 훅(Hook)이라고 합니다. 메모이제이션을 하는데 이는 함수형 컴포넌트에서 반복되는 계산 값을 캐싱하여 재사용하도록 해줍니다. | useMemo() 함수형 컴포넌트는 말 그대로 함수고, 함수는 다시 호출되면 함수 내부 변수가 초기화됩니다. 따라서 함수형 컴포넌트가 렌더링이 되는 것은 함수가 다시 호출되는 것이고, 해당 컴포넌트의 값도 초기화되는 거라고 할 수 있습니다. function App() { // 대충 오래걸리는 함수 const 오래걸리는함수 = () => { console.log('렌더링 됨'); return 10; }; const value = 오래걸리는함수(); // 렌더링 될때마다 초기화 return 값: {value}; } useMem.. 공감수 0 댓글수 0 2023. 6. 12.
React - React Redux 사용해보기 리액트에서는 컴포던트 간에 state를 공유하려면 props로 전달해 주어야 사용할 수 있습니다. 따라서 상위 컴포넌트에 있는 state를 하위컴포넌트에서 사용하려면 props로 전달해 줘야 합니다. 이때 연결되어 있는 하위 컴포넌트들이 많아지면 props로 계속 전달해 줘야 하기 때문에 state의 관리가 어렵고 코드가 복잡해질 수 있습니다. React Redux는 state를 외부 파일에서 관리하고, props 없이 state를 공유하고 관리할 수 있도록 해줍니다. Redux는 리액트뿐만 아니라 다른 곳에서도 사용할 수 있지만 여기서는 리액트에서 사용하기 위해 React Redux를 연습해 보겠습니다. | React Redux 사용 먼저 React Redux를 설치해 보겠습니다. npm install.. 공감수 0 댓글수 0 2023. 6. 9.
[React] 리액트에서 페이지네이션 연습 웹페이지에서 데이터를 보여줄 때 많은 양의 데이터를 한 번에 가져와서 보여주는 것이 아닌 페이지를 나눠서 보여주는 것을 페이지네이션이라고 합니다. 먼저 리액트 폴더를 만들어 보겠습니다. npx create-react-app pagenation 그다음 api를 직접 만들어야 하나 생각했는데 다행히 저 같은 사람을 위한 api가 있어서 사용하기로 했습니다. 구글에 fake api라고 검색하고 DummyJSON - Fake REST API of JSON data for development DummyJSON - Fake REST API of JSON data for development Got tired of Lorem ipsum data? With FakeProductsAPI, what you get is .. 공감수 1 댓글수 0 2023. 6. 5.
[React] 객체 state 다루기 | 변경 리액트에서 state변수 안에 있는 객체를 변경할 때 그 변수에 객체를 직접 변경하면 안 됩니다. import { useState } from 'react'; export default function App() { const [user, setUser] = useState({ name: "Kim", age: 20 }); return ( 이름: {user.name} 나이: {user.age} { user.name = "Lee"; user.age = 30; }}>변경 ); } 여기에서 { user.name = "Lee"; user.age = 30; }}>변경 이런 식으로 직접 변경하면 리액트에서는 객체가 변경되었다는 것을 인지를 못합니다. 그래서 상태의 변화를 렌더링 하고 싶으면 setUser를 .. 공감수 0 댓글수 0 2023. 5. 31.
[React] useState() 알아보기 State는 상호작용의 결과로 화면의 결과나 상태가 변하는 동적인 값이라고 합니다. | useState 리액트에서는 useState를 사용하여 동적인 값을 나타낼 수 있고 import { useState } from "react"; 이런 식으로 import 해 온다음 사용하면 됩니다. 값을 저장하려면 const [count, setCount] = useState(0); 이런 식으로 사용하면 되는데 여기서 앞에 있는 count는 변수 명이고 setCount는 변수의 값을 바꿀 수 있는 함수입니다. import { useState } from 'react'; export default function Counting() { const [count, setCount] = useState(0); function.. 공감수 0 댓글수 0 2023. 5. 17.
[React] 이벤트 핸들러 | 이벤트 핸들러 리액트에서 이벤트핸들러를 JSX에 추가할 수 있습니다. 이벤트 핸들러는 클릭, 마우스 호버링, 폼 입력 등과 같은 상호작용에 따라 동작하도록 하는 기능입니다. export default function Button() { function handleClick() { console.log('클릭됨'); } return ( 클릭 ); } 이런 식으로 먼저 동작에 대한 함수를 정의해 준 다음 에 onClick={handleClick}를 추가해 주면 됩니다. 보통 함수 이름은 "handle"로 시작하고 뒤에 사용하는 이벤트를 적어준다고 합니다. onClick={handleClick}, onMouseEnter={handleMouseEnter} 이런 식으로 하면 됩니다. 또한 JSX에서 이벤트 핸.. 공감수 0 댓글수 0 2023. 5. 15.
[React] 공식문서 공부 - 순수함수로 컴포넌트 작성 자바스크립트에서 순수함수는 오직 단순한 계산과 같은 동작만 하도록 만들어지는 함수입니다. 리액트에서 컴포넌트를 순수함수로 만들면 버그와 예측할 수 없는 동작을 방지할 수 있다고 합니다. | 순수함수 순수함수는 y=2x와 같은 하나의 값을 넘기면 항상 같은 값을 반환하는 함수들을 말합니다. function double(num) { return 2 * num; } 위와 같은 double 함수가 순수 함수에 속합니다. 리액트 이러한 개념들로 디자인되었고 내가 작성한 모든 함수들을 순수함수라고 가정한다고 합니다. | 컴포넌트의 순수성 function Sum({ num }) { return ( 2 + {num} = {2 + num} ); } export default function App() { return (.. 공감수 1 댓글수 0 2023. 5. 8.
[React] 공식문서 공부 -리스트 렌더링 리액트에서 map(), filter()를 사용하여 배열의 있는 데이터들 모두 렌더링 하거나 특정 조건에 맞는 데이터만 렌더링 할 수 있습니다. | map() map() 함수를 사용하여 배열의 모든 데이터들을 한 번에 렌더링 할 수 있습니다. 아래와 같은 데이터가 있다고 하면 const items = [ { id: 1, name: 'apple' }, { id: 2, name: 'banana' }, { id: 3, name: 'orange' }, ]; 위 배열을 사용하여 리스트 형식으로 렌더링 하고 싶으면 { itmes.map((v, i) => { return {item.name} }) } 이런 식으로 사용하면 배열을 돌면서 각 데이터들의 정보를 렌더링 해줍니다. | filter() filter()를 사용하.. 공감수 0 댓글수 0 2023. 5. 5.
[React] 공식문서 공부 - Component의 export 와 import 리액트에서 컴포넌트를 만들고 다른 곳에서 사용하려면 컴포넌트를 export 하고 사용하려고 하는 파일에서 컴포넌트를 import 해야 됩니다. | Default 컴포넌트를 export 하는 방법에 default로 하는 방법이 있는데 이는 하나의 파일에서 하나의 컴포넌트를 보내고 싶을 때 사용하면 됩니다. 1. export export default 키워드를 사용하면 됩니다. export default function MyComponent() { return Hello, World!; } OR function MyComponent() { return Hello, World!; } export default MyComponent; 2. import import를 하려면 import키워드를 사용해 다른 파일에.. 공감수 0 댓글수 0 2023. 5. 1.
[React] 공식문서 공부 - 조건부 렌더링 | 조선부 렌더링 리액트에서는 특정 조건에 따라서 JSX요소를 렌더링 할 수 있습니다. 1. if 문 사용 function 컴포넌트(props) { if (props.isTrue) { return 조건이 참이면 렌더링; } else { return 조건이 거짓이면 랜더링; } } props.isTrue의 값에 따라 JSX요소를 렌더링 해줍니다. 2. 조건부 연산자 사용 function 컴포넌트(props) { return ( {props.isTrue ? ( 조건이 참이면 렌더링 ) : ( 조건이 거짓이면 렌더링. )} ); } props.isTrue의 값에 따라 삼항 연산자를 사용하여 JSX요소를 렌더링 해줍니다. 3. && 연산자 사용 function 컴포넌트(props) { return ( {prop.. 공감수 0 댓글수 0 2023. 4. 18.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.