Context는 1개의 값만 제공할 수 있음 -> 2개 이상의 값을 제공하려면 {}, []로 묶어서 제공 ** number와 setNumber를 {number, setNumber}로 작성 시 다음과 같이 변환, 전달함     {"number" : number, "setNumber" : setNumber} ==>    {"number" : 0, "setNumber" : 변환될 값} import React, {createContext ,useContext, useState} from "react";const TestContext = createContext();//후손 컴포넌트const Sibling = () =>{ // TestContext에서 제공된 값을 여기서 사용 // const [nu..

Context Context를 사용하면 단계마다 하나씩 props를 넘겨주지 않아도 컴포넌트(객체)에 데이터를 제공할 수 있음Context를 저장하는 변수명은 무조건 대문자로 시작createContext  - 기본 값을 가질 수 있으며, 기본 값은 해당 컨텍스트를 사용하는 컴포넌트가 상위 컴포넌트에서 제공하는 값을 찾을 수 없을 때 사용 useContext  - 컨텍스트의 현재 값을 가져오는 데 사용  - 컨텍스트에서 어떠한 값을 받아 현재 값으로 보여줌 Provider  - 컨텍스트를 사용하는 컴포넌트들에게 동일한 값을 모두 제공하는 컴포넌트  - value라는 prop을 받아서 하위 컴포넌트들이 접근할 수 있도록 함 import React, {createContext, useContext} from ..

입력 필드 라벨 작성 - input 태그의 id 값과 label 태그의 for 값이 일치하면 input 대신 label 태그를 클릭해도 input창이 열림  사진 추가

App.jsimport './App.css';import 예제5 from './R10_State5.js';function App() { return ( );}export default App; --------------------------------------------------------------------------------------------------------------------------------R10_State5.jsimport React, {useState} from "react";/*1번 자식은 ID를 가진 객체*/const ID값 = (props) =>{ //handler = 코딩에서 handle은 값을 조종한다는 뜻을 가짐 con..

import 예제3 from './R08_State3.js';function App() { return ( {/*init = 처음에 시작할 숫자값, step = 등차값*/} );}export default App; import React, {useState} from "react";const 예제3번 = (props)=>{ //props로 전달받을 값 중 init값을 const 초기 값으로 설정하기 //setCount()를 이용해 count값을 변경하는 코드 작성 const [count, setCount] = useState(Number(props.init)); return( setCount(count ..

React는 초반에 function이라는 함수로 묶어서 사용했지만 기능에 있어 부족한 부분이 발생     -> 부족한 부분을 class화하여 사용해 코드를 작성     -> 그런데 class로 작성하다보니 render 처럼 불필요한 코드를 더 작성하게 되었고     -> 다시 function으로 돌아옴     -> function의 부족한 부분을 채우기 위해 Hook이라는 기능을 만듦     - Hook = react에서 어떠한 동작이나 상태를 표현하거나 변경할 때 사용하는 기능들     - Hook 종류         1. useState         2. useEffect         3. useContext         4. useReducer         5. useMemo         ..