리액트
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..
15_리액트_유용한 tool
Prettier 코드 스타일을 내 스타일대로 커스터마이징 할수 있는 기능 npx create-react-app useful-tools 위 기능을 테스트하기 위해 우선 새로운 리엑트 프로젝트를 하나 만들었다. vs코드에서 Prettier을 깔아주고, 프로젝트 root폴더에 .prettierrc파일을 만들어주자. 파일 내용은 아래 홈페이지를 참조해도 좋다 https://prettier.io/docs/en/configuration.html Prettier · Opinionated Code Formatter Opinionated Code Formatter prettier.io { "trailingComma": "all", "tabWidth": 4, "semi": true, "singleQuote": true }..
14_리액트_클래스형 컴포넌트
class형 컴포넌트 함수형 컴포넌트와는 다른 방식으로 요즘에는 자주사용하지 않는 방식이나 알아둘 필요는 있다. class형 컴포넌트로만 가능한 기능이 한두어개 있기 때문 import React from 'react'; function Hello({color,name, isSpecial}) { return ( {isSpecial ? * : null} {isSpecial && *} 안녕하세요 {name} ); } Hello.defaultProps = { name: '이름없음' }; export default Hello; //hello 컴포넌트를 만들어서 내보내겠다 color,이름을 받아와서 isSpecial값에 따라 앞에 *가 붙는 간단한 예제가 있다. 이 예제를 class형 컴포넌트로 바꾸어 보자. cl..