SPA24 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. vanilla.js vs react.js 1. vanilla vs react : 버튼을 클릭하면 숫자가 증가되는 간단한 이벤트 구현 (1) vanilla Total Clicks : 0 Click Me *이벤트 등록하기 위한 과정 : 4단계 - 태그 작성 - 태그 아이디 부여 - script로 아이디 불러와 변수에 저장 - 변수에 이벤트 리스너 추가 (2) react *이벤트 등록하기 위한 과정 - react.js로 엘리먼트 생성 후 태그 명, 이벤트 (각종 props 정의 가능), innerText입력 - react dom으로 html 업데이트 => vanilla.js와 비교했을 때 코드가 굉장히 간결해지고 가독성이 높아짐. (3) 차이점 vanilla는 HTML를 먼저 만들고 그걸 Javascript로 가져와서 HTML을 업데이트. react.. 2022. 10. 19. 이전 1 2 3 4 다음
