이다닷

cmd를 통해서 react로 새로운 프로젝트를 만든다. npx create-react-app error ➡️user라는 props를 받아와서 해당 데이터의 id와 username 값을 보여주기. App.js 추가 import React from 'react'; import User from './User'; function App() { const user = { id: 1, username: 'dadat' }; return ; } export default App; User.js 추가 import React from 'react'; function User({ user }) { return ( ID: {user.id} Username: {user.username} ); } export default U..

📢생명주기 메소드란? 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메소드들이다. -> 생명주기 메소드는 클래스형 컴포넌트에서만 사용이 가능하다. index.js 코드 변경 import React, { useState } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; import LifeCycleSample from "./LifeCycleSample"; // 랜덤 색상을 생성합니다 function getRandomColor() { return "#" + Math.floor(Math.random() * 16777215).toString(16); } function App() { const [color..

📌클래스형 컴포넌트를 사용하는 이유는 많을 수 있다. -> 프로젝트를 유지보수하는 경우, 함수형 컴포넌트 + Hooks로 못하는 작업일 때도 있고, 옛날에 만들어진 리액트 관련 라이브러리의 경우에는 Hooks가 지원이 안되는 경우가 있다. 이렇게 클래스형 컴포넌트를 잘 사용하지는 않지만 사용해야하는 상황이 생길 수 있다. ➡️클래스형 컴포넌트를 사용해서 Hello.js 변경. 📌클래스형 컴포넌트에서 있어야하는 것 -> 클래스형 컴포넌트에는 render() 함수가 무조건 있어야 한다. 그리고, props를 조회하고 싶을 때에는 this.props를 조회하면 된다. Hello.js 변경 import React, { Component } from 'react'; class Hello extends Compon..

📢리액트에서 배열이나 객체를 업데이트 해야 할 때에는 직접 수정하면 안되고, 불변성을 지켜주면서 업데이트 해주어야 한다. -> 지금까지 사용했던 확장 연산자를 사용하면 된다. 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..