SPA25 내가 느끼는 Vue2에서 Vue3로 마이그레이션 하면서 눈에 띄게 변화된 것 1. Options > Composition API - Composable 함수 형태로 효율적인 로직 재사용이 가능해졌다.- 그렇기 때문에 Vue2에서 사용하던 Mixin은 Vue3에서 권장하지 않는다.- - Component가 생성되기 전에 setup이 먼저 생성 되어서 this를 통해 데이터에 접근할 수 없다. 그 외에 hook 네이밍 변경된 것과 반응형 데이터 정의하는 법 등이 달라졌는데.. Composition API 사용하면서 가장 달라졌다고 생각하는 것만 적어봤다. 디테일 하게 변화된 내용이 궁금하다면 아래 링크 참고. https://ko.vuejs.org/guide/extras/composition-api-faq Vue.jsVue.js - The Progressive JavaScript Fr.. 2024. 9. 30. React Router ! react-router-dom@5.3.0 React Router - Router, Switch, Route import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'; import Home from '../src/routes/Home'; import Detail from '../src/routes/Detail'; function App() { return } react-router-dom의 BrowserRouter, Switch, Route 태그를 통해 URL과 컴포넌트를 연결 한다. Route 태그의 path 속성에 URL을 적고 component에 import에서 불러온 컴포넌트를 집어 넣는다. React Router 적용은 보.. 2022. 11. 21. React Effect Hook useEffect ? useEffect 함수는 Component가 mount 됐을 때, unmount 됐을 때, update 됐을 때 특정 작업을 실행할 수 있도록 해주는 Hook이다. 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것. 사용 방법 * 기본 형태 : useEffect(function, deps) - function : 수행하고자 하는 작업 - deps : 배열 형태이며, 배열 안에는 검사하고자 하는 특정 값 혹은 빈 배열이 들어간다. 1. 함수 불러오기 import {useEffect} from 'react'; 2. Component가 Mount 됐을 때 실행 useEffect(()=>{ console.log('마운트 될때만 실행~');.. 2022. 11. 7. React Props 그리고 vue에는 없는 신기한 함수 프로퍼티 (Properties)란? 상위 컴포넌트에서 하위 컴포넌트에게 값을 전달할 때 사용. 프로퍼티는 단방향이라는 특징이 있음. 읽기 전용 데이터 이기 때문에 수정이 불가함. ** 사용 방법 ! 버튼 함수 컴포넌트를 만들어서 재활용해보자. function Btn(props){ return( {props.btnName} ) } function App(){ return ( ) } Btn 함수 컴포넌트에 btnName이라는 인자를 전달하여 버튼 이름을 변경하는 코드이다. 이때, Btn 함수 컴포넌트에 전달하는 인자가 몇 개이던, 받을 땐 매개 변수 하나로 받는다. 예시. function Btn(props){ return( {props.btnName} : {props.newMessage} ) } functi.. 2022. 11. 1. React State vanilla.js Total Clicks : 0 Click Me 버튼을 클릭할때마다 counter가 증가하는데, 이 count를 react.js state를 이용해 리렌더링 되게 만들어보자. state 사용 전. const root = document.getElementById("root"); let counter = 0; function countUp(){ counter = counter + 1; ReactDOM.render(, root); } const container = () => ( Total Clicks : {counter} Click Me ); ReactDOM.render(, root); *순서. reactDom에 container componet를 렌더링. html에 해당 componen.. 2022. 10. 26. JSX 문법 JSX란? 자바스크립트의 확장 문법 자바스크립트의 공식적 문법이라고는 할 수 없음 브라우저 실행 전 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 됨 예시) 변환 전 function App(){ return ( react practice ) } 변환 후 function App(){ return React.createElement("div", null, "react", React.createElement("span", null, "practice")) } JSX 문법 규칙 및 사용 방법 1. 컴포넌트에 여러 요소가 있을 경우 반드시 부모 요소가 감싸는 형태여야 한다. function App(){ return ( 자식 자식 ) } : 리액트가 사용하는 Virtual DOM.. 2022. 10. 19. 이전 1 2 3 4 5 다음
