본문 바로가기

Web Study124

프리온보딩 1주차 첫번째 강의 아직 리액트 할 줄 모르지만... 일단은 귀동냥을 해보기로 했다. 모르는 개념은 열심히 서칭했다. vite 로 리액트 프로젝트 init 하기 npx create-react-app 대신 새롭게 나온 번들링 툴 (새로운 기술) - 번들링이 매우 빨라짐 -> 빌드 시간이 빨라짐, 개발에 편함 - webpack, rollup, parcel 등을 ESBuild 라는 것으로 대체 - 리액트에서 타입스크립트는 필수! VirtualDOM 역할 최적화된 업데이트로 사용자 경험 개선 - 브라우저에 반영하기 전에 사전작업을 하는 것 업데이트에 우선순위를 부여 - Animation 과 Text Fiber 리액트의 핵심 알고리즘을 재구성한 새 재조정(Reconciliation) 엔진 리액트 Fiber 의 목표는 애니메이션, 레.. 2023. 4. 3.
벨로퍼트 모던 리액트 정리 1 https://react.vlpt.us/basic/09-multiple-inputs.html 9. 여러개의 input 상태 관리하기 · GitBook 9. 여러개의 input 상태 관리하기 지난 튜토리얼에서 우리는 input 상태를 관리하는 방법에 대하여 알아보았는데요, 이번에는 input 이 여러개일때는 어떻게 관리해야 하는지 알아보겠습니다. 우선 react.vlpt.us // 인풋 필드 여러개 다루기 import React, { useState } from 'react' export default function PracticeInput() { const [input, setInput] = useState({ name : '', nickname : '', }); const {name, nickname.. 2023. 4. 3.
React Hooks - useState, useEffect Hook? 함수 컴포넌트에서 리액트 state 와 생명주기 기능을 연동할 수 있게 해주는 함수를 의미 (class 없이 리액트를 사용할 수 있게 해주는 것) Hook 은 React 버전 16.8부터 리액트 요소로 새로 추가 되었다. Hook 을 사용하여 기존 class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 리액트의 기능을 사용할 수 있다. Hook 은 props, state, context, refs, lifecycle 과 같은 리액트 개념에 좀더 직관적인 api 를 제공해준다. 생명주기 메서드를 기반으로 쪼개는 것보다 훅을 통하여 서로 비슷한 것을 하는 작은 함수를 묶음으로 컴포넌트를 나누는 방식이 직관적으로 이해하기 용이하다. https://ko.reactjs.org/docs/hooks-o.. 2023. 4. 1.
한입 크기로 잘라먹는 리액트 - 5 React 에서 API 호출하기 useEffect 를 사용하여 컴포넌트의 Mount 시점에 API 를 호출하고 해당 API 의 결과값을 일기 데이터의 초기값으로 이용 = fetch() 를 사용하여 API 를 호출 -> API 의 응답 데이터를 App.js 의 data 상태에 저장하여 초기화해주기 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonpla.. 2023. 3. 31.

티스토리툴바