양방향 바인딩

리액트의 양방향 바인딩(Two-Way Binding)은 부모 컴포넌트의 상태가 자식 컴포넌트의 props로 전달되는 동시에 자식 컴포넌트에서 변경된 값이 부모 컴포넌트의 상태에도 즉시 반영되는 메커니즘을 의미한다.

주로 사용자 인터페이스 요소(입력 필드)의 값과 상태를 동기화할 때 유용하다.

 

📌 state를 이용한 양방향 바인딩

부모 컴포넌트가 inputValue라는 상태를 가지고 있고, 이 상태를 자식 컴포넌트에 value의 props으로 전달한다.

자식 컴포넌트에서는 입력 필드의 값이 변경될 때마다 handleChange 함수를 통해 onInputChange 콜백을 호출하여 부모의 상태를 갱신한다.

import React, { useState } from 'react';

// 부모 컴포넌트
function ParentComponent() {
	const [inputValue, setInputValue] = useState('');

	const handleInputChange = (newValue) => {
		setInputValue(newValue);
	};

	return (
		<ChildComponent value={inputValue} onInputChange={handleInputChange} />
	);
}

// 자식 컴포넌트
function ChildComponent({ value, onInputChange }) {
	const handleChange = (e) => {
		const newValue = e.target.value;
		onInputChange(newValue);
	};

	return <input type="text" value={value} onChange={handleChange} />;
}

 

🌀 부모 ➡️ 자식 (하향식 전달)

• Props를 이용하기

 

🌀 자식 ➡️ 부모 (상향식 전달)

<input onChange={handleChange}>

• onChange로 사용자 입력을 수신한다.
• 사용자가 타이핑할 때마다 handleChange 함수가 실행된다.
• 실행될 때마다 브라우저가 제공하는 디폴트 이벤트 객체(event)를 얻는다.
• 부모로 부터 받은 포인터 함수(props)을 이용해 부모로 event 값을 전달한다.

 

🔥 컴포넌트에 props 추가하기

<input onChange={handleChange}>

• <input> 요소에 이벤트 리스너를 추가하듯이 컴포넌트는 속성(props)을 통해 외부에서 값을 전달받을 수 있다.
  ex) onChange
• 속성의 값으로 함수를 전달하는데, 함수를 실행시키지 말고 전달만 하면 된다.
  ex)
  onChange={handleChange()} (X)
  onChange={handleChange}(O)

 

 

 

📌 커스텀 훅을 이용한 양방향 바인딩

커스텀 훅을 만든다.

부모 컴포넌트에서 이 훅을 이용하여 현재 상태의 값과 상태를 업데이트하는 함수를 얻고 자식 컴포넌트에 전달한다.

 

import React from 'react';

// 커스텀 훅
function useTwoWayBinding(initialValue) {
	const [value, setValue] = React.useState(initialValue);

	const handleChange = (e) => {
		setValue(e.target.value);
	};

	return [value, handleChange];
}

// 부모 컴포넌트
import useTwoWayBinding from './useTwoWayBinding';

function ParentComponent() {
	const [inputValue, setInputValue] = useTwoWayBinding('');

	return (
		<ChildComponent value={inputValue} onChange={setInputValue} />
	);
}

// 자식 컴포넌트
function ChildComponent({ value, onChange }) {
	return <input type="text" value={value} onChange={onChange} />;
}

 

🌀 커스텀 훅 사용 장점

• 로직을 추상화할 수 있고, 다양한 컴포넌트에서 재사용할 수 있다.
• 로직을 분리했기 때문에 컴포넌트 자체는 더 간결하고 가독성이 높아진다.
• 로직을 일관되게 사용할 수 있다.