FrontEnd/React
21_리액트_리덕스
리덕스 사용률이 가장 높은 상태관리 라이브러리 ContextAPI + useReducer을 사용한 개발흐름과 유사하다. Context와의 차이점 1. 미들웨어 비동기 작업을 더욱 체계적으로 관리가 가능하다. 2. 유용한 함수, Hooks 라이브러리 내 함수들과 Hook을 지원받을 수 있다. ex) connect,useSelector,useDispatch ... 3. 기본적인 최적화가 이미 되어있다. 4. 하나의 커다란 상태 모든 글로벌상태를 큰곳에 넣어서 사용 5. DevTools 여러 도구가 있다. 6. 이미 사용중인 프로젝트가 많음 리덕스의 사용시기? 프로젝트가 클수록, 비동기 작업을 할수록, 리덕스가 편할수록 리덕스를 사용하면 된다. 사용 키워드들 액션 상태변화가 필요하게 될때 사용 { type :..
20_리액트_라우터
본 게시물은 react-router-dom v5버전을 다룹니다! v6버전은 사용하지 않습니다. Single Page Application 라우팅을 클라이언트가 담당 라우팅??? 어던 주소에 어떤 UI를 보여줄지 처리하는 작업! 이전에는 위와같은 구조로 서버에서 정보를 가져왔는데 이는 사용자가 늘어나면 불필요한 작업이 많아진다. SPA를 사용하면 굳이 /about페이지로 이동하지 않아도 되고 필요한 정보가 있다면 그 부분만 json 형태로 정보를 받게 된다. SPA의 단점 1. 앱의 규모가 너무 커지면 JS파일의 크기가 너무 커진다. >> code splitting로 해결 각 기능별로 파일을 분리시켜 필요한 시점마다 파일을 불러오는 방식 2/ 자바스크립트가 구동되지 않으면 UI를 볼 수 없음 >> Serv..
19_리액트 API연동
컴포넌트에서 API를 연동하는 방법에 대해 다뤄보겠다. 리덕스를 사용하지는 않겠다. Promise, async/await을 사용하여 구현해보겠다! 리액트 프로젝트를 하나만들고 yarn add axios axios 라이브러리를 설치해준다. REST API 클라이언트-서버가 소통하는 방식 GET POST PUT DELETE 예를들어 GET /users/1 이라고하면 아이디가 1인 계정을 찾아 반환하게 되고 POST/articles 라고 하면 기사글을 등록할 수 있는 API이다. axios 라이브러리를 사용하면 위 기능을 쉽게 사용할 수 있다. import axios from 'axios'; axios.get('/users/1'); https://jsonplaceholder.typicode.com/ JSONP..
18_styled-components
CSS om JS 관련 라이브러리로, JS안에 CSS를 작성하는 요령이다. Tagged Template Literal const name 'react'; const message = `hello ${name}`; console.log(text); 위와같이 사용하는 문법이다. ` `사이로 온다. const object = {a : 1}; const text = `${object}` console.log (text) // "[object Object]" 하지만 안에 객체를 넣으면 위처럼 안의 내용이 제대로 표시되지 않는다. const fn = () => true const msg = `${fn}`; console.log(msg); // "() => true" 마찬가지로 함수를 넣어도 함수의 문자열 형태를 그..
17_리액트_CSS Module
className이 겹치지 않게 작성하는 팁 1. 컴포넌트 이름을 고유하게 지정 2. 최상위 엘리먼트의 클래스이름을 컴포넌트 이름과 똑같게 (대문자를 사용) 3. 그 내부에서 셀렉터 사용 CSS Module CSS Module을 이용하면 이름이 겹치는 현상을 완벽하게 방지할 수 있다. 파일명에 .module.css를 붙이면 사용할 수 있다. 이러면 고유한 파일명등의 해시태그등이 붙어서 네임명이 고유화되게 된다. 레거시 프로젝트에 리액트를 도입하거나 CSS클래스 네이밍 규칙을 만들기 귀찮을때 굉장히 유용하다. 간단한 예시를 보자. //CheckBox.js import React from 'react'; function CheckBox( {checked,children , ...rest} ) { return..
16_리액트_컴포넌트스타일링
컴포넌트를 스타일링 하는 가장 기본적인 방법은 아래처럼 css를 import하여 사용하는 것이다. import './App.css'; Sass(Syntactically awesome stylesheets) 이전에 배웠던 Sass와 Scss를 이용하여 간단한 프로젝트를 만들 것이다. Sass보다 Scss가 훨씬 편리하기에 Scss를 사용해보도록 하겠다. 먼저 아래와 같은 파일구조를 만든다 //Button.js import React from 'react'; import './Button.scss'; function Button({children}) { return ( {children} ); } export default Button; //App.js import React from 'react'; imp..