SPA25 공식 문서 파먹기 이전 회사에서 Vue2를 사용해서 프로젝트를 개발했다고 하면 Vue3와 비교했을 때 달라진 점에 대해서 많이 물어본다. 항상 사용 방법이 더 편리해졌다. 디버깅하기 쉽다. 라고 두루뭉술하게 답했었는데 구체적으로 내가 느꼈던 달라진 점에 대해서 정리해보고 싶다는 생각이 들어서 포스팅을 하게되었다. 1. 증가된 재활용성: 충돌성은 낮아지고 추적 가능성이 높아졌다. * vue2export default { mixins: [changeMenuMixin], data() { return { menu : 'image' } }, methods: { changeMenu() { this.menu = "all list"; } }, created() { this.changeMenu.. 2025. 10. 26. 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 다음