HTML

폼 요소

input

• input에 들어가는 숫자 값은 string이다.

---

React

이벤트로 상태를 변경하고자 할 때는 set 함수를 함수에 담아서 전달해야 한다.
그렇지 않으면 무한 리렌더링 하게 된다.

Context

일반적으로 상위 요소에서 하위 요소로 state를 전달할 때 발생하는Props Drilling Issue를 방지하기 위해 사용한다.
👉 중첩된 요소를 모두 거치지 않고 바로 전달할 수 있도록 한다.

사용법

외부 contexts 폴더에 Context를 정의하여 사용한다.

읽기 전용

const 생성된컨텍스트 = createContext(초깃값);

useContext(생성된컨텍스트);

1. 기본값에 상태를 전달하고 변수에 할당한다.
2. useContext로 접근할 수 있다.

읽기/쓰기

const 생성된컨텍스트 = createContext();  // 빈 Context 생성
const [state, setState] = useState(초깃값);  // 상태 생성

<생성된컨텍스트.Provider
  displayName="확장프로그램에서 보여질 이름"
  value={state, setState}
>
/* 빈 Context에 생성한 상태를 공급하고, 내부 Component에서 해당 상태를 사용할 수 있다. */

  <사용할Component />

</...>

1. 빈 Context를 생성한다.
2. 상태를 생성한다.
3. 생성한 Context 내부에서 사용할 상태와 하위 요소를 정의한다.