presentLee

공식문서 https://reactrouter.com/en/main npm을 이용해 설치한다 npm i react-router-dom 그 후 사용할 App.js에서 import 한다. import {createBrowserRouter, RouterProvider} from 'react-router-dom' SPA 구조에서 URL에 따라 페이지를 전환하기 위해 사용한다. const Router = () => { return ( ); }; 이전 버전에서는 위와 같은 구조를 사용해서 구조를 설정했다. import {createBrowserRouter, RouterProvider} from 'react-router-dom' import HomePage from './pages/Homepage'; import Ev..

웹/react 2023. 3. 25. 22:20

화살표함수 function App() { 를 const App = () => { 로 function ExpenseItem(props) { const ClickHandler=()=>{ console.log('clicked'); } return ( {props.title} ${props.amount} button! ) } 태그 속에 on이벤트명 ={함수} 형식으로 사용. 하지만 위와같은 방식으로 화면에 출력되는 내용을 바꾸기는 불가능. 변수의 값을 바꾼다고 해서 컴포넌트를 새로 로드하는것은 아니기때문 그럴때 useState를 사용 import {useState} from 'react' 후에 컴포넌트 함수 속에 const [name , setName] = useState(props.something) 형식으로..

웹/react 2023. 2. 28. 02:56

둥글모서리에 옅은 그림자가 있는 상자 디자인을 Card 라고 함. 이 디자인을 위한 스타일 코드가 중복 되고 있음. Card를 위한 컴포넌트를 새로 작성하고 중복되는 스타일을 css파일로 만듦 그리고 Card 디자인을 사용하는 컴포넌트를 감싸고 있는 div 태그를 Card 태그로 교체한다. 그렇지만 새로 제작한 컴포넌트는 다른 태그를 감싸는 래퍼로써 사용할 수 없기때문에 div 태그를 return 한다. css파일을 import 하여 스타일을 적용하기 때문에 div 태그에 Card 클래스 네임을 적어주여야 하는데 하나의 클래스네임만 지정한다면 다른 컴포넌트에서 사용할 때에 추가로 클래스 네임을 적을 수 없다. import './Card.css'; function Card(props) { const Cla..

웹/react 2023. 2. 25. 17:34

return 앞에 JS를 사용한 변수의 동적인 값을 return 되는 JSX속에 삽입하려면 중괄호 속에 {값} 처럼 삽입. props 매개변수를 여러개 삽입하지 않고 컴포넌트에 function name(props)와 같이 사용하는데 (컴포넌트) ${props.amount} (App.js) 위와같이 렌더링 하는 부분에서 컴포넌트를 부를 때 속성으로 넣어주고 컴포넌트에서 props를 사용해 동적으로 값을 할당한다.

웹/react 2023. 2. 18. 17:18

리액트는 하나의 루트 노드를 가지는 컴포넌트 트리를 구축한다. import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); SPA인 React이므로 html 파일은 index.html 하나만 사용. 그 속 body에 부분을 JS로 선택해 createRoot를 사용.React의 루트이자 렌더링될 주된 위치라는걸 알려줌. 그렇게 생성한 root 객체에서 render 호출. 그 div 위치에 렌더링을 하는것(App을) div의 내부가 이 되는 것 js에서 createel..

웹/react 2023. 2. 12. 01:20