일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Reduxpender
- tasklet
- Spring REST Docs
- MSA
- SpringRESTDocs
- openapi3
- Pender
- T-OTP
- gradle
- AuthenticatoinProvide
- axios
- cloud native
- SWAGGER
- preventdefault
- stopPropogation
- Crawling
- MFA
- Spring Security
- 리액트
- vue
- vuejs
- Filter
- UsernamePasswordAuthenticationFilter
- cheerio
- OpenStack
- SpringBoot
- Spring Batch
- Flyway
- JavaScript
- REACT
- Today
- Total
목록REACT (39)
Miracle Morning, LHWN
# 상태를 업데이트하는 방법에는 useState, useReducer가 있다. 다만, useReducer Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트로부터 분리시킬 수 있다. (컴포넌트 밖, 다른 파일에서도 사용할 수 있다.) reducer 란 reducer 는 현재 상태(state)와 액션 객체(action)를 파라미터로 받아와서 새로운 상태를 반환해주는 함수 function reducer(state, action) { // 새로운 상태를 만들어주는 로직 // const nextState = ... return nextState; } reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다. action 에는 업데이트를 위한 정보를 가지고 있다. 주로 'type'..
# React.memo 를 이용하면, 컴포넌트의 props 가 바뀌지 않았을 때 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있다. → 리렌더링이 필요한 상황에서만 하도록 설정할 수 있는 것이다! // CreateUser.js import React from 'react'; const CreateUser = ({ username, email, onChange, onCreate }) => { return ( ... export default React.memo(CreateUser); // UserList.js import React from 'react'; const User = React.memo(function User({ user, onRemove, onToggle }) { retu..
# useCallback은 useMemo 와 비슷한 Hook 인데 useMemo는 특정 결과 값을 재사용, useCallback은 특정 함수를 새로 만들지 않고 재사용하는데에 사용된다. const onCreate = () => { const user = { id: nextId.current, username, email }; setUsers(users.concat(user)); setInputs({ username: '', email: '' }); nextId.current += 1; }; const onRemove = id => { // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬 // = user.id 가 id 인 것을 제거함 setUsers(users.filter(..
import React, { useRef, useState } from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function countActiveUsers(users) { console.log('활성 사용자 수를 세는중...'); return users.filter(user => user.active).length; } function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const onChange = e => { const { name..
# useEffect 를 사용할 때에는 첫 번째 파라미터: 함수, 두 번째 파라미터: 의존 값이 들어있는 배열(deps) 만약에 deps 배열을 비우게 되면, 컴포넌트가 처음 마운트될 때에만 useEffect 에 등록한 함수가 호출된다. useEffect 에서는 함수를 반환할 수 있는데 이를 cleanup 함수라고 부른다. 이 cleanup 함수는 useEffect 에 대한 뒷정리를 해주는데, deps가 비어있을 경우에는 컴포넌트가 사라질 때 cleanup 함수가 호출된다. import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에..
일단 users 배열안의 객체에게 'active' 라는 속성을 추가로 주고 시작! // App.js const [users, setUsers] = useState([ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com', active: true }, { id: 2, username: 'tester', email: 'tester@example.com', active: false }, { id: 3, username: 'liz', email: 'liz@example.com', active: false } ]); 객체의 active 값에 따라 폰트의 색상이 바뀌도록 + 마우스를 올렸을 때 커서가 손가락 모양으로 변하도록 구현! // UserLis..
// UserList.js import React from 'react'; function User({ user, onRemove }) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } function UserList({ users, onRemove }) { return ( {users.map(user => ( ))} ); } export default UserList; 일단 username (email) 옆에 삭제 버튼을 달아주는데 그 버튼의 onClick 이벤트한테 user.id 를 props로 넘겨줘야 한다. onRemove(user.id)}>삭제 이 onRemove 함수는 App.js에서 구현 > UserList에서 받아서 ..
이번에는 부모 컴포넌트 App에서 상태관리를 하고, 의 값 및 이벤트 함수를 props로 넘겨받아서 사용해본다. // CreateUser.js import React from 'react'; function CreateUser({ username, email, onChange, onCreate }) { return ( 등록 ); } export default CreateUser; // App.js import React, { useRef } from 'react'; import UserList from './UserList'; import CreateUser from './CreateUser'; function App() { const users = [ { id: 1, username: 'velopert..
# useRef의 기능은 아래 두 가지이다. (1) 컴포넌트에서 특정 DOM을 선택해야 할 때 (2) 컴포넌트에서 조회 및 수정할 수 있는 변수를 관리할 때 → useRef로 관리하는 변수는 값이 바뀐다고 해서 컴포넌트가 리렌더링되는 것은 아니다. (상태 State는 '상태를 바꾸는 함수를 호출 > 렌더링 > 업데이트된 상태 조회'하는 반면, useRef는 설정 후 바로 조회할 수 있음) # useRef 변수로 관리할 수 있는 값은 아래와 같다. (1) setTimeout, setInterval 을 통해 만들어진 Id (2) 외부 라이브러리를 사용하여 생성된 인스턴스 (3) scroll 위치 // App.js import React, { useRef } from 'react'; import UserL..
import React from 'react'; function UserList() { const users = [ { id: 1, username: 'velopert', email: 'public.velopert@gmail.com' }, { id: 2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; return ( {users[0].username} ({users[0].email}) {users[1].username} ({users[1].email}) {users[2].username} ({users[1].email}) ); } export default Us..