[React] Context, useState(),useInput()

Acontext.jsx

createContext() : Context를 만들어주는 함수

 

Provider: 컴포넌트 간에 공유하는 값을 value라는 props로 설정하여 자식 컴포넌트에서 바로 접근 하는 Context 내부의

                컴포넌트

 

value에 color:"green" 을 담아 자식 컴포넌트에 보낸 후

 

Dcontext.jsx

 

Consumer: Provider에서 제공한 value 값을 현재 context 값으로 받아와 사용하게 해주는 Context 내부의 컴포넌트

 

자식 컴포넌트에서 context를 통해 style을 지정하고 있다.

 

FontSizeProvider.js

 

useState() : 함수형 컴포넌트에서 상태를 관리하는데 도와주는 hook 함수 

fontSize: 현재 상태를 관리할 변수

setFontSize: fontSize변수의 값을 변경시켜주는 함수

 

useInput.js

 

useInput: 폼 입력의 상태를 관리하는 hook 함수이다.

 

초기값을 설정하고 입력 값이 들어오면 onChangeInput 으로 들어와 setInput으로 값을 변경해 상태를 관리한다.