React 핵심 개념 정리

Props

부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터
읽기 전용이며 자식 컴포넌트에서 수정할 수 없다.

State

컴포넌트 내부에서 관리하는 데이터
값이 변경되면 해당 컴포넌트는 리렌더링된다.

리렌더링 발생 조건

• 자신이 관리하는 state 변경
• 전달받은 props 변경
• 부모 컴포넌트 리렌더링

Controlled Component

input의 value를 state로 관리하는 방식
input의 값은 항상 state 기준으로 동작한다.

const [value, setValue] = useState("");

<input 
	value={value} 
	onChange={e => setValue(e.target.value)} 
/>

state가 input을 제어하는 구조이므로
React가 입력값의 주인이 된다.

객체 state 관리

객체를 state로 사용할 경우, 일부 값만 수정하면 나머지 값은 자동으로 유지되지 않는다.
따라서 기존 state를 스프레드 연산자를 이용하여 복사한 뒤 수정해야 한다.

const [state, setState] = useState({
	name: "",
	birth: "",
	country: "" 
});  

setState({   
	...state,
	name: "홍길동"
});

결과:

{   
	name: "홍길동",
    birth: "",
    country: "" 
    }

state는 병합이 아닌 교체 방식으로 동작하므로,
객체 state는 항상 새 객체로 만들어 업데이트해야 한다.

useRef

렌더링과 상관없이 값을 유지하는 저장소
.current 프로퍼티를 통해 값에 접근함
DOM 요소에 직접 접근하여 조작 가능

const ref = useRef(null); 
<input ref={ref} />
ref.current.focus();

값이 바뀌어도 리렌더링되지 않는다.

useRef은 "화면에 안 보여도 되는 값"을 다루는 훅

useState vs useRef

let 변수 vs useRef

컴포넌트 내부 let 변수
→ 렌더링마다 초기화됨

전역 let 변수
→ 컴포넌트 간 공유됨

useRef
→ 렌더링과 무관하게 값 유지
→ 컴포넌트별로 독립적

React Hooks

함수형 컴포넌트에서
state, ref, 생명주기 기능을 사용할 수 있게 해주는 API

대표 훅:

• useState
• useRef
• useEffect

Custom Hook

상태 로직을 재사용하기 위한 함수
반드시 use로 시작해야 한다.

function useInput() {
   const [value, setValue] = useState("");
   const onChange = e => setValue(e.target.value);     return [value, onChange]; }

Hook 규칙

• 함수 컴포넌트 또는 커스텀 훅 안에서만 호출
• 조건문, 반복문 안에서 호출 불가
• 이름은 반드시 use로 시작

요약

state는 화면 변경용
ref는 DOM 조작 및 내부 변수용
Hooks는 함수형 컴포넌트에 기능을 연결하는 도구
커스텀 훅은 로직 재사용 패턴