React (15) 썸네일형 리스트형 Mysql2 Sequelize 기본 세팅 Mysql2 Sequelize 기본 세팅하는 법에 대해 알아보자 세팅하기 전에 먼저 npm을 이용해서 mysql2 와 sequelize를 설치하도록 하자 npm install mysql2 sequelize 아래의 코드는 sequelize의 기본 세팅 구조이다. const {Sequelize, DataTypes} = require('sequelize') // 인자값이 4개가 있다. // 1. 데이터베이스명 create database ~ // 2. 데이터베이스 계정명 -> #### // 3. password -> #### // 4. Object // 4.1 host:localhost // 4.2 dialect:'mysql' const seqeulize = new Sequelize('example','###.. react-redux Redux. Redux는 상태 업데이트와 관련된 로직을 효율적으로 관리하는 라이브러리이다. 여러 개의 컴포넌트에서 같은 상태를 공유할 때도 손쉽게 상태를 관리할 수 있다. 프로젝트의 규모가 커지면 서로 다른 컴포넌트를 오가게 될텐데 이 때 props와 state를 넘겨주는게 참 쉽지 않은 과정일 것이다. 이러한 과정을 좀 더 쉽게 넘겨주기 위해 외부에 Store라는 객체를 두고 이 Store안에 props와 state를 넣어줘서 관리해주는 방식이 바로 Redux이다. 전역 상태만 관리하고자 한다면 Context API를 사용하는 것으로 충분하지만, 프로젝트 규모가 큰 경우엔 리덕스를 사용하여 효율성과 유지 보수성을 높여주는 것이 좋습니다. 또한 리덕스는 리액트에 종속되는 라이브러리가 아니기 때문에 Ang.. react-router-dom 이번엔 react-router-dom에 대해서 알아보고자 한다. react-router-dom은 SPA앱을 만들 때 주로 많이 사용되는 패키지로 특정 URI로 접근했을 때 원하는 컴포넌트를 랜더링해주기 위한 용도로 사용된다. 그러면 react-router-dom의 사용법에 대해서 알아보도록 하자. 먼저 npm에서 설치를 진행하자 npm install react-router-dom 설치가 완료가 되면 App.js에서 import문에 다음과 같이 내용을 추가해주도록 하자. import {BrowserRouter as Router, Link, Routes, Route} from 'react-router-dom' import를 이용해서 react-router-dom에서 제공해주는 BrowserRouter, Li.. useCallback이 무엇일까?? 목차 1. useCallback이란? 2. useCallback을 이용한 간단한 코드 만들기 1. useCallback 메모리제이션된 함수를 반환한다. useCallback은 useMemo와 비슷한 Hook이라고 생각합시다. (useMemo에 대해서도 따로 설명을 드리도록 하겠다) useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 함수를 메모리제이션에 저장을 하고 재사용하고 싶을 때 다시 가져와서 사용하는 함수입니다. useCallback을 써서 활용한 간단한 코드 양식을 보여주도록 하겠다. import { useCallback, useState, useEffect } from 'react' const Callback = () => { con.. React 기본적인 회원가입 구현하기 -3 (목차 3번 폼체크,useEffect) 목차 3번 more than 심화... 자 이제 마지막으로 좀 더 심화과정으로 회원가입을 구현해보도록 하자..! 이번에 우리가 추가로 구현할 것은 정규식을 통한 폼체크를 회원가입 기능에 넣을 것입니다. 아래는 구현된 코드의 모습이다. import React,{useState,useEffect} from 'react' const useInput = (defaultValue) => { const [value,setValue] = useState(defaultValue) const onChange = e => { setValue(e.target.value) } return{ value, onChange, } } const validate = (input) => { const {userid,password} =.. React 기본적인 회원가입 구현하기 -2 (목차 2번 feat. custom Hooks 알아보기) 목차 2번 그 전 게시글을 통해서 기본적인 React 회원가입 코드를 구현하였다. 이번엔 좀 더 심화과정을 통해서 회원가입 코드를 짜보겠다. 심화과정이긴 하지만 코드량은 훨씬 줄여서 작성할 수 있다. 먼저 완성된 코드를 보여주도록 하겠다. import React,{useState} from 'react' const useInput = (defaultValue) => { const [value,setValue] = useState(defaultValue) const onChange = e => { setValue(e.target.value) } return{ value, onChange, } } const Form = () => { const id = useInput('') const pw = useInp.. React 기본적인 회원가입 구현하기 - 1(목차 1번 real 기본) 목차 1. 기본적인 회원가입 2. 좀더 심화.. 3. more than 심화.. 우리는 앞서 함수형 컴포넌트와 Hooks에 대해서 알아보았다. 이제 우리가 공부한 것을 가지고 간단한 회원가입 양식을 만들어보려고 한다. 먼저 화면이 어떤식으로 렌더링되는지 보여주도록하겠다. ( CSS는 따로 안함 ) 그럼 이제 기본적인 회원가입의 순서부터 보도록 하자. 1. 기본적인 회원가입 import React,{useState} from 'react' const Form = () => { const [values,setValues] = useState({userid:'',password:''}) // 객체 const handleSubmit = e => { e.preventDefault() setValues({...va.. React의 함수형 Component ( feat. Hooks ) 목차 1. 함수형 컴포넌트란?? 2. Hooks 3. useState 4. useEffect 5. 함수 컴포넌트 props 전달 1. 함수형 컴포넌트 함수형 컴포넌트란 이름에서부터 알 수 있듯이 함수를 기반으로 함 컴포넌트를 말한다. 기존에 우리가 사용했던 class 컴포넌트와 달리 코드가 훨씬 짧고, 직관적으로 짤 수 있으며 함수형 프로그래밍을 할 수 있게 해준다. (this를 더이상 안써도 된다!!) 지금은 아니지만 과거 함수형 컴포넌트의 단점으로는 state와 라이프사이클 API를 사용할 수 없다는 것이 었는데 이러한 단점을 해결하고자 Hooks 가 나왔다. Hooks에 대해서는 아래에서 설명을 더 하게 될텐데 2019년 이후부터 함수형 컴포넌트에 Hooks라는 함수모음을 가져와서 함수형 컴포넌트에.. 이전 1 2 다음
