Route 컴포넌트의 props - path : 라우팅할 컴포넌트의 URL - component : path props에 지정한 URL 클릭 시 렌더링 할 컴포넌트 이 외에도 Route 컴포넌트는 기본적으로 history, location, match 등의 props를 가진다. (다른 컴포넌트에서 Link를 이용해서 해당 경로로 넘어왔을 경우 그 때 props를 전달하려면 이렇게 state를 통해서 props를 전달하면 되고 이 때 전달한 props는 전달받은 컴포넌트에서 location.state안에 있다. 라우팅 되는 컴포넌트에 props 전달하기 Route 컴포넌트에 의해 렌더링되는 컴포넌트에 props를 전달해야한다면 render props를 사용하여 라우팅되는 컴포넌트에 props를 전달한다. ..

☕ 이번 시간에는 배열에 항목 수정하기를 해보겠다. 이번에 해볼 것은 이름을 클릭하면 초록색으로 바뀌고, 다시 클릭하면 검정색으로 바뀌는 것을 해볼 것이다. ☕ 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는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후로 업데이트 된 상태를 조회 할 ..

🍧 이번 시간에는 리액트에서 배열을 렌더링하는 방법을 알아보겠다. const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; 예를 들어 이런 배열이 있다고 가정한다. 배열 안에 3개의 객체가 있고, 이것을 각각 렌더링해주어야 하는데 어떻게 할까? UserList.js를 만들고 작업한다. 🍧 비효율적인 방법 function UserList(){ const users = [ { id: 1, username: 'v..