Switch 라는 태그는 자식인 들 중에서 현재 URL과 일치하는 첫번째 것을 렌더해준다. import React from "react"; import { BrowserRouter, Route, Switch } from "react-router-dom"; import "./app.css"; import Home from "./components/home"; import Profile from "./components/profile"; function App() { return ( ); } export default App; 이렇게 작성하면 경로에 맞는 컴포넌트를 렌더해주는 것이다. Link Switch 안에서가 아니더라도 Link를 이용하면 원하는 컴포넌트로 이동할 수 있다. (마치 html의 a 태그의..

react-router에서 해당하는 경로에 맞는 컴포넌트를 렌더하는 방법은 3가지가 있다. 1. 의 자식으로 렌더하는 방법 import React from "react"; import { BrowserRouter, Link, Route} from "react-router-dom"; import "./app.css"; import Home from "./components/home"; import Profile from "./components/profile"; function App() { return ( ); } export default App; 하지만 위와 같이 쓰면 route 관련 props인 location, history, match를 받아올 수 없다. 2. 를 이용하여 렌더하는 방법 impo..

☕ 이번 시간에는 배열에 항목 수정하기를 해보겠다. 이번에 해볼 것은 이름을 클릭하면 초록색으로 바뀌고, 다시 클릭하면 검정색으로 바뀌는 것을 해볼 것이다. ☕ active 변수 만들기 const [users, setUsers] = useState([ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com', active: true }, { id: 2, username: 'tester', email: 'tester@example.com', active: false }, { id: 3, username: 'liz', email: 'liz@example.com', active: false } ]); 그것을 하기전에 우선적으로 해야할 작업은 user..

🍊 이번 시간에는 배열에 항목 제거하기에 대해서 알아보겠다. function UserList({users, onRemove}){ return ( users.map((user) => { return }) ) } UserList 컴포넌트를 열어주고, 여기서 onRemove를 props에서 받아와서 User 컴포넌트에 전달해준다. function User({id, username, email, onRemove}){ return ( {username}({email}) onRemove(id)}>삭제 ) } User 컴포넌트에서는 삭제 버튼을 하나 만들고 버튼을 클릭했을 때 삭제가 될 수 있도록 onClick 이벤트에 함수를 추가한다. 이 때 클릭하였을 때 특정 id를 가진 값을 배열에서 삭제해주고 싶기 때문에 위..

🎹 이번 시간에는 배열에 항목을 추가하는 것에 대해 알아보겠다. function CreateUser({username, email, onChange, onCreate}){ return ( 등록 ) } ✅CreateUser.js CreateUser 컴포넌트를 만든다. CreateUser 컴포넌트는 총 4개의 인자를 받아오는데 여기서 onChange 함수는 인풋 값이 바뀌게 될때 호출할 이벤트 함수고 onCreate는 버튼을 눌렀을 때 새로운 항목을 등록해주는 함수이다. import React,{ useRef, useState } from "react"; import "./App.css"; import CreateUser from './CreateUser'; import UserList from './Use..

🍥 이번 시간에는 useRef를 사용해서 컴포넌트 안의 변수를 만드는 방법에 대해서 알아보겠다. 여기서 말하는 변수는 다음과 같다. 예를 들어 컴포넌트 내부에서 let 키워드를 사용하여 어떤 변수를 선언한다고 가정해보자. 그렇게 하면 다음에 리렌더링 될 때에는 그 변수 값은 초기화 된다. 만약 계속 유지하고 싶으면 즉 어떤 값을 관리하려면 이전에 배웠던 useState를 사용해야 되는데, useState는 상태를 바꾸게 되면 컴포넌트가 리렌더링 된다. 하지만 우리는 가끔씩 어떤 값을 바꿨을 때 리렌더링 할 필요없는 그런 값을 관리하게 될 때도 있다. 그런 경우에는 useRef를 사용하면 된다. 또한 useState는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 ..