React 수업 정리 (9) 썸네일형 리스트형 게시판 구현해보기(3) 이제 목록, 생성, 상세페이지를 전부 만들었으니 상세페이지 안에서 수정페이지만 만들면 끝이난다. 만들어보도록하자. const {id} = useParams(); const [ modify, setModify ] = useState(null); const [ form, setForm ] = useState({ title : '', writer : '', contents : '' }); 데이터의 id를 이용해서 원하는 데이터의 페이지를 수정하기위해 id 정의 해준다음받을 데이터의 상태와 구성을 정의해준다. const getModifyData = async () => { try{ const board = await axios.ge.. 게시판 구현해보기(2) 저번과 이어서 게시글 목록 List 페이지를 만들었으니게시글을 생성 할 수있도록 Create 글쓰기 페이지를 만들어보도록 하자. return ( 자유게시판 글쓰기 등록 ); 일단 화면구성을 만들어주자 제목과 작성자를 입력할 수 있도록하는 input 2개와 내용을 입력 할 수 있도록하는 textarea를만들고 입력한 내용을 받아.. 게시판 구현해보기(1) 배운것들을 활용해서 게시판을 만들어 보았다. 크게 4개의 컴포넌트로 구상하였는데 첫번째는 게시글 목록을 보여줄 List 컴포넌트, 두번째는 목록에서 제목을 누르면 내용을 보여줄 상세페이지Detail컴포넌트, 세번째는 상세페이지에서 내용을 바꿀 수 있게 해주는 수정페이지 Modify 컴포넌트,네번째는 게시글 목록에서 글쓰기버튼으로 게시글을 추가하게해주는 Create 컴포넌트이다. 일단 다 기본 틀만 만들어놓고 서버에 필요한것들을 다 인스톨 한 뒤 server.js 에 이렇게 작성해준다.const express = require('express');const bodyParser = require('body-parser');const mysql = require('mysql');const cors = req.. Board 만들어보기 게시글이 추가, 수정 , 삭제가 가능한 게시판을 구현해보기. - Home에 게시글 List 를 만들고 게시글을 누르면 세부내용이 나오도록 만들어서 수정, 삭제가 가능하도록 구현.- Home에서 글쓰기 버튼을 누르면 게시글이 추가 될 수 있도록 글쓰는 페이지로 이동하여 내용을 기입하고 등록을 누르면 추가되도록 구현.- DB랑 연결해서 DB에 데이터를 추가/삭제 수정이 가능하도록 함. npm i express ⇒ 설치 : 서버npm i mysql ⇒ 설치 : DBnpm i axios ⇒ 설치 : 비동기npm i cors ⇒ 설치 : 서버와 클라이언트 간의 자원공유 관리npm i json ⇒ 설치 : jsonnpm i nodemon ⇒ 설치 : 자동감지 서버 재시작 도구 (소스코드의 변경이 발생하면 자동으로 .. React 5일차 useReducer 요청 상태에 따라 관리하기 // action : dispatch 함수로 받을 액션const reducer = (state, action) => { switch(action.type) { case "INCREMENT : return state + 1 ; case "DECREMENT : return state - 1 ; } } // state : 현재 상태 값 => 변수 // dispatch : state 값을 업데이트 하고, 재 랜더링을 촉발하는 함수const [ state, dispatch ] = useReducer( reducer , 0 ); return ( {state} {dispatch( {.. React 4일차. 3일차에 했던 유저리스트에 눌러서 액티브가 true인 유저 수를 카운트해서 나타내보기. userMemo() => 리액트에서 컴포넌트 성능을 최적화 하는데 사용되는 훅memo => memoization의 약자 메모리에 넣기동일한 계산을 반복해야 할 때, 이전의 값을 메모리에 저장함으로써반복수행을 제거하여 프로그램 실행 속도를 빠르게 해주는 기술함수형 컴포넌트가 랜더링 => 컴포넌트 함수 호출 => 모든 내부 변수 초기화 useMemo 랜더링 => 함수 호출 => memoize 된 함수를 재사용 const countActiveUser = (users) => { // user.active 가 true 인 사용자를 카운트해서 리턴 return (users.filter(user.. React 3일차 npx create-react-app list-app 을해서 list-app 폴더를 만들고 User, 와 UserList 컴포넌트를 생성. UserList에 유저 정보를 5명정도 만들고 User에서 props로 받아서 UserList에 가져와 나타내면서 시작. array 랜더링 시 key의 존재 유무에 따라 업데이트, 삭제, 추가 시 효율적으로 랜더링 됨. key도 넣어보기. UserList import React from 'react';import User from './User';const UserList = () => { const users = [ { id: 1, username: 'kim', email : 'kim@.. React 2일차 1일차 에서 했던거처럼 my-app 리액트 폴더 생성 ( npx create-react-app myapp )comp1 comp2 comp3------------------------------------------------- comp1 영역입니다. 와 같이 만들어 놓고 시작. Hook : 기능을 할 수 있게 해주는 역할useState() : 상태변화 이용해서 Count 예제 +를 누르면 1이올라가고 -를 누르면 1이 내려가게 만들어보기 Count 컴포넌트import React , {useState} from 'react';const Counter = () => { const [count, setCount] = useState(0); const incre = () => { s.. 이전 1 2 다음
