전체 글 (68) 썸네일형 리스트형 React의 동작 과정, React.memo개념정리 및 useCallback, useMemo와 함깨 사용 리엑트가 동작하는 과정 리엑트는 상태(state)가 변경되면 변경된 사항을 react-Dom에게 전달하고 react-Dom 즉 가상의 DOM과 브라우저의 실제 DOM을 비교하여 변경 된 부분을 브라우저의 실제 DOM에 반영한다 변경사항이 생기면 컴포넌트는 재평가를 위해 컴포넌트가 리렌더링 되는데 만약 변경사항이 많다면 문제가 없지만 소규모의 변경사항이 곳곳에서 생기고 그때마다 DOM전체를 리렌더링 해야한다면 메모리 자원소모가 굉장히 클것이다 즉 변경사항을 반영하기위해 브라우저의 실제DOM을 리렌더링하는것과 변경사항을 반영하기위해 작은 함수하나를 리렌더링하는것은 성능측면에서 큰차이를 보인다 react-dom은 DOM전체를 리렌더링 하는대신 변경사항이 있는 컴포넌트만 리렌더링하여 성능적인 부분에 문제를 해결.. useEffect 예시 추가 및 UseContext useEffect 사용자가 input창에 값을 입력할때 업데이트 되는 state따라 함수호출에 딜레이를 주고 후속처리하는 예시 ex) import { useState, useEffect } from 'react'; import styled from 'styled-components'; const Test = () => { const [test, setTest] = useState('하위'); const inputHandler = (e) => { setTest(e.target.value); }; useEffect(() => { const check = setTimeout(() => { console.log(test); }, 1000); //setTimeout을 이용한 state업데이트시 함추호출 딜레이 추.. 국비지원 53일차 vue Router 기본 사용법, $route와 $router의 차이 vue-router 1 router를 사용하기 위해선 package를 설치해야한다 개발서버를 끄고 npm i vue-router라고 명시하자 package.json파일에 vue-router 라우터가 제대로 설치되었는지 확인한다 2 src 폴더에 router를 관리할 폴더를 만든다 필자는 routes라고 작명했다 3 routes폴더에서 route를 관리할 파일을 만들어 준다 필자는 index.js라 작명했다 4 route를관리하는 파일인 index.js에서 router를 사용하기 위한 설정을 해준다 ex) import { createRouter, createWebHistory } from "vue-router"; //router를 사용할 수 있게 만들어주는 method를 vue-router페키지에서 //구.. 국비지원 52일차 vite로 vue프로젝트 진행하는법,vuex 정리 vite로 vue 프로젝트를 진행하는 절차 1 터미널에서 npm create vite@latest 이라고 명시한다 2 설치가 완료되면 터미널에서 해당 프로젝트로 이동한 후 npm i 라고 명시하여 package들을 설치한다 3 터미널에서 eslint, eslint-plugin-vue, scss를 사용하는경우 sass를 개발의존성 패키지(-D)로 설치한다 4 src폴더에 .eslintrc.json파일을 만들어 lint설정을 한다 5 터미널에서 npm run dev라고 명시하여 잘 돌아가는지 확인한다 vuex 기본사용법 1 개발서버가 꺼진 상태에서 npm i vuex라고 명시하여 vuex를 설치한다 2 src폴더에 vuex를 사용 할 store 파일을 만든다 필자는 주로 store라는 폴더를 만들고 그안에 .. 국비지원 51일차 벨로퍼트:react를 다루는 기술(react에서 사용하는 scss, styled-component ,class 작성방식) react에서 스타일링 하는 방법들 1 react에서 css로 스타일링 할때 className을 작명 할 때 다른 컴포넌트와 className이 겹치지 않게 하기위해서 클레스명 앞에 컴포넌트 이름을 붙여 주는 방법이 있다 ex) //App.jsx import './App.css' test //App.css .App-black-nav{ display: flex; width: 100%; background-color: #000; color: #fff; padding-left: 20px; } 2 컴포넌트안에 루트 태그에 className을 컴포넌트 이름으로 작명하는 방식이 있다 ex) //App.jsx test ); //App.css .App .black-nav{ display: flex; width: 100.. 국비지원 50일차 벨로퍼트:react를 다루는 기술: 함수형 컴포넌트 hooks(useState,useEffect,useRef,useMemo,useCallback,useReduce 리엑트 hooks useState 컴포넌트 내부에서 사용되는 데이터를 설정하고 설정한 데이터 값을 바꾸는 기능을 한다 ex) import React, { useState } from 'react'; const Test2 = () => { const [count,setCount] = useState(0) const up = () =>{ setCount(count+1) } const down = () =>{ setCount(count-1) } return ( {count} +1 -1 ); }; export default Test2; 위코드를 해석해보면 count와 setCount를 구조분해할당 하여 useState를 할당하였고 count는 useState의 역할을 setCount는 setState의 역할을 .. 국비지원 49일차 벨로퍼트:react를 다루는 기술: 리엑트 LifeCycle react 라이프 사이클 라이프 사이클 이란? 컴포넌트에 수명주기를 의미한다 즉 컴포넌트가 생성되기 전 준비 과정부터 페이지에서 사라지는 과정을의미한다 라이프 사이클 메서드는 함수형 컴포넌트에서는 사용 할 수 없다 다만 함수형 컴포넌트에 hooks중 라이프 사이클 메서드를 대체 할 메서드가 있다 1 Will 접두사가 붙은 메서드는 특정 작업이 작동하기 전에 일어나는 메서드이다 2 Did 접두사가 붙은 메서드는 특정 작업이 작동한 후에 일어나는 메서드이다 3 리엑트엔 총 9개의 라이프 사이클 메서드가 존재한다 4 라이프사이클은 마운트(mount),업데이트(update), 언마운트(unmount)총 3개의 그룹으로 나누어져 있다 마운트->업데이트-> 언마운트의 순서로 컴포넌트가 생성되고 사라진다 4-1 마운.. 국비지원 48일차 벨로퍼트:react를 다루는 기술 (이벤트 핸들링, map함수를 이용한 반복문, filter함수를이용한 요소 삭제) 이벤트 핸들링 이벤트란? 웹을 사용하는 사용자와 요소(DOM)가 상호작용 하는것을 의미한다 react에서 이벤트 사용시 주의사항 1 이벤트 이름을 카멜 케이스로 작성해야한다 즉 html에선 onclick이지만 react에서는 카멜 케이스로 작명하는것이 원칙이므로 onClick이된다 2 컴포넌트 에는 이벤트를 설정 할 수 없다 즉 컴포넌트를 다를 컴포넌에서 불러와 사용할 때 태그처럼 사용되는데 컴포넌트 태그에는 이벤트를 적용 할 수 없다는 말이다 3 이벤트의 실행 내용은 함수 형태로 작성해야한다 ex) const Say = () => { const [test, setTest] = useState('test'); const test2 = () => { if (test === 'test') { setTest(.. 이전 1 2 3 4 ··· 9 다음
