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

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         ..

JS파일과 JAVA 파일을 외부에서 사용할 때는 무조건 대문자로 시작 * r01_ClassComponent로 작성하면 외부에서 사용 불가   R01_ClassComponent로 작성하면 외부에서 사용 가능  기본html에서는 css를 적용할 때 class라는 이름을 사용하지만 React에서 작성한 html에는 css를 적용할 때 className이라는 이름을 사용 css나 다른 js 파일을 가져올 때는 import를 사용 css를 가져올 때   -> import 'css경로와 css파일명' js를 가져올 때   -> import [여기서 사용할 이름] from 'javascript파일경료/javascript파일명' 리액트는 알아서 새로고침을 주기적으로 자주 진행해줌 -> 덕분에 실시간으로 적용되는게 보임..