❤벨로퍼트 리액트 - 6장. 리덕스 5) 카운터 구현하기 (1) 프리젠테이셔널 컴포넌트 만들기 프리젠테이셔널 컴포넌트 : 리덕스 스토어에 직접적으로 접근하지 않고 필요한 값 또는 함수를 props로만 받아와서 사용하는 컴포넌트. src/components/Counter.js import React from 'react'; function Counter({ number, diff, onIncrease, onDecrease, onSetDiff }) { const onChange = e => { // e.target.value 의 타입은 문자열. -> 숫자로 변환 onSetDiff(parseInt(e.target.value, 10)); }; return ( {number} +1 -1 ); } export de..
study
벨로퍼트 리액트 - 6. 리덕스 1) 기본 용어 설명 * 액션(Action) 상태에 어떤 변화가 필요할때 발생되는 객체. { type: "TOGGLE_VALUE" } type 필드를 필수적으로 가지고 있으며 그 외의 값은 자유롭게 추가할 수 있다. // 예시 { type : 'ADD_USER', data : { id: 0, name: 'harry', age : 11 } } { type: 'CHANGE_INPUT', text: '변경되는 내용' } * 액션 생성함수(Action Creator) 액션을 만드는 함수. 파라미터를 받아와서 액션 객체 형태로 만들어준다. export 키워드를 붙여 액션 생성함수를 만들어서 사용하면 다른 파일에서 불러와 사용하기 쉽다. 리덕스 사용시 필수적이진 않다. // 예시 e..
벨로퍼트 리액트 - 5. 리액트 라우터 ** 예제는 라우터 V5지만 내가 설치한건 V6이라 코드가 약간 다르다 5-3. 서브라우트 서브라우트 : 라우트 내부의 라우트를 만드는 것. 컴포넌트를 만들어서 그 안에 Route 컴포넌트를 렌더링 하면 된다. 예제) Profiles.js import React from "react"; import { Link, Routes, Route } from 'react-router-dom'; import Profile from './Profile'; const Profiles = () => { return ( 유저 목록 : harry tester11 {/* element에 직접 태그 입력 = JSX 렌더링 가능. 상위 영역에서 props등 기타값 전달 가능 */} ); }..
벨로퍼트 리액트 - 5. 리액트 라우터 react-router 를 통한 리액트 싱글페이지 애플리케이션 만들기 SPA : Single Page Application(싱글 페이지 어플리케이션). 페이지가 1개인 어플리케이션을 말한다. 라우터 : 다른 주소에 따라 다른 뷰를 보여주는 것. ㄴ 리액트 자체에는 내장되어 있지 않아 직접 브라우저의 API를 사용하고 상태를 설정하여 다른 뷰를 보여주어야 한다. react-router : 써드파티 라이브러리. 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해줌. 서버 사이드 렌더링도 도와주는 도구들이 함께 딸려옴. react-native에서도 사용 가능! SPA의 단점 앱의 규모가 커지면 JS 파일 사이즈가 너무 커져버린다는 것. 유저가 실제로 방문하지 않을 수도 ..
벨로퍼트 리액트 - 4. API 연동하기 4-3. react-async 로 요청 상태 관리하기 react-async : 라이브러리. 프로젝트를 생성할때마다 직접 요청 상태 관리를 위한 커스텀 Hook을 만들기 귀찮다면 사용할 수 있다. 단, 직접 커스텀 Hook을 생성할때는 결과물을 배열로 반환하지만 react-async의 Hook은 객체 형태로 반환한다. react-async 의 useAsync를 사용할때는 파라미터로 넣은 옵션 객체에 호출할 함수 promiseFn을 넣고 파라미터도 필드 이름과 함께 (customerId) 넣어주어야 한다. User.js import React from "react"; import axios from "axios"; import useAsync from 'react-a..
벨로퍼트 리액트 - 4. API 연동하기 4-1. API 연동의 기본 axios : API 호출을 위해 사용하는 라이브러리. GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다. ** REST API : 웹의 장점을 최대한 활용할 수 있는 아키텍처. 자원(Resource, URI) / 행위(Verb, HTTP Method), 표현(Respresentations)로 구성. URI는 정보의 자원을 표현해야 하며 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현. GET : 데이터 조회 POST : 데이터 등록 PUT : 데이터 수정 DELETE : 데이터 제거 axios의 기본 사용법 import axios from 'axios'; ax..
벨로퍼트 리액트 - 투두리스트 (예제코드 없이 혼자 연습) 목표 예제 코드 없이 혼자 만들기 SCSS, React-icons 사용 기존 예제 코드에 무언가 새로 더해보기 할일을 모두 완료하면 나타나는 스티커! (조건부 렌더링) 할일 내용 수정 기능 (수정 기능) 구조 TodoTemplate 투두리스트의 전체적인 레이아웃 TodoHead 오늘 날짜, 요일, 남은 할일 출력. 할일 완료시 스티커가 나타나는 부분 TodoList 할일(TodoItem)이 렌더링 되는 부분. 할일들이 리스트 형태로 나타나게 됨 TodoItem 각각의 할일 아이템. 완료여부가 나타나는 체크 표시와 할일 삭제 버튼이 있음 TodoCreate 할일을 등록하는 부분. TodoItem의 텍스트 클릭시 수정하기로 바뀜. App.js imp..
벨로퍼트 리액트 3. Todo List 만들기 - 3-1. 컴포넌트 만들기 만들어질 컴포넌트의 구조 TodoTemplate : 투두리스트의 레이아웃 설정 TodoHead : 날짜, 요일, 할일 개수 보여줌 TodoList : 할일 정보가 들어있는 todos 배열을 map을 사용해 여러개의 TodoItem 컴포넌트를 렌더링해줌 TodoItem : 각 할일에 대한 정보 렌더링. 좌측 원을 누르면 완료 여부를 toggle 할수 있음. 완료시 좌측에 체크 나타나고 텍스트 연해짐. 마우스 오버시 휴지통 아이콘 나타나고 삭제 가능 TodoCreate : 새 할일 등록 컴포넌트. 클릭하면 입력 폼 나타남. 다시 클릭하면 폼이 사라짐 ** styled-components에서 전역 스타일 추가할때 - createGlob..
문제 설명 문자열 my_string과 문자 letter이 매개변수로 주어집니다. my_string에서 letter를 제거한 문자열을 return하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ my_string의 길이 ≤ 100 letter은 길이가 1인 영문자입니다. my_string과 letter은 알파벳 대소문자로 이루어져 있습니다. 대문자와 소문자를 구분합니다. 입출력 예 my_string letter result "abcdef" "f" "abcde" "BCBdbe" "B" "Cdbe" 입출력 예 설명 입출력 예 #1 "abcdef" 에서 "f"를 제거한 "abcde"를 return합니다. 입출력 예 #2 "BCBdbe" 에서 "B"를 모두 제거한 "Cdbe"를 return합니다. fu..
문제 설명 사분면은 한 평면을 x축과 y축을 기준으로 나눈 네 부분입니다. 사분면은 아래와 같이 1부터 4까지 번호를매깁니다. x 좌표와 y 좌표가 모두 양수이면 제1사분면에 속합니다. x 좌표가 음수, y 좌표가 양수이면 제2사분면에 속합니다. x 좌표와 y 좌표가 모두 음수이면 제3사분면에 속합니다. x 좌표가 양수, y 좌표가 음수이면 제4사분면에 속합니다. x 좌표 (x, y)를 차례대로 담은 정수 배열 dot이 매개변수로 주어집니다. 좌표 dot이 사분면 중 어디에 속하는지 1, 2, 3, 4 중 하나를 return 하도록 solution 함수를 완성해주세요. 제한사항 dot의 길이 = 2 dot[0]은 x좌표를, dot[1]은 y좌표를 나타냅니다 -500 ≤ dot의 원소 ≤ 500 dot의 ..
