📌 순수 컴포넌트
상태가 없기 때문에 항상 같은 props에 대해 같은 사용자 인터페이스를 렌더링해주는 컴포넌트
이 부분을 읽으면서 수업시간에 컴포넌트화를 강조했던 내용이 생각났다.
정말 작은 단위까지도 컴포넌트로 분리해야 하는 이유를 이 책을 읽으면서 더 구체적으로 깨닫는 느낌이랄까?
(하지만 여전히 컴포넌트화는 너무 어렵다...)
📌 input Element
input type에 color가 있다는 사실을 처음 알았다.
<form>
<input type="color" required />
</form>위 코드는 사용자가 color wheel에서 색을 선택할 수 있는 HTML 색 입력을 보여주며, required를 넣어 필수 입력값으로 설정해주었다.
📌 React Hooks
✏️ useRef
useRef는 컴포넌트의 생명주기 (lifetime) 값을 저장하는 객체이다.
import {useRef} from "react";
export default function AddColorFomr({onNewColor = f => }) {
const hexColor = useRef();
const submit = e => {
e.preventDefault()
const color = hexColor.current.value;
onNewColor(color);
hexColor.current.value = "";
};
return (
<form onSubmit={submit}>
<input type="color" required ref={hexColor}/>
</form>
);
}JSX의 입력 엘리먼트에 ref 속성을 추가해 useRef 참조의 값을 설정하면 DOM 엘리먼트를 직접 참조하는 참조 객체에 대한 current 필드를 생성한다.
이 필드를 사용해 DOM 엘리먼트에 접근할 수 있고, DOM 엘리먼트에 접근할 수 있으므로 엘리먼트의 값을 얻을 수 있다.
📝 event.preventDefault?
event.preventDefault란, 어떤 이벤트를 명시적으로 처리하지 않은 경우 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정하는 것을 말한다.
HTML폼 제출 시 디폴트 동작이 현재 URL로 폼 엘리먼트에 저장된 값이 본문에 들어있는 POST 요청을 보내는 것이므로, 위 코드에서는 첫 줄에 event.preventDefault를 넣음으로써 브라우저가 폼을 POST 요청으로 제출하지 못하도록 막은 것이다.
DOM 노드의 value 값을 직접 ""로 설정함으로써 DOM 노드의 속성을 변경했다.
이러한 코드는 명령형 코드인 바, DOM을 통해 폼 값을 저장하기 때문에 제어되지 않는 컴포넌트 (uncontrolled component) 이다.
제어되지 않는 컴포넌트를 제어가 되는 컴포넌트로 만들기 위해서 useState와 onChange를 사용하여 폼 값을 DOM이 아닌 리액트로 관리할 수 있다.
📌 React Context
✏️ React Contenxt란?
context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다.
상태 데이터를 데이터가 필요한 컴포넌트에 도달할 때까지 props 형태로 모든 중간 컴포넌트를 거쳐 전달하는 과정을 생략하고 상태 데이터가 필요한 컴포넌트에 바로 데이터를 전달한다.
✏️ Context Provider와 Context Consumer
Context Provider는 컴포넌트 트리 전체나 트리 일부를 감싸는 리액트 컴포넌트이다.
Context Provider를 만들어 데이터를 Context에 넣을 수 있다.
Provider는 자신이 감싸는 컴포넌트의 자식들에게만 Context를 제공한다.
Context Consumer는 Context에서 데이터를 읽어들이는 리액트 컴포넌트이다.
✏️ Context 활용하기
새로운 Context 객체를 만들 땐 createContext라는 함수를 사용한다.
Context 객체 안에는 Context Provider와 Context consumer라는 두 가지 컴포넌트가 들어 있다.
createContext를 통해 만들어진 Context 안에서 데이터를 읽어오기 위해서는 useContext 훅을 사용하면 된다.
useContext는 Context consumer로부터 필요한 값을 얻는다.
Context Provider 자체로는 Context 상에 들어 있는 값을 변경할 수 없다. 따라서 Context Provider를 렌더링하는 상태가 있는 컴포넌트를 만들어야 한다. Context Provider를 렌더링하는 상태가 있는 컴포넌트를 커스텀 프로바이더 (Custom Provider)라고 한다.
