본문 바로가기

React

(32)
React Router로 SPA 개발하기 ## 1. react-router-dom이란? - **(1) 여러 페이지를 구현할 수 있게 해주는 패키지** `styled-components`, `redux` 에 이어서 또 하나의 패키지. // 바로 `react-router-dom` 웹사이트를 사용할 때 여러 페이지로 오가며 이동할 수 있는데, `react-router-dom`을 배우면 여러 페이지를 가진 웹을 만들 수 있게 됨! 2. react-router-dom 설치하기 (1) 패키지 설치 vscode 터미널에서 아래 코드를 입력해서 패키지를 설치할 수 있음. yarn add react-router-dom **(2) 페이지 컴포넌트 생성** 1. 가상의 여러 페이지를 만들기. - `Home`, `About`, `Contact`, `Works` 총 ..
TodoList Refactoring 기본(Redux) 구현 깃허브 링크 : https://github.com/hh99-react/prac_my_todo_list_level_2.git 🚩 **Redux를 이용해서 Simple Todo List를 만들어봅시다.** 다만 `useState`가 아닌 `redux`를 이용해서 구현해봅시다. 📌 **Requirement : 실습에 요구되는 사항이에요.** - **컴포넌트는 자유롭게 나누되, 그렇게 나눈 사유에 대하여 README에 작성하세요.** - 모듈관련 요소들은 `todos.js` 파일을 생성하고, 해당 파일안에 모두 작성하세요. - 디자인은 자유이며, CSS를 `styled-components` 를 이용해서 구현하세요. - `input`에 아무것도 입력하지 않았을 때는 추가하기 버튼을 눌러도 Todo가 추가되지 않게..
Redux - Payload 기능 구현 // 대략적인 html을 마크업 해줍니다. input과 button 2개를 아래와 같이 작성합니다. // src/App.js import React from "react"; const App = () => { return ( 더하기 빼기 ); }; export default App; // src/App.js import React from "react"; import { useState } from "react"; const App = () => { const [number, setNumber] = useState(0); const onChangeHandler = (event) => { const { value } = event.target; // event.target.value는 문자열 입니다. //..
Redux _카운터 프로그램 기본형식 구현 1. View 에서 액션이 일어난다. 2. dispatch 에서 action이 일어나게 된다. 3. action에 의한 reducer 함수가 실행되기 전에 middleware가 작동한다. 4. middleware 에서 명령내린 일을 수행하고 난뒤, reducer 함수를 실행한다. (3, 4번은 아직 몰라도 됩니다!) 5. reducer 의 실행결과 store에 새로운 값을 저장한다. 6. store의 state에 subscribe 하고 있던 UI에 변경된 값을 준다. // src/modules/counter.js // 초기 상태값 const initialState = { number: 0, }; // 리듀서 const counter = (state = initialState, action) => { co..
리덕스(Redux) 설정 (1) 리덕스 설치 리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설치해야 합니다. vscode 터미널에서 아래 명령어를 입력해서 2개의 패키지를 설치하세요. 참고로 react-redux 라는 패키지는 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지 입니다. yarn add redux react-redux 아래와 같은 의미 yarn add redux yarn add react-redux (2) 폴더 구조 생성하기 1. src/redux폴더 2. src/redux폴더/config폴더 3. src/redux폴더/config폴더/configStore.js 4. src/redux폴더/modules폴더 // src/configStore.js 코드 // 중앙 데이터 관리소(store)를 설정하..
Styled-Components 조건부 스타일링 // src/App.js import React from "react"; // styled-components에서 styled 라는 키워드를 import 합니다. import styled from "styled-components"; // styled키워드를 사용해서 styled-components 방식대로 컴포넌트를 만듭니다. const StBox = styled.div` // 그리고 이 안에 스타일 코드를 작성합니다. 스타일 코드는 우리가 알고 있는 css와 동일합니다. width: 100px; height: 100px; border: 1px solid red; margin: 20px; `; const App = () => { // 그리고 우리가 만든 styled-components를 JSX에서 ht..
삭제/추가/컴포넌트 분리 import React from 'react'; import './App.css'; // 🔥 반드시 App.css 파일을 import 해줘야 합니다. // User 컴포넌트를 분리해서 구현 function User(props) { return ( {props.user.age}살 - {props.user.name} ); } const App = () => { const users = [ { id: 1, age: 30, name: '송중기' }, { id: 2, age: 24, name: '송강' }, { id: 3, age: 21, name: '김유정' }, { id: 4, age: 29, name: '구교환' }, ]; return ( {users.map((user) => { return ; })} );..
Counter 만들기 : useState & 이벤트핸들러 [실습] Counter 만들기 전체 코드 https://github.com/hh99-react/prac_local_counter.git GitHub - hh99-react/prac_local_counter Contribute to hh99-react/prac_local_counter development by creating an account on GitHub. github.com
아이디&비밀번호 입력 alert&초기화
로그인&회원가입&로그아웃 기능 구현(lv.4) ⚙ features : 구현해야 할 기능 로그인, 회원가입 페이지를 각각 구현합니다. 아이디와 비밀번호가 모두 입력되지 않으면, API 요청을 보내지 않도록 합니다. 서버의 에러를 alert 또는 직접 만든 모달 등을 통해 유저에게 표시합니다. id가 중복된 경우 존재하지 않는 아이디를 입력한 경우 비밀번호가 잘못된 경우 로그인을 하지 않은 경우에는 로그인/회원가입 페이지만 접근 가능합니다. 로그인을 이미 한 경우 로그인/회원가입 페이지는 접근 할 수 없습니다. 로그아웃 기능을 구현합니다. [구현하지 못한 부분] JWT의 유효시간이 만료된 경우, 유저에게 재로그인을 할 것을 표시합니다. 로그아웃 기능구현(새로고침X, 쿠키 토큰 활용) 새벽 5시 마다, 모든 데이터 초기화 참고사항 mock 서버에서 발급된..