코드 유인원

React 검색 결과

해당 글 46건

12. immer

12-1. 복잡한 불변성 유지 const obj1 = { arr : [1,2,3,4] } const obj2 = {...obj1}; 이렇게 값을 복사한 코드는 과연 불변성을 유지하고 있을까? console.log(obj1===obj2); // false obj1.arr.pop(); console.log(obj2); // [1,2,3] '정답은 그렇지 않다' 이다 얼핏보면 불변성을 유지하고 있는 것 같지만 객체 안의 객체인 배열은 서로 같은 대상을 참조하고 있는 상태 그렇기 때문에 내부에 객체가 있는 state의 불변성을 유지한 상태로 값을 변경시키려면 어떻게 해야할까? obj 내부의 inner.value값을 불변성을 유지하며 2로 업데이트해보자 const obj = { id: 1, inner :{ tes..

React/리액트를 다루는 기술 2021. 2. 5. 01:01

불변성

Immutability 불변성이란 객체가 생성된 이후에 그 상태를 변경할 수 없는 디자인 패턴을 말한다 리액트에서 state는 항상 불변성을 유지해야한다고 얘기하는데 그렇기 때문에 state를 업데이트할 때는 state의 값을 직접 수정하는 것이 아닌 새로운 객체를 만든 뒤에 setState로 값을 새로 부여하는 업데이트하는 방식을 취하고 있다 리액트가 이러한 방식을 고집하는 이유는 아래에서 자세히 설명해주고 있다 의도하지 않은 특정 객체가 변경되면 참조하고 있던 객체에서도 변경이 일어난다. 이 상태를 유지할 경우 side-effect가 발생할 확률과 프로그램의 복잡도가 높아진다. 변경이 일어난 객체의 프로퍼티만 비교함으로써 React에서 최적화가 가능하다. (with shouldComponentUpda..

React 2021. 2. 2. 21:26

11. 컴포넌트 성능 최적화

이전 장에서 만들어 본 일정 관리 앱은 문제점이 있는데 바로 최적화가 되지않았다는 것이다 그냥 사용해 본다면 무엇이 문제인지 알 수 없지만 아래와 같이 더미 데이터들을 넣고 리액트를 실행시켜보자 const creatDummyTodos= ()=>{ const arr = []; for(let i=0; i { const [todos, setTodos] = useState(creatDummyTodos); const nextId = useRef(todos.length+1); ... } 이전에 넣었던 3개의 데이터와는 달리 2500개의 데이터를 넣고 실행시켜봤더니 이전과는 다르게 상당히 느리게 동작하는 웹사이트를 볼 수 있다 11-1. 원인 분석 컴포넌트는 다음과 같은 상황에서 리렌더링이 발생한다 자신이 전달받은 ..

React/리액트를 다루는 기술 2021. 2. 1. 20:59

10. 일정 관리 웹 애플리케이션 만들기

10장은 실습이라 따라하는 과정을 전부 기록하는 것 보단 그 과정에서 깨닫게된 점 내가 잘못 알고 있던 점들만 빼내어서 기록하려고 한다 그렇게 하기 위해선 우선 책에서 ~~~한 기능을 구현할 것이라고 소개하면 내가 먼저 그러한 기능을 만들어보고 난 뒤에 내 코드와 책의 코드를 비교하면서 진행했다 10-1. props 전달하기 아래는 책 10-3의 기능구현하기 부분에서 props를 전달하는 과정이다 const App = () => { const [todos, setTodos] = useState([ { id:1,text : '리액트의 기초 알아보기',checked: true}, { id:2,text : '컴포넌트 스타일링 해보기',checked: true}, { id:3,text : '일정 관리 앱 만들어..

React/리액트를 다루는 기술 2021. 1. 30. 01:31

9. 컴포넌트 스타일링

리액트에서 컴포넌트를 스타일링할 때는 다양한 방식을 사용할 수 있다 일반 CSS : 컴포넌트를 스탕ㄹ링하는 가장 기본적인 방식 Sass : 자주 사용되는 CSS 전처리기 중 하나로 확장된 CSS문법을 사용하는 방식 CSS Module : CSS 클래스들의 이름이 충돌하지 않도록 파일마다 고유한 이름을 자동으로 생성해주는 옵션 styled-components : 스타일을 자바스크립트 파일에 내장시키는 방식 9-1. Sass Sass에서는 두 가지 확장자 .scss와 sass를 지원한다 Sass $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color Scss $font-sta..

React/리액트를 다루는 기술 2021. 1. 25. 03:11

8. Hooks

Hook은 클래스형 컴포넌트에 비해 기능이 모자란 함수형 컴포넌트에서도 여러가지 기능을 사용할 수 있게 해준다 8-1. useState 3장에서도 한번 다루었는데 사용할 상태값과 상태값을 관리해 줄 함수를 받아온 뒤 사용할 수 있는 함수 const Counter = ()=>{ const [value,setValue] = useState(0); return( {value} setValue(value+1)}>+ setValue(value-1)}>- ) } 만약 관리해야할 상태값이 여러개라면 아래와 같이 변수들을 객체로 묶어서 한 state에서 관리해 줄 수도 있다 const Info =()=>{ const [names, setNames] = useState({ name : '', nicknam..

React/리액트를 다루는 기술 2021. 1. 22. 14:46

7. 라이프사이클 메서드

라이프사이클이란? 리액트 컴포넌트는 생명을 가지고 있는데, 이 생명의 주기는 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다 이러한 수명(생명 주기)을 간단하게 3부분으로 나누어서 각각 파트에서 불러오는 메서드들을 라이프사이클 메서드라고 부른다 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용이 가능하다 7-1. 라이프사이클 메서드의 이해 라이프사이클 메서드의 종류는 총 9가지이다 Will 접두사가 붙은 메서드 : 작업하기 전에 실행되는 메서드 Did 접두사가 붙은 메서드 : 작업을 한 후에 실행되는 메서드 그리고 위에서 말했듯이 수명을 3가지 부분으로 나누는데 마운트 : DOM이 생성되고 웹 브라우저상에 나타나는 것 업데이트 : 컴포넌트의 정보가 바뀌어서 리렌더링될 때 언마..

React/리액트를 다루는 기술 2021. 1. 20. 14:19

6. 컴포넌트 반복

6-1. 데이터 배열을 컴포넌트로 변환하기 배열을 컴포넌트에서 출력하려면 어떻게 해야할까? 우선 컴포넌트에서 렌더링하려면 JSX가 필요하기 때문에(꼭 그런 건 아니지만) 우리가 가진 배열의 데이터를 JSX로 가공해야할 필요가 있다 이는 자바스크립트 Array의 내장 함수인 map으로 쉽게 구현이 가능하다 const IterationSample = ()=>{ const names = ['눈사람','얼음','눈','바람']; const forRender = names.map((v,i)=>{v}); return( {forRender} ) } 6-1-2. 리스트의 키 list, key list, key 다수의 컴포넌트 렌더링 const numbers = [ 1111 , 2222 ]; 엘리먼트들이 담긴 리스트를 ..

React/리액트를 다루는 기술 2021. 1. 17. 16:49

5. ref: DOM에 이름 달기

HTML에서 특정 요소에 접근하려면 어떻게 해야할까? 이런식으로 div요소에 id값을 달아줘서 이후에 css나 자바스크립트에서 id값을 이용해서 div 요소에 접근, 작업을 진행할 수 있다 리액트 프로젝트 내부에서도 이런식으로 DOM에 이름을 다는 방법이 있는데 바로 ref(reference)다 5-1. ref 사용하기 ref는 어떤 상황에서 사용해야할까? 구현하려는 기능이 state만으로는 해결할 수 없을 때 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때 애니메이션을 직접적으로 실행시킬 때 '모두 DOM을 직접적으로 건드려야 할 때' 로 귀결된다 예제 코드 import React, { Component } from 'react'; import './Val..

React/리액트를 다루는 기술 2021. 1. 15. 12:22

4. 이벤트 핸들링

4-1. 리액트의 이벤트 시스템 이벤트 이름은 카멜 표기법으로 작성한다 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다 DOM 요소에만 이벤트를 설정할 수 있다 컴포넌트에는 이벤트를 붙일 수 없다 4-1-1. 이벤트 핸들러의 this 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다 // in Class EventPractice // 렌더링 부분 render() { return ( 이벤트 연습 button ) } // 메소드 부분 constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.handleClick = this.handl..

React/리액트를 다루는 기술 2021. 1. 12. 23:35