본문 바로가기

Front-End/React15

[React] react-async 라이브러리 react-async는 요청 상태 관리를 위해서 사용하는 라이브러리입니다. 먼저 라이브러리를 설치합니다. $ yarn add react-async 해당 라이브러리의 README를 보면 많은 내용들이 들어가 있습니다. import React from "react" import { useAsync } from "react-async" const fetchPerson = async ({ id }, { signal }) => { const response = await fetch(`https://swapi.co/api/people/${id}/`, { signal }) if (!response.ok) throw new Error(response.status) return response.json() } const.. 2021. 6. 1.
[React] class형 컴포넌트 우리는 class컴포넌트와 함수형 컴포넌트 둘 다 사용할 수 있는데, 리액트에서도 함수형 컴포넌트 사용을 추천하고 있다. 허나 이전에 만든 프로젝트가 있다면 class컴포넌트를 사용했을 것이고, 그것을 유지보수 하기위해서는 class컴포넌트도 알아야 유지보수가 가능하다. import React, { Component } from "react"; class CounterClass extends Component { //첫번째 방법 // constructor(props) { // super(props); // // bind작업을 하면 만약에 이 함수에서 this를 가르키게 된다면 constuctor에서 this를 가르키게 해라라는 의미 // this.handleIncrease = this.handleIncr.. 2021. 5. 21.
[React] Immer를 사용한 불변성 지키기 immer를 사용하면 불변성을 해치는 코드를 작성해도 대신 불변성 유지를 해줍니다. 우리는 보통 배열을 변경할 때 합칠때는 concat, 찾거나 뺄 때는 filter, 리스트를 뿌릴 때는 map을 사용하여 불변성을 지켜주면서 배열을 수정합니다. 허나 immer를 사용하면, push나 직접적인 값 설정이 가능해집니다. 먼저 immer를 설치해줍니다. $yarn add immer 또는 $npm i immer 그리고 상단에 import produce from "immer"; 를 작성해주고 immer로 사용해도 되지만, 보통 produce로 많이 사용합니다. produce 함수를 사용 할 때에는 첫번째 파라미터에는 수정하고 싶은 상태, 두번째 파라미터에는 어떻게 업데이트하고 싶을지 정의하는 함수를 넣어줍니다. .. 2021. 5. 20.
[React]배열 렌더링하기 userList.js import React from "react"; function User({ user }) { return ( {user.username} ({user.email}) ); } function UserList() { const users = [ { id: 1, username: "홍길동", email: "hong@hong.com", }, { id: 2, username: "임꺽정", email: "lim@lim.com", }, { id: 3, username: "최배달", email: "choi@choi.com", }, ]; return ( {users.map((user) => ( ))} ); } export default UserList; 배열 객체를 만들어놓고 객체를 하나씩 찍어줄.. 2021. 5. 13.
[React] ref: Dom에 이름 달기 (useRef) 특정 DOM 요소에 어떤 작업을 해야 할 때 요소에 id를 달면 CSS나 자바스크립트에서 해당 id를 가진 요소를 찾아서 작업을 할 수 있다. 이렇게 HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트에서 DOM에 이름을 다는 것을 ref(reference의 줄임말) 이라고 한다. ref는 어떤 상황에서 사용해야 할까? 'DOM을 꼭 직접적으로 건드려야 할 때'입니다. JavaScript 를 사용할 때에는, 우리가 특정 DOM을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택합니다. 리액트에서는 ref로 사용하는데 함수형 컴포넌트에서 ref를 사용할 때에는 useRef라는 Hook 함수를 사용합니다. In.. 2021. 5. 13.
[React] React에서 SASS, SCSS 사용하기 Sass는 CSS pre-processor(전처리기)로써 복잡한 작업을 쉽게 할 수 있게 해주고, 코드의 재활용성을 높여줄 뿐만 아니라, 코드의 가독성을 높여주어 유지보수를 쉽게 해줍니다. https://sass-guidelin.es/ko/ Sass Guidelines — Korean translation 분별 있고, 유지∙확장 가능한 Sass 작성을 위한 주관적인 스타일가이드. sass-guidelin.es sass설치 $ yarn add node-sass 색상관련 git yeun.github.io/open-color/ Open Color Color scheme for UI design yeun.github.io @mixin name {} 여러 중복되는 코드를 방지하기 위해 써주는 문법 중 하나. @m.. 2021. 3. 27.

티스토리툴바