우당탕탕 아장아장

React 개념 정리 Context란? - 어플리케이션에서 전반적으로 사용할 값을 관리 (사용자 언어, 로그인 상태, UI 테마 등 환경 설정) - Context와 컴포넌트가 연동되면 재사용이 어려움⭐ - 한마디로 데이터가 필요할 때마다 props를 통해 전달할 필요가 없이 context 를 이용해 공유한다! useContext const value = useContext(MyContext); - 기존의 React에 존재하는 Context를 더 편하게 사용할 수 있게 해주는 역할 useContext() 사용 방법 Context 객체 생성 import { createContext } from 'react'; // MyContext 객체 생성 const MyContext = createContext(); C..

State란? - 컴포넌트가 가질 수 있는 상태 (동적인 값의 상태) State의 종류 - 클래스형 컴포넌트의 state 속성 (React Hooks가 나오기 이전에 사용) - 함수형 컴포넌트의 useState 함수 (16.8버전 이후) Hooks란? - 16.8버전 이후 새로 도입된 기능 - 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능을 제공 기능 : 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능 특징 : state와 lifecycle과 같은 기능을 사용 가능하게 해줌 종류 : useState, useEffect, useReducer, useMemo, useCallback, useRef 규칙 : 최상위에서만 호출, 오직 React 함수 내에서만 호출 useState()..

새싹 프론트엔드 실무 과정 8주차 Hooks 8주차 월요일 11. Hooks - 1 useState() - 가장 기본적인 Hook - 함수형 컴포넌트가 가변적인 상태를 지닐 수 있도록 해 줌 import React, { useState } from "react"; const AddName = () => { const [names, setNames] = useState(["간", "리액트"]); const [input, setInput] = useState(""); function InputChange(e) { setInput(e.target.value); } function uploadInput() { setNames([input]); } return ( 추가 {names.map((name, idx) =..