개발/react14 React 코드 재사용(composition과 고차 컴포넌트, custom hook) React의 코드 재사용(또는 캡슐화) 방법에 대해 알아봅시다. 코드 재사용이 필요한 이유 너무나도 고전적인 주제지만 그래도 모든 기술은 어떤 문제의 solution으로 나온 것이니, 짚고 넘어가도록 하겠습니다. 코드 재사용은 크게 다음 두 가지의 장점이 있습니다. 구현할 때, 시간과 리소스를 절약 중복성을 줄임 같은 코드를 두 번 치지 않음으로 시간과 리소스를 절약하는 것은 당연합니다. 그렇다면 중복성을 줄이는 것에서 오는 이점은 무엇일까요? 만약, 재사용하는 코드를 update를 하면, 해당 코드를 재사용하는 모든 곳에서의 해당 update가 적용됩니다. 이런 일관성은 프로그램의 유지/보수를 쉽게 합니다. React에서 코드 재사용을 위한 기술은 다음과 같이 여러 가지가 있습니다. Component .. 2021. 3. 28. React Virtual DOM React의 최적화 기법 중 하나인 virtual DOM에 대해 알아보겠습니다. 혹시 DOM에 대해 아직 정확히 모르시다면 다음 포스팅을 보고 오시면 내용 이해에 도움이 됩니다. DOM 은 무엇인가? DOM은 Document Object Model(문서 객체 모델)이다. HTML이나 XML로 이루어진 문서를 프로그래밍적으로 js 코드 상에서 수정 가능하도록 interface를 제공한다. 즉, 각 element에 대한 method를 제공하여 수.. amkorousagi-money.tistory.com Virtual DOM이란? Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입.. 2021. 3. 28. props vs. state 2 (그리고 this) 전 포스팅에 조금 설명이 부족한 부분이 있어서 한번 더 말해보겠습니다.. State는 private 하다. state는 private 합니다. state를 변경할 수 있는 건 오직 자기 자신의 Component 뿐입니다. 그렇다면 일반적으로 쓰이는 setState를 props로 자식에게 넘겨주어 부모 state를 변경하는 건 어떻게 받아들여야 될까요? props state 부모 Component에 의해 변경되는가? O X 그 Component 안에서 변경되는가? X O 자식 Component 안에서 변경되는가? O X 다음 표와 같이 state는 자식 Component안에서 변경이 되지 않는다고 하였는데, setState로 부모 Component의 state를 변경하는 경우는 어떻게 설명할까요? 그것은 .. 2021. 3. 27. Props vs. State React에는 두 가지 데이터 “모델”인 props와 state가 있습니다. 이 둘 사이의 차이점을 이해하는 것이 중요합니다. -React 공식 문서 (React로 사고하기)- Component란 Props와 State에 대한 차이점을 이야기하기 전에 component가 무엇인지 살펴보자. component에 대한 programminng적 지식 말고, state와 props를 이해하기 위한 관점으로 말이다. component의 주된 역할은 raw data를 풍부한 표현의 HTML로 변환하는 것이다. 수학적인 관점에서는, component를 raw data를 input으로 받고 적절한 HTML을 ouput으로 출력하는 하나의 함수라고도 볼 수 있다. 좀 더 전문적인 용어로 정의하자면, props와 stat.. 2021. 3. 25. React와 React Hooks의 상태와 생명주기 React란? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. -react 한국 공식 홈페이지 중 자습서- 이런 component들이 코드의 재사용성을 높여준다 그리고, 이런 component들은 자신만의 state를 가지고, 이 state에 따라 다르게 rendering 될 수 있다. 상태(State) State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어됩니다 props는 component 랜더링 시 전달하는 전달 인자이고, state는 component 자신이 가지고 있는 비공개된 정보이다. state를 통해 함수는 캡슐.. 2021. 3. 23. Material-ui의 DataGrid에 button 추가하기 material-ui의 DataGrid에 button을 추가하는 법 Table의 경우 Material-ui의 Table의 경우는, 아래와 같이. map 할 때 그냥 TableCell의 content로 button을 적으면 된다. import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableContainer from '@material.. 2021. 3. 23. 이전 1 2 3 다음
