9. immer를 사용한 불변성(Immutability) 유지 1. Immutability ? 2. immer 사용법 1. Immutability ? 정의 : Immutability(변경불가성)는 객체가 생성된 이후 그 상태를 변경할 수 없는 디자인 패턴을 의미 Javascript에서 객체는 참조(reference) 형태로 전달하고 전달 받는데, 그 객체가 참조를 통해 공유되어 있다면 그 상태가 언제든지 변경될 수 있기 때문에 문제가 될 가능성도 커지게 된다. 이 문제의 해결 방법은 비용은 조금 들지만 객체를 불변객체로 만들어 프로퍼티의 변경을 방지하는 것이다. React에서 immutability React 컴포넌트의 state 를 변경해야 한다면 객체의 값을 직접적으로 수정하면 절대 안되고, 무조건 setState( ) 를 통해 state 를 업데이트 해주어야한.. 2020. 10. 25. 8. React todo-app 1 1. 프로젝트 생성 및 필요한 라이브러리 설치 yarn create react-app todo-app cd todo-app yarn add styled-components react-icons 2. Prettier 설정 // 프로젝트의 최상위 디렉토리에 .prettierrc 파일 생성 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 3. index.css, App.js 초기화 /*index.css 초기화*/ body { margin: 0; padding: 0; background-color: rgba(128,128,128,0.3); } //App.js .. 2020. 10. 25. 7. Component Styling Sass styled-components Sass css 전처리기 복잡한 작업을 쉽게 해주고, 스타일 코드의 재활용성, 가독성을 높여 유지보수의 용이함 확보 https://heropy.blog/2018/01/31/sass/ styled-components import React from 'react'; import styled, { css } from 'styled-components'; //tagged template literal 문법이용한 styled component const Box = styled.div` background: ${props => props.color || 'blue'}; padding: 1 rem; display: flex; `; const Button = styled.but.. 2020. 10. 25. 6. React Hooks Hooks react v16.8에 새로 도입된 기능 함수형 컴포넌트에서는 할 수 없었던 클래스컴포넌트만의 다양한 작업을 함수형 컴포넌트에서도 가능하게 해주는 함수 오직 React 함수 내에서 hook을 호출해야 한다 : hook을 일반적인 JS함수 내에서 호출하면 안된다. 항상 React 함수의 최상위에서 hook을 호출 : 조건문, 반복문등에서 호출하면 안된다 대표적인 hooks useState useEffect useReducer useMemo useCallback custom Hooks useState import React, {useState, useEffect } from 'react'; const Counter = () => { const [number, setNumber] = useState.. 2020. 10. 25. 5. React Component Lifecycle React Component Lifecycle 리액트 컴포넌트 라이프사이클 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 페이지에서 사라질때 까지를 의미 라이프 사이클은 크게 3가지 카테고리로 나뉨 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는것 업데이트 : 리렌더링 언마운트 : 컴포넌트를 DOM에서 제거하는 것 라이프사이클의 특정 시기에 특정 작업을 처리하기 위해 "라이프사이클메서드" 사용 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능 마운트 마운트할 때 호출하는 메서드 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는 것 호출 메서드 constructor( ) : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps( ) .. 2020. 10. 25. 4. Component 반복 자바스크립트 map ( ) 함수 리액트 프로젝트에서 반복적인 컴포넌트를 렌더링할 때 "map 함수"를 사용 map( ) 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열 생성 문법 : array.map( callback( currentValue, index, array), [thisArg] ) callback 함수 : 새로운 배열의 요소를 생성하는 함수 currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg (선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 key : 컴포넌트 배열을 렌더링했을 때 어떤 원소에 .. 2020. 10. 25. 이전 1 2 3 4 5 6 다음
