인생 투자 노트 📒

React useEffect는 다양한 기능을 제공한다.React도 기존에는 라이프사이클에 맞게 각각 분리되었는데 통합되었고 Vue의 경우 기존의 속성을 그대로 유지하고 있다.구분React useEffectVue3특징과 차이마운트useEffect(fn, [])onMounted(fn) 언마운트useEffect(() => { return () => {} }, [])onUnmounted(fn) 업데이트(리렌더링)useEffect(fn) (배열 없음)onUpdated(fn) 특정 값 감시useEffect(fn, [val])watch(val, fn)watch는 기본적으로 변경 시에만 실행(Lazy) Vue는 이전 값(oldVal)을 기본 제공즉시 실행 + 감시watchEffect(fn)사용된 반응형 변수를 자동..

공통점DOM 접근: 포커스 제어, 스크롤 위치 조작, 외부 라이브러리(D3, Google Maps 등) 연결값의 유지: 컴포넌트가 다시 렌더링 되어도 초기화되지 않고 유지되어야 하는 변수 저장렌더링 유발 방지: ref 내부의 값이 변하더라도 UI가 다시 그려지지(Re-render) 않습니다구분React useRefVue3 ref반응성없음. 값이 변해도 React가 감지하지 못함있음. Vue의 반응성 시스템에 의해 추적됨값 접근 방식refVariable.currentrefVariable.value주요 용도DOM 참조, 렌더링 간 변수 유지DOM 참조, 반응형 상태 데이터 정의렌더링 유발유발하지 않음.value를 템플릿에서 쓰면 렌더링 유발차이점React의 useRef는 단순 자바스크립트 객체로 { curr..

Next.js를 학습하면서 Nuxt.js와 다른 점과 같은 점을 비교해 보면 좋을 거 같아 글을 작성해 봅니다. 공통점은 Pages 폴더 하위에 파일 시스템 방식으로 URL path가 정해진다는 점입니다.예를 들어 https://localhost/book 경로를 생성하고 싶다면 다음과 같은 폴더 구조를 만들어야 합니다. Next.js 경우 pages/book/index.tsx 또는 pages/book.tsxNuxt.js 경우 pages/book/index.vue 또는 pages/book.vue쿼리 파라메터(Query Parameter)https://localhost/book?q=리액트 같이 쿼라 파라메터를 넘기는 경우 사용 방법이 다릅니다.Next.jsimport { useRouter } from "ne..

JSX 문법에 주의사항은 다음과 같다.중괄호 내에 자바스크립트 표현식만 넣을 수 있다. ( 삼항 연산자, &&, ||)숫자, 문자, 배열만 렌더링되고 boolean, undefined, null은 출력되지 않고 object를 에러가 발생한다.태그 시작과 종료가 반드시 매칭되어야한다.최상위 태그는 반드시 하나만 있어야 한다. ( 빈태그 가능)class 키워드 대신 className 키워드 사용label for 키워드 대신 htmlFor 키워드 사용버튼 컴포넌트를 만들어 보자.Button.jsx 파일을 하나 생성한 후 다음과 같이 작성하면 컴포넌트를 생성할 수 있다.컴포넌트는 대문자로 시작되어야 한다는 규칙이 있다.const Button = ({ children, text, color = "black" })..

그동안 Vue로만 프로젝트를 주로 진행했어서 React를 다시 공부하는 차원에서 글을 정리하기로 했다.우선 React 프로젝트로 만들기 위해서는 node를 설치 해야한다.https://nodejs.org/ko 사이트에서 node를 다운로드 받은 후 설치 하도록 하자.그리고 npm create vite@latest 명령어로 리액트 프로젝트를 생성할수 있다.마지막에 "Install with npm and start now?" 문구가 나오고 "Yes" 선택하면 자동으로 패키지들이 설치된다"No"를 선택했다면 npm install로 패키지들을 설치하면 된다. npm run dev 명령어로 프로젝트를 시작하고 터미널의 url로 접속하면다음과 같은 기본 화면을 볼수 있다.