React.js
[React.js] Kossie Coder - 29, 30강. user 페이지 라우트 추가, user 페이지
1. User.js : User 컴포넌트 생성 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, setLoading] = useState(true); const {id} = useParams(); useEffect(() => { axios.get('https://jsonplaceholder.typicode.com/users/' ..
[React.js] Kossie Coder - 28강. routes 파일 만들기
1. routes.js : routes 컴포넌트 생성 import Users from "./pages/Users"; import Home from "./pages/Home"; import Movies from "./pages/Movies"; export default [ { path: '/', component: Home }, { path: '/movies', component: Movies }, { path: '/users', component: Users } ]; 2. App.js : routes 컴포넌트 적용 ... import routes from "./routes"; ... {routes.map(route => { return ( ); })} ...
[React.js] Kossie Coder - 27강. Home/Movies 페이지 컴포넌트 만들기
1. Home.js : Home 페이지 컴포넌트 생성 import React from "react"; const Home = () => { return ( Home ); }; export default Home; 2. Movies.js : Movies 페이지 컴포넌트 생성 import React, {useState} from "react"; import MovieForm from "../components/MovieForm"; import Movie from "../components/Movie"; const Movies = () => { const [movies, setMovies] = useState([]); const removeMovie = (id) => { setMovies(movies.filt..
[React.js] Kossie Coder - 26강. 로딩 Spinner 추가하기
1. Spinner.js : Spinner 컴포넌트 생성 import React from "react"; const Spinner = () => { return ( Loading... ); }; export default Spinner; 2. Users.js : Spinner 컴포넌트 적용 ... import Spinner from "../components/Spinner"; const Users = () => { ... // 로딩 상태 state 생성 const [loading, setLoading] = useState(true); ... useEffect(() => { axios.get('http://jsonplaceholder.typicode.com/users') .then(response => {..
[React.js] Kossie Coder - 25강. 유저 데이터 화면에 출력하기 2
1. App.js : Switch 태그를 container div 태그로 감싸기 ... ... ... 2. UserList.js : 유저리스트를 카드 형식으로 만들기 ... {users.map(user => { return ( {user.name} ); })} ...
[React.js] Kossie Coder - 24강. 유저 데이터 화면에 출력하기
1. UserList.js : 유저 리스트 컴포넌트 생성 import React from "react"; // users를 파라미터로 받아 옴 const UserList = ({users}) => { return ( {users.map(user => { return ( {user.name} ); })} ); }; export default UserList; 2. Users.js : UserList 컴포넌트 추가하고 유저 데이터 넘겨주기 import React, {useEffect, useState} from "react"; import UserList from "../components/UserList"; const Users = () => { const [users, setUsers] = useStat..
[React.js] Kossie Coder - 23강. 유저 데이터 받아오기
1. axios 설치 // npm npm install axios // yarn npm add axios 2. Users.js : jsonplaceholder에서 axios를 사용해 유저 데이터 받아오기 import React, {useEffect} from "react"; import axios from "axios"; const Users = () => { useEffect(() => { axios.get('') .then(response => { console.log(response); }); }, []); return (
[React.js] Kossie Coder - 22강. NavLink 사용하기
1. Navbar.js : NavLink 사용 ... import {Link, NavLink} from 'react-router-dom'; ... {/* activeClassName="active" : 해당 네비게이션의 페이지가 활성화 되어있을 때, NavLink 태그 내의 요소를 강조하도록 하는 효과 */} Movies Users ...