내가 보려고 쓰는 기록

구현해야될 부분 1. input으로 사용자가 입력한 값을 받는다. 2. 사용자가 입력한 값을 배열에 객체형태로 저장하고 투두리스트로 출력한다. 3. 삭제, 체크 기능을 구현한다. 그외에 자잘한 기능 버튼 누르면 1. input 창에 포커스 2. input 값 초기화 3. input 값이 비어있으면 배열에 추가하지 않기 useState( ) state로 만들어야 될 부분 - 사용자가 현재 입력한 값 - 사용자가 입력한 값을 저장할 배열 (객체 형태로 저장) const [names, setNames] = useState([ { id: 1, text: "리액트 복습하기", checked: false }, { id: 2, text: "개인 프로젝트 계획 짜기", checked: false }, { id: 3, ..

1. 폼태그 안의 버튼 ( type = "submit" 이 설정된 버튼) 폼 제출을 위해 사용한다. 폼태그 안에 위치하며 폼의 기본 동작을 실행하도록 돕는다. 폼을 제출하면 폼태그에 설정된 ' onSubmit ' 핸들러 함수가 호출된다. 폼의 데이터를 제출하거나 서버로 데이터를 전송할 때 사용된다. const handleClick = () => { e.preventDefault(); //페이지 새로고침 }; return ( Submit ); * 폼태그 내에서 버튼 생성시 버튼에 타입을 생략하면 type="submit"이 자동으로 설정 된다. 폼태그 내에서 일반적인 버튼을 만들고 싶으면 type="button"으로 명시해야됨 2. 일반적인 버튼 ( ' onclick ' 이벤트가 있는 버튼) 폼 제출과는 관..

redux안에 있는 state가 array/object 인 경우 원래 state가 array/object인 경우에는 복사본을 만들어서 수정해야하지만 redux 사용하는 경우 state 직접 수정해도 잘 변경 됨 (Redux 설치하면 자동으로 딸려오는 lmmer.js 라이브러리 때문! state 만들 때 문자나 숫자 하나만 필요해도 redux에선 일부러 array/object에 담는 경우도 있다고함 수정이 편리해서) 위의 array에서 count만 +1씩 증가하는 변경함수 만들고 싶으면? increase라는 함수 만들고 export 해서 *파라미터로 들어간 state는 state의 초기값 필요한 컴포넌트에서 import 하고 dispatch( ) 안에 increase 함수 넣으면 완성~ state 변경함수..

1. store 내에서 변경함수 만들기 let user = createSlice({ name:'user', //이름 initialState:'kim', //초기값 //변경함수 만들기 reducers:{ setUser(state){ //state : 기존 초기값 state를 의미 return 'john' + state } } }) 위의 코드에서 reducers : 이부분이 변경함수 만드는 곳 이다 reducers 안에서 setUser라는 이름의 변경함수 만들면 그 안의 return이 출력되는 것! 변경함수의 파라미터로 들어가있는 state는 초기값 ' kim '을 의미 2. 만든 변경함수 export 해야함 함수이름.actions 라고 쓰면 변경함수인 reducers가 남음 //export let {변경함..

◾ map 함수 array의 데이터 갯수만큼 가져오고 싶으면 i는 0부터 시작하는 정수로 i를 가지고 array를 인덱싱할 수 있음 array.map(function(a,i){ return( //반복하고 싶은 코드 블라블라 ) }); ◾ props 문법 ◾ router 리액트 페이지 나누는법 index.html만 사용함 1. 컴포넌트 만들어서 내용 채우고 2. /경로 접속하면 그 컴포넌트 보여줌 → 조건문 사용하기엔 너무 코드 길어져서 router 라이브러리 사용 라우츠 안에 라우터 라우터가 페이지 페이지도 컴포넌트로 만들면 좋음 Route element={여기에 컴포넌트 이름만 넣으면 코드 짧아지고 편함} 페이지 이동버튼은 태그 ◾ useNavigate, Outlet useNavigate( ) : 페이..

input 태그 속성 type : input 태그의 종류 value : input 태그의 초기값 name : 제출시 서버로 전달되는 이름 placeholder : 입력 필드에 사용자가 적절한 값을 입력할 수 있도록 도와주는 짧은 도움말 버튼 기능 구현을 위해 필요한 state들 1. text state : input에 입력한 값 저장할 state 2. name state : 버튼 누를 때 text state값 저장할 state 위의 기능 구현을 위해 필요한 function들 1. onChange : input에 입력한 값 text state에 넣어주는 함수 2. onClick: 버튼 눌렀을 때 text의 값 name state에 넣어주는 함수 ex) state와 function들 const [text,s..

임시 서버를 Node.js + express로 쉽게 만들기 1. 리액트 프로젝트 외에 server 폴더 따로 만들기 2. npm init 해서 package.json 파일 생성 3. npm install express 해서 exress 설치 4. server.js 파일 만들어서 아래의 코드 복붙 const express = require('express'); const path = require('path'); const app = express(); app.listen(8080, function () { console.log('listening on 8080') }); 5. node server.js로 서버 잘 만들어 졌는지 확인 리액트로 만든 HTML 전송하는 법 1. 리액트로 개발을 다 마친 후 b..

배열 복제 var arr = [1,2,3,4,5]; var newArr = [...arr]; // [1,2,3,4,5] 배열 병합 var arrA = [1,2,3]; var arrB = [4,5,6]; const newArr = [...arrA, ...arrB]; //[1,2,3,4,5,6] 배열뿐만 아니라 문자열도 복제 가능 * 문자열 배열에 담을 때 split('') 썼는데 [...]연산자가 더 간편! const num = '205'; console.log([...num]) // ['2','0','5'] console.log(num.split('')) // ['2','0','5'] 객체도 동일 var obj = {a:1, b:2}; var newObj = {...obj}; //{ a: 1, b: 2 ..