react (11) 썸네일형 리스트형 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라는 함수모음을 가져와서 함수형 컴포넌트에.. React 댓글 구현하기 이번에는 React로 댓글을 구현하는 방법을 해볼 것이다. DB 연결없이 임시로 데이터를 사용해서 댓글 구현을 해보도록 하자. 안녕하세요 1 ~ 3까지는 원래 따로 임시데이터를 저장해서 나타낸 모습이고 그 밑에서부터 나온 댓글이 제가 직접 작성해서 올린 댓글의 모습입니다. 위의 빈칸에 댓글의 내용을 입력할 수 있고 X 표시를 누르면 지울 수 있으며 댓글의 내용을 선택하면 박스 형태가 나오면서 댓글 수정까지 가능하게 할 것이다. ( CRUD ) 컴포넌트의 구성은 아래와 같다 . CommentForm은 댓글을 입력하는 공간이고 CommentList는 댓글의 내용이 나타나는 공간이다. 자 이제 코드를 하나하나씩 작성해보도록 하자. import React from 'react' import ReactDOM fr.. 틱택톡 게임 구현하기 틱택토(tic-tac-toe) 틱택토 게임은 두 명이 번갈아가며 O와 X를 3x3 판에 써서 같은 글자를 가로, 세로, 혹은 대각선 상에 놓이도록 하는 놀이이다. 이번 글에서는 틱택토 게임을 진행할 수 있게 구현하고, 게임이 끝난 시점에서 승자를 결정하는 것과 다음 플레이어가 누구인지에 대해서도 나타내고자 한다. 자 이제 리액트로 코드를 구현해보도록 하자. 우리는 3개의 컴포넌트를 사용할 것이다 . 1.Game 컴포넌트 2. Board 컴포넌트 3. Square 컴포넌트 class Square extends React.Component { render(){ return( ) } } class Board extends React.Component { render(){ return( ) } } class G.. 이전 1 2 다음
