일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- promise
- 자바스크립트
- 렌더링
- frontendstudy
- 함수 실행
- HTML
- 컴포넌트
- 배열
- addEventListener
- Frontend Study
- typeScript
- Props
- callback함수
- 비동기함수
- this 객체
- useState
- REACT
- 리액트
- 이벤트
- DOM
- input
- 이벤트핸들링
- FrontendStydy
- CSS
- try.. catch
- useRef
- 배열메소드
- 메소드 실행
- webProject
- JavaScript
- Today
- Total
목록분류 전체보기 (77)
이다닷
📢리액트에서 배열이나 객체를 업데이트 해야 할 때에는 직접 수정하면 안되고, 불변성을 지켜주면서 업데이트 해주어야 한다. -> 지금까지 사용했던 확장 연산자를 사용하면 된다. ex) const num = { a: 1, b: 2 }; num.b = 3; 이렇게 하면 안되고, const num = { a: 1, b: 2 }; const nextNum = { ...object, b: 3 }; 이렇게 해주어야 한다. 📌배열도 마찬가지로 항목을 직접 수정하면 안되고, concat, filter, map 등의 함수를 사용해야한다. 이 외에 상황에서 데이터의 구조가 조금 까다로워지면 불변성을 지켜가면서 새로운 데이터를 생성해내는 코드가 조금 복잡해질때가 있다. ex) const state = { posts: [ { ..
📢우리가 지금까지 만들고있는 프로젝트를 보면, APP 컴포넌트에서 onToggle, onRemove 등의 함수가 구현되어있고, 이 함수들은 UserList 컴포넌트를 거쳐서 각 User 컴포넌트에 전달되고 있다. -> 여기서 UserList 컴포넌트의 경우는 함수들을 전달하기 위한 중간다리 역할만 하고 있다. 즉, UserList에서는 함수들을 직접적으로 사용하고 있지 않다. 📌현재로써는 큰 불편함이 없지만, 만약 3~4개의 컴포넌트를 거쳐서 전달을 해야하는 일이 생긴다면 매우 번거로워질 것이다. -> 그럴땐, 리액트의 Context API와 이전에 배웠던 dispatch를 함께 사용한다면 이러한 복잡한 구조를 해결 할 수 있다. 📌Context API를 사용해서 새로운 Context 만들기 const ..
📌컴포넌트를 만들다보면, 반복되는 로직이 자주 발생한다. 예를 들어서 Input을 관리하는 코드는 관리할 때마다 비슷한 코드가 반복된다. 이러한 상황에서 커스텀 Hooks를 만들어서 반복되는 로직을 쉽게 사용할 수 있다. 1️⃣scr 디렉터리에 hooks라는 디렉터리를 만들고, useInputs.js라는 파일 추가. useInputs.js 추가 import { useState, useCallback } from 'react'; function useInputs(initialForm) { const [form, setForm] = useState(initialForm); const onChange = useCallback(e => { const {name, value} = e.target; setForm(..
📌useReducer 이전 수업때 배웠던 useState로 상태를 업데이트 하는 것을 배웠었다. 상태를 관리할때 사용하는 함수는 useState 말고 useReducer으로 상태를 관리할 수 있다. 이 함수의 큰 사용법은 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리 할 수 있다. -> 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용할 수도 있다. 📢useReducer 함수를 사용하기전에.. 우선 reducer에 대해서 먼저 알아보겠다. reducer는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수이다. 따라서 reducer에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태이다. function reducer(state..
➡️React.memo를 사용하여 리렌더링을 방지하여 리렌더링 성능 최적화 해주기 📌React.memo 함수 사용법 : React.memo(함수 명); ex) export default React.memo(UserList); CreateUser.js 수정 전 export default CreateUser; 수정 후 export default React.memo(CreateUser); UserList.js 수정 전 export default UserList; 수정 후 export default React.memo(UserList); 이렇게 바꾸고 코드를 실행해보면, 한가지 문제가 있다는 것을 알 수 있다. 📢User 중 하나라도 수정하면 모든 User들이 리렌더링 되고, CreateUser도 리렌더링이 된..
📌useCallback useCallback는 useMemo와 비슷한 Hook 함수이다. useMemo는 특정 결과값을 재사용하는 반면, useCallback는 특정 함수를 재사용 할 수 있게 해준다. 📢사실 지금까지 사용되던 onCreate, onRemove, onToggle 함수들은 컴포넌트가 리렌더링 될 때마다 새로 만들어지고 있다. 사실 함수를 새로 만드는 것이 리소스를 많이 차지하는 일은 아니지만 한번 만든 함수를 재사용하는 것은 여전히 중요하다. -> 그 이유는, 추후에 컴포넌트에서 props가 바뀌지 않으면 Virtual DOM에 새로 렌더링 하는 것을 하지않고, 컴포넌트의 결과물을 재사용하는 최적화 작업을 할때, 함수를 재사용 해야하기 때문이다. 📢useCallBack를 사용할 때에는 함수..
➡️APP 컴포넌트에서 countActiveUsers라는 함수를 만든 후, active 값이 true인 사용자의 수를 세어서 화면에 렌더링하기 APP.js 변경 import React, { useRef, useState } from 'react'; import UserList from './qoffhvjxm/UserList'; import CreateUser from './qoffhvjxm/CreateUser'; // function countActiveUsers (users) { console.log("활성 사용자 수를 세는중.."); return users.filter(user => user.active).length; } // function App() { const [inputs, setInput..
➡️마운트/언마운트/업데이트 시 수행할 작업 설정하기 📌마운트/언마운트 마운트 : 컴포넌트가 나타나는 상황을 마운트라고 한다. 언마운트 : 컴포넌트가 삭제 될 때는 언마운트라고 한다. UserList.js 변경 import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { // useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); // return ( onToggle(user.id)} > {user.username} ({user.email}) onRemove(user.id)}>삭..
➡️onToggle을 추가해서 active 값에 따라 폰트의 색상 바꾸기 + cursor 필드에 마우스 오버시 커서 모양 바꾸기 APP.js 변경 import React, { useRef, useState } from 'react'; import UserList from './qoffhvjxm/UserList'; import CreateUser from './qoffhvjxm/CreateUser'; function App() { const [inputs, setInputs] = useState({ username: '', email: '' }); const { username, email } = inputs; const onChange = e => { const { name, value } = e.tar..
➡️삭제버튼 추가 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; 변경사진 ➡️특정 id를 가진 객체를 삭제하는 기능을 가진 onRemove 함수 만들기 📌filter 함수 배열에서 특정 조건을 만족하는 값들만 따로 추출하여 새로운 배열을 만들어주는 함수이다. APP.js 변경 import React, { use..