dukDukz

App.js import React, { useRef, useState } from 'react'; import './App.css'; import UserList from './\bUserList'; import CreateUser from './CreateUser'; function App() { const [inputs, setInputs] = useState({ username: '', email: '', }); const { username, email } = inputs; const onChange = (e) => { const { name, value } = e.target; setInputs({ ...inputs, [name]: value, }); }; const [users, setUse..

# useRef를 사용해서 DOM 요소에 접근하기 우리가 이전에 썼었던 document.querySelector 와 같은 기능을 할 수 있도록 DOM요소에 접근해보자. import React, { useEffect, useRef } from 'react'; function TestRef4() { const inputRef = useRef(); useEffect(() => { console.log(inputRef); inputRef.current.focus(); }, []); const login = () => { alert(`환영합니다 ${inputRef.current.value}`); inputRef.current.focus(); }; return ( 로그인 ); } export default Test..

1. useState 와 useRef import React, { useRef, useState } from 'react'; function TestRef() { const [count, setCount] = useState(0); const countRef = useRef(0); const increaseCountState = () => { // 누르면 즉시 렌더링됨 setCount(count + 1); }; const increaseCountRef = () => { // 눌러도 컴포넌트가 렌더링 되지 않음 countRef.current += 1; console.log('ref == ', countRef.current); }; return ( state :{count} Ref :{countRef.cur..

https://react.vlpt.us/basic/11-render-array.html 11. 배열 렌더링하기 · GitBook 11. 배열 렌더링하기 이번에는 리액트에서 배열을 렌더링하는 방법을 알아보겠습니다. 이러 배열이 있다고 가정해봅시다. const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, react.vlpt.us import React from 'react'; function User({ user }) { return ( {user.username} ( {user.email} ) ); } function UserList() { const users = [ { id: 1, usern..

/* eslint-disable no-shadow */ /* eslint-disable no-unused-vars */ import React, { useRef, useState } from 'react'; function InputSample() { const [inputs, setInputs] = useState({ name: '', nickname: '', }); const nameInput = useRef(); const { name, nickname } = inputs; const onChange = (e) => { const { value, name } = e.target; setInputs({ ...inputs, [name]: value, }); }; const onReset = () => ..

카운터 구현하기 https://react.vlpt.us/redux/05-counter.html 5. 카운터 구현하기 · GitBook 5. 카운터 구현하기 카운터를 구현해봅시다. 프리젠테이셔널 컴포넌트 만들기 프리젠테이셔널 컴포넌트란, 리덕스 스토어에 직접적으로 접근하지 않고 필요한 값 또는 함수를 props 로만 받아와 react.vlpt.us => 여기에 있는 내용을 따라했음.. 어렵지 않지만... 내가 했던 방식과는 조금 다른것이 있어서 시간이 걸렸다. 1. Container 개념 값을 컴포넌트에 바로 전달하는 것이 아니라 컨테이너에 컴포넌트를 담고 거기에 값을 전달하는 것이다.. 하지만, 꼭 이렇게 하실 필요는 없습니다. Dan Abramov 또한 2019년에 자신이 썼던 포스트를 수정하게 되면서..

[기본적인 리액트 수업] https://react.vlpt.us/ 벨로퍼트와 함께하는 모던 리액트 · GitBook 벨로퍼트와 함께하는 모던 리액트 본 강의자료는 패스트캠퍼스 온라인 강의에서 제공하는 리액트 강의에서 사용되는 강의 문서입니다. 이 튜토리얼은 여러분들이 JavaScript 의 기초를 잘 알고있 react.vlpt.us [자주 쓰는 리액트 훅스] useMemo, useRef, useCallback, useEffect, useState 자주 쓰는 것들이니까 위에 페이지에서 하나씩 다시 해보자! + 나는 주로 Next.js + redux-saga 형태로 많이 썼는데... 이제는, React + redux 형태로 쓸 것 같다. 아직은 typescript 적용은 아니고...

https://mui.com/components/icons/ React Icon Component - MUI Guidance and suggestions for using icons with MUI. mui.com 사용 방법도 자세히 나와있다.