맨땅에 헤딩

1️⃣ contextAPI와 useContext 사용이유 🤬 전역적인 정보들을 props로 전달하려면 단계별로 일일이 다 써주고, 수정시에도 불편하다. 🤬 전역적인 정보: User, 테마, 언어 ✅ 이럴때 사용하는 contextAPI, useContext ✅ 리액트에서는 이러한 문제점을 해결하기 위해서 contextAPI를 제공한다. context는 앱안에서 전역적으로 사용되는 데이터들을 여러컴포넌트끼리 쉽게 공유할 수 있는 방법을 제공한다. ➡️ 일일이 props로 제공하지 않아도 상위컴포넌트에서 전역적인 정보를 해당 컴포넌트로 바로 제공할 수 있어서 편리 2️⃣ useContext 사용법 🔫 다크모드 만들어보기 🔫 1. contex이름.js 파일을 생성한다. 2. createContext를 impor..

1. 기본추가하기 2. input 리셋시키기 3. 빈칸만입력 & 앞뒤빈칸 제거 ✅ 기본 추가하기 // TodoList.js const [todos, setTodos] = useState([ { id: "1", text: "산책하기", status: "active", }, { id: "2", text: "공부하기", status: "active", }, ]); const handleAdd = (todo) => { setTodos([...todos, todo]); }; return ( ) 1️⃣ AddTodo 컴포넌트에 onAdd를 통해 props 값을 전달한다. 2️⃣ handleAdd 함수를 만들고, todo로 받아온 값을 새롭게 추가해준다. ...스프레트 연산자를 통해 기존의 값을 복사한 뒤, 받아온 ..

이름, 이메일을 입력하는 간단한 CRUD를 만들어보았다. 지난주에 만들어본것을 연습을 위해 다시 한번 만들었다. css는 크게 건드리지 않고 기능위주로 다시 만들기 위해 노력했다. 기능은 다음과 같다. 1️⃣ Create 등록하기 2️⃣ Read 화면에 띄우기 3️⃣ Update 수정하기 4️⃣ Delete 삭제하기 1️⃣ Create 등록하기 // CreateUser3.js import React from "react"; import { v4 as uuidv4 } from "uuid"; export default function CreateUser3({ username, email, onChange, onCreate }) { return ( onCreate(uuidv4())}> 등록하기 ); } //..

uuid란 리액트에서 사용하는 라이브러리로서, 고유한 id값을 자동으로 추가해줘서 편리하다. 1. 사용법 1️⃣ install npm install uuid npm을 사용하면 위와같은 코드를, yarn을 사용하면 yarn add uuid 를 통해서 install 해준다. install이 완료되면 아래와 같이 나온다. 2️⃣ import import { v4 as uuidv4 } from 'uuid'; 사용하는 곳에서 uuid를 import해준다. 만약 List.jsx라는 파일에서 사용하고 싶으면 그 파일의 상단에 import해주면 된다. (v4버전을 사용하기 때문에 v4라고 적어줌, 버전에 유의하자! 버전의 자세한 설명을 보고 싶으면 npm uuid 사이트에 들어가서 정보를 볼수있다) 3️⃣ 고유 key..

🤩 useRef 🤩 useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지될 것입니다. useRef는 리액트 훅의 한 종류로, Ref는 reference(참조)의 줄임말이다. useRef를 이용하면 특정한 DOM요소에 접근이 가능하면, 불필요한 재렌더링을 하지 않는다는 장점이 있다. 1. 형식 1️⃣ 생성 const 변수명 = useRef(초기값) useRef는 변수명에 초기값을 적는 식으로 만든다. ➡️ 이러한 결과값으로, {current: 초기값} 을 지닌 객체가 반환된다. useRef에서 기억할 것은 이러한 current라는 키값을 지닌 프로퍼티가 생성되고, 값에 어떤 변경을 ..

리액트에서 여러개의 input상태를 useState를 통해서 관리하는 것을 연습하였다. input상태를 하나하나 각각 관리하는것은 그래도 이해가 잘됐는데 여러개를 한꺼번에 관리하기 위해서 useState에 객체의 형태로 넣어주고, 그것을 e.target의 name의 값으로 받아오는 작업을 하면서 헷갈리는 지점이 발생하였다. 그래서 부족했던 부분에 대해서 더 깊게 공부를 하고 이 코드를 완벽히 이해하려고 노력하였다. 내가 부족했던 부분을 크게 정리하면 아래와 같다. 1.. 자바스크립트의 객체의 Key값으로 쓰이는 []값 2. 객체의 구조분해할당 3.이벤트핸들링을 통해서 name의 값을 변경하는 것 일단 만든 결과물은 아래와 같다. 두개의 input에 하나는 이름, 하나는 닉네임을 입력하는 창을 만들었다. ..