ssmm95 님의 블로그

redux 사용  src- store 폴더 생성 아직 store 없어서 터미널에러 난다 무시해도 된다   redux 폴더 안에 reducer 폴더 생성        여기까지 store 생성 끝 app.js 로 돌아온다          app.jsstore.js  reducer.jssrc - component 폴더생성하고 Box.js 생성  app.js로 이동해서 Box.js 출력되게 한다    useSelector 사용   GrandSonBox.js 생성 후 다시 Box로 돌아와서   GrandSonBox.js app.jspayloadnum에 5 값을 줘서 5씩 증가하게 된다reducer.jsApp.js로그인 버튼 클릭하면  user님 환영합니다~ 문구가 나온다  증가 버튼을 클릭 5 증가 , 감소 버튼..

import logo from './logo.svg';import './App.css';import 'bootstrap/dist/css/bootstrap.min.css'import {Container, Button} from 'react-bootstrap';import {useState} from 'react';function App() {  const [count, setCount] = useState(0);  const increase = () => {    setCount(count +1);  }  return (        Container className='mt-5'>      h1>{count}h1>      Button variant="primary" onClick={increase}>증..

리액트의 props를 유치원생도 이해할 수 있도록 정말 쉽고 상세히 설명해볼게요! 이걸 장난감 상자를 사용하는 이야기로 풀어볼게요. 🧸📦1. Props란 무엇일까요?Props는 "선물 상자" 같은 거예요.상자 안에는 **"아이들(컴포넌트)이 필요한 물건"**이 들어있어요.부모님(부모 컴포넌트)이 아이(자식 컴포넌트)에게 물건을 줄 때, props라는 상자에 담아서 줘요.💡 props = properties(속성)의 줄임말!2. 장난감 이야기로 풀어보기📖 장난감 가게의 규칙부모님(부모 컴포넌트)이 상자를 포장해서 아이(자식 컴포넌트)에게 줘요.아이는 받은 상자(props)를 열어 필요한 걸 꺼내서 사용해요.부모님이 상자를 포장할 때 안에 뭐가 들어갈지 결정해요.3. 예시: 장난감을 전달하기부모 컴포..

화살표 함수는 리액트에서 자주 사용되는 "특별한 함수"입니다. 아주 쉽게 설명하자면, **"짧고 간단하게 쓸 수 있는 함수"**입니다.우선, 우리가 왜 화살표 함수를 사용하는지부터 간단히 이야기해볼게요.1. 함수란 무엇일까요?함수는 **무언가를 시키는 "일꾼"**입니다."너 이거 해!"라고 시킬 때 사용하는 것이 함수예요.예를 들어, "사과를 먹어!"라고 시키는 함수는 아래와 같아요:javascript코드 복사function eatApple() { console.log("사과를 먹어요!"); }2. 화살표 함수란?화살표 함수는 함수인데, 더 짧고 귀여운 방법으로 함수를 쓰는 거예요.원래 함수를 이렇게 썼다면:javascript코드 복사function sayHi() { console.log("안녕!"); ..

프론트에서 필요한 서버 설치 https://www.npmjs.com/package/json-server json-server[](https://github.com/typicode/json-server/actions/workflows/node.js.yml). Latest version: 1.0.0-beta.3, last published: 2 months ago. Start using json-server inwww.npmjs.com 버전에따라 설치npm install json-server@0.17.4  터미널에 입력 npx json-ser..

https://reactrouter.com/en/main Docs | React Router reactrouter.com   https://www.npmjs.com/package/react-router-dom react-router-domDeclarative routing for React web applications. Latest version: 6.28.0, last published: 11 days ago. Start using react-router-dom in your project by running `npm i react-router-dom`. There are 22774 other projects in the npm registry using react-router-domwww.npmjs..

HOC (Higher-Order Component): 커링과 같이 함수 자체를 인자로 받거나 반환하는 함수를 '고차 함수' 라고 한다이와 비슷하게 컴포넌트를 인자로 받거나 변환하는 함수를 '고차 컴포넌트 (Higher-Order Component)' 라고 한다 -하이오더 컴포넌트를 구현하면 여러 컴포넌트에 동일하게 적용돼야 하는 공통 기능을 코드 중복없이 사용할 수 있다 withHocComponent.js 코드에서 예를 들면, line 8의 console.log 함수를 모든 컴포넌트에서 출력해야 하는데,hoc을 구현하지 않았다면 각각의 컴포넌트에서 동일한 코드를 작성해야한다 - src 폴더에 Hoc 폴더 생성 후  R075_ReactHoc.js 생성import React from 'react';impor..

Ref 는 Reference 의 약자로 '참조' 를 뜻한다react에서 element의 값을 걷거나 수정할 때 보통 javascript나 jquery를 사용한다이때 , id나 class와 같은 속성으로 element에 접근한다 Ref를 사용하면 element가 참조하는 변수에 접근해 변경하고 element를 제어할 수 있다  - RefFocus 함수와  JavascriptFocus 함수는 동일하게 동작한다input 박스에 focus 이벤트로 테두리를 굵게 처리한다 - R073_ReactRef.jsimport React, { Component } from 'react';class R073_ReactRef extends Component { constructor(props) { super(props)..

react 에서는 onSubmit이벤트도 camelCase 형식의 명칭을 사용한다onSubmit 이벤트는 태그에  사용한다 태그 안에 있는 type이 submit인 태그를 클릭하거나 태그에 마우스 커서를 놓고Enter 를 누르면 onSubmit 이벤트가 발생한다  - R072_onSubmit.jsimport { Component } from "react";class R072_onSubmit extends Component { Submit(e) { var inputValue = document.getElementById("inputId").value; console.log("inputValue : " + inputValue); e.preventDefault(..

react 에서는 onKeyDown, onKeyPress, onKeyUp 이벤트도 camelCase 형식의 명칭을 사용한다onKeyDown과 onKeyPress는 키를 눌렀을 때 동작하고 onKeyUp은 눌러 있던 키에서 손을 뗐을 때 동작한다 ※ onKeyDown과 onKeyUp는 키를 누르고 떼는 동작 자체에 반응한다문자 , 숫자, Ctrl, Shift, Alt , F1~F12, Pause, Enter, Scroll Lock 을 인식하고 한/영, Print Screen은 인식하지 못한다 ※ onKeyPress 는 onKeyDown 과 달리 문자가 실제로 입력 됐을 때 반응한다Ctrl, Shift, Alt , F1~F12, Pause, Enter, Scroll Lock , 한/영, Print Scree..