분류 전체보기150 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. React 전역 상태(state) 관리 라이브러리 Recoil 전역 상태(state) 관리 라이브러리인 Recoil을 소개하고자 한다. 필요성 React는 자체적으로 component마다 state라는 변수를 활용해 자신의 상태를 관리한다. 특히, React hooks에서는 useState라는 함수를 사용하여 state를 관리한다. 한 component에서 보면 이런 state 관리가 완벽한 것 같지만, 우리는 여러 component로 web application을 만든다. 즉, component 간의 state 공유가 필요하다는 것이다. 그런데, React의 component 구조 특성상, 부모 component가 자식 component에게 state 및 정보를 전달하는 건 아래와 같이 매우 쉽다. const 부모 = (props)=>{ const [state, .. 2021. 3. 21. Mongoose 개념 및 사용법 정리 MongoDB는 전통적인 관계형 DB인 Mysql, Mssql, Oracle 등 과 달리, 비 관계형 DB이며, json과 같은 document 기반의 구조를 가진다. 관계형 DB에 비해 MongoDB는 데이터 저장 및 검색에 대해 덜 제한적이다. 이런 MongoDB를 더 편리하게 사용할 수 있는 Mongoose라는 npm 패키지를 소개하고자 한다. MongoDB와 Mongoose 기본 개념(구조) 우선, 가장 작은 단위부터 보자. MongoDB Document document는 mongoDB의 가장 작은 데이터 저장 단위이다. 이 document는 그냥 하나의 json object라고 보면 된다. key:value를 저장하고 있는 text라는 의미이다. Collection Collection은 여러 D.. 2021. 3. 19. express에서 get, post 파라미터 가져오기 express에서 GET Method와 POST Method에 대해 어떻게 파라미터를 가져오는지(받는지) 포스팅하겠다. GET Method : Parameter(파라미터)로 받기 const express = require("express") const app = express() app.use(express.json()) app.get("/api/persons/:id", (request, response, next) => { const params = request.params const id = request.params.id console.log(params.id) response.send(id) }) 위 방법은 client가 보낸 request에 있는 params로 파라미터를 받는 방법이다. "/a.. 2021. 3. 19. 이전 1 ··· 17 18 19 20 21 22 23 ··· 25 다음
