이다닷

방법1. 상태 (State)를 이용하여 활용한 Modal 구현 1. 상태 (State)를 사용하여 Modal의 열림 또는 닫힘 상태를 관리한다. 2. 조건부 렌더링을 통하여 Modal의 표시 여부를 설정한다. 3. Modal 컴포넌트 내부에 필요한 컨텐츠를 포함시킨다. 상태 변경 방법 setIsOpen(true); => modal을 열겠다고 허락해 준 상황. 함수 선언 부분에서 const [isOpen, setIsOpen] = useState(false); 이렇게 상태를 선언해주고, return() 부분에서 modal의 열림과 닫힘을 확인하기 위해서 if (isOpen) 의 상황이라면 modal의 내용을 띄울 수 있게 설정한다. 방법2. 외부 라이브러리 사용 - 'react-modal' 라이브러리 사용 ..

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를 사용할 때에는 함수..