[ Web ]
[React.js] Kossie Coder - 21강. React router 작동 원리 알아보기
1. 클라이언트 사이드 라우팅 클라이언트 사이드 라우팅이란 서버에게 별다른 요청을 보내지 않고 클라이언트의 브라우저 단에서만 여러 페이지들을 왔다 갔다 방문할 수 있는 기능을 말한다. 클라이언트 사이드 라우팅의 구현에 있어 가장 중요한 핵심 세 가지는 다음과 같다. 현재 URL에 맞는 UI(즉, 컴포넌트)를 렌더링 할 수 있어야 한다. 페이지의 리로드 없이 다른 페이지를 방문할 수 있는 내비게이션 기능이 있어야 한다. 사용자의 액션(앞으로 가기, 뒤로 가기 등)에 의해 URL이 변경될 때 이를 감지하고 처리할 수 있어야 한다.
[React.js] Kossie Coder - 20강. react router 적용하기
1. react-router-dom 설치 // npm npm install react-router-dom // yarn yarn add react-router-dom // yarn version change yarn add history@{이전 version} react-router-dom@{바꿀 version} 2. Navbar.js : react-router-dom의 Link 설정 ... import {Link} from 'react-router-dom'; ... Home ... Movies ... Users ... 3. App.js : react-router-dom의 Route, Switch 설정 ... import { BrowserRouter as Router, Route, Switch } fro..
[React.js] Kossie Coder - 19강. 네비게이션 바 만들기
1. index.html : bootstrap cdn 설정 2. Navbar.js : bootstrap Navbar component 생성 import React from "react"; const Navbar = () => { return ( Home Movies Users ); }; export default Navbar;
[React.js] Kossie Coder - 18강. React router 설치하기
1. SPA란? Single Page Application(싱글 페이지 어플리케이션)의 약자입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성되어있습니다. 유저가 요청할 때마다 페이지가 새로고침되며, 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 합니다. HTML 파일, 혹은 템플릿 엔진 등을 사용해서 어플리케이션의 뷰가 어떻게 보여질지도 서버에서 담당했습니다. react-router는 써드파티 라이브러리로서, 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해줍니다. 2. react-router 설치 npm i react-router
[React.js] Kossie Coder - 17강. InputField 컴포넌트로 빼내기 & Fragment
1. InputField.js : MovieForm.js의 input 태그 컴포넌트화 import React from "react"; const InputField = ({ type, value, placeholder, onChange, errorMessage }) => { return ( // // 태그는 React.Fragment를 줄인 태그이다. // react의 component는 반드시 하나의 태그로 감싸져야 하는데, div 태그로 감쌀 경우 css 충돌 등의 문제가 생길 수 있으므로 아무 효과가 없는 React.Fragment 태그로 감싼다. {errorMessage} // ); }; 2. MovieForm.js : InputField.js 적용 ... import InputField from..
[React.js] Kossie Coder - 16강. 영화 폼 validation
1. MovieForm.js : form 입력 값에 대한 validation ... // 에러 메세지를 담을 state 변수 const [titleError, setTitleError] = useState(''); const [yearError, setYearError] = useState(''); const validateForm = () => { // validate 전, 에러 메세지 리셋 resetErrors(); let validated = true; if (!movieTitle) { setTitleError('영화제목을 넣어주세요.'); validated = false; } if (!movieYear) { setYearError('개봉년도를 넣어주세요.'); validated = false; }..
[React.js] Kossie Coder - 15강. 영화 삭제하기
1. Movie.js : 부모 컴포넌트로부터 removeMovie 함수 가져오기 import React from "react"; const Movie = ({movie, removeMovie}) => { return ( {movie.title} ({movie.year}) removeMovie(movie.id)}>삭제 ); }; export default Movie; 2. MovieForm.js : Movie 객체 id 요소 추가 ... const onSubmit = (event) => { event.preventDefault(); addMovie({ id: Date.now(), // 타임스탬프를 id로 설정 title: movieTitle, year: movieYear }); resetForm(); };..
[React.js] Kossie Coder - 14강. 자식 컴포넌트에서 부모 컴포넌트 스테이트 변경하기
1. Form 컴포넌트화 (MovieForm.js) import React, {useState} from "react"; // addMovie 함수를 파라미터로 받음. const MovieForm = ({addMovie}) => { const [movieTitle, setMovieTitle] = useState(''); const [movieYear, setMovieYear] = useState(''); // form reset function const resetForm = () => { setMovieTitle(''); setMovieYear(''); }; const onSubmit = (event) => { event.preventDefault(); // 파라미터로 받은 addMovie 함수를 통해..