벨로퍼트 리액트 - 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..
study/TIL
벨로퍼트 리액트 - 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..
벨로퍼트 리액트 - 2-2. CSS Module CSS Module : CSS 클래스가 중첩되는 것을 방지해준다. 확장자는 .module.css . 컴포넌트에서 해당 파일을 불러오면 내부에 선언된 클래스 이름들이 모두 고유해진다. 이 과정에서 파일 경로, 파일 이름, 클래스 이름, 해쉬값 등이 사용될 수 있다. 클래스 이름에 대하여 고유한 이름들이 만들어지기 때문에 실수로 다른 관계없는 곳에서 이름이 중복되지 않음! CSS Module을 유용하게 사용할 수 있는 상황 레거시 프로젝트에 도입할때 (기존 css와 이름이 중복되어도 스타일이 꼬이지 않음 CSS 클래스 네이밍 규칙 만들기 귀찮을때 예제) CSS Module을 사용하여 커스텀 체크박스 컴포넌트 만들기 components/CheckBox.js im..
벨로퍼트 리액트 - 2-1 Sass Sass의 정의 SASS : Syntactically Awesome Style Sheets. CSS 전처리기(Pre-processor). 복잡한 작업을 쉽게 할수 있게 해주고 코드의 재활용성을 높여주며 가독성을 높여 유지보수를 쉽게해준다. Sass에서는 .scss와 .sass를 지원하는데 보통 scss가 더 많이 사용된다. sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color scss $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $fon..
벨로퍼트 리액트 - 1장 복습 컴포넌트 작성 규칙 ** 컴포넌트 : 일종의 UI 조각. 재사용 가능함 import React from 'react'; // 리액트 불러오기 function Hello() { return 안녕하세요 } export default Hello; // 컴포넌트 내보내기(타 컴포넌트에서 불러오기 가능) JSX 작성 규칙 태그는 꼭 닫힌 태그로 // X // O // 태그와 태그 사이에 내용이 들어가지 않을때 Self Closing 태그로 닫아줌 태그는 꼭 감싸주기 // X // O // 또는 // => Fragment. 브라우저에서 별도의 엘리먼트로 나타나지 않음. JSX 내부에서 자바스크립트 변수를 사용할때는 {} 로 감싸기 {name} 인라인 스타일은 객체형태로 작성하고 속성들..
