React/Lecture

[Kossie Coder] (완강) user 페이지

// pages/User.js import React, { useEffect, useState } from 'react'; import axios from 'axios'; import Spinner from '../components/Spinner'; import { useParams } from 'react-router-dom'; const User = () => { const [user, setUser] = useState(null); const [loading, setLoaing] = useState(true); const { id } = useParams(); useEffect(() => { axios .get('https://jsonplaceholder.typicode.com/users/' + ..

[Kossie Coder] user 페이지 라우트 추가 - useParams()

// routes.js import Users from './pages/Users'; import User from './pages/User'; import Home from './pages/Home'; import Movies from './pages/Movies'; export default [ { path: '/', component: Home, }, { path: '/movies', component: Movies, }, { path: '/users', component: Users, }, 🌟{ path: '/users/:id', // 여기서 사용하는 것이 id이기 때문에 User.js 파일에서 useParams()로 받는 것이 id인 것 component: User, },🌟 ]; // pages..

[Kossie Coder] routes 파일 만들기

// App.js import React from 'react'; import './index.css'; import Navbar from './components/Navbar'; 🌟import routes from './routes';🌟 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; function App() { return ( 🌟{routes.map((route) => { return ( ); })}🌟 ); } export default App; // routes.js import Users from './pages/Users'; import Home from './pages/Home'; import Movies ..

[Kossie Coder] 로딩 Spinner 추가하기

// User.js import React, { useEffect, useState } from 'react'; import axios from 'axios'; import UserList from '../components/UserList'; 🌟import Spinner from '../components/Spinner';🌟 const Users = () => { const [users, setUsers] = useState([]); 🌟const [loading, setLoaing] = useState(true); // 기본 로딩 상태를 true로 설정🌟 useEffect(() => { axios.get('').then((response) => { setUsers(response.data); 🌟setL..

[Kossie Coder] axios

npm install axios // UserList.js import React from 'react'; const UserList = (🌟{ users }🌟) => { console.log('users :>> ', users); return ( 🌟{users.map((user) => { return ( {user.name} ); })}🌟 ); }; export default UserList; // User.js import React, { useEffect, useState } from 'react'; import axios from 'axios'; import UserList from '../components/UserList'; 🌟const Users = () => { const [users, s..

[Kossie Coder] NavLink 사용하기

// NavBar.js import React from 'react'; import { Link, 🌟NavLink🌟 } from 'react-router-dom'; const Navbar = () => { return ( Home Movies 🌟🌟 Users 🌟🌟 ); }; export default Navbar; Movies 와 Users 를 눌렀을 때 색이 변하는 것을 볼 수 있다. Home 은 수정하지 않았기 때문에 변경 없이 계속 검정색인 것이다.

[Kossie Coder] react router Switch, exact 속성

Switch를 사용하지 않을 때 경로를 찾더라도 작성한 모든 경로를 확인해서 / 기준으로 경로가 포함되어 있는 모든 경로에 적용한다. 때문에 포함된 경로에 있는 내용이 함께 보인다. // App.js import React, { useState } from 'react'; import './index.css'; import Movie from './components/Movie'; import MovieForm from './components/MovieForm'; import Navbar from './components/Navbar'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; function App() { c..

[Kossie Coder] react router 설치

npm install react-router-dom@6 위 버전으로 다운 받을 시 react-router 바뀐 문법으로 사용해야 함 Routes 사용 ⇒ Routes 안에는 만 있어야 한다. 내용을 보여줘야 한다면 안에 element={} 에서 🌟props🌟로 컴포넌트 보내기 // App.js import React, { useState } from 'react'; import './index.css'; import Movie from './components/Movie'; import MovieForm from './components/MovieForm'; import Navbar from './components/Navbar'; import { BrowserRouter as Router, Switch..

[Kossie Coder] InputField 컴포넌트로 빼내기

// MovieForm.js import React, { useState } from 'react'; import InputField from './InputField'; const MovieForm = ({ addMovie }) => { const [movieTitle, setMovieTitle] = useState(''); const [movieYear, setMovieYear] = useState(''); const [titleError, setTitleError] = useState(''); const [yearError, setYearError] = useState(''); const resetForm = () => { setMovieTitle(''); setMovieYear(''); }; co..

[Kossie Coder] 폼 입력 안 했을 시 에러문구 표시

// MovieForm.js import React, { useState } from 'react'; const MovieForm = ({ addMovie }) => { const [movieTitle, setMovieTitle] = useState(''); const [movieYear, setMovieYear] = useState(''); 🌟const [titleError, setTitleError] = useState(''); // 기본 빈 문자열 const [yearError, setYearError] = useState('');🌟 const resetForm = () => { setMovieTitle(''); setMovieYear(''); }; 🌟const validateForm = () =>..