데이터 흐름과 props

컴포넌트에 props 전달하기

• 부모 컴포넌트에서 전달받을 인자를 Avatar({person, size}) 이렇게 표현 !!!
  • == function Avatar(props) { // 구조분해할당 let person = props.person; .. }
• props를 전달하지않거나, undefinded로 전달 되었을때 기본값이 사용된다.

function Avatar({person, size = 100})

https://ko.react.dev/learn/passing-props-to-a-component

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법

const Parent = () => {
	return <Child name="김루나" age={20}/>;
}

const Child = (props) => {
	return (
		<div>
			이름 : {props.name}, 나이 : {props.age}
		</div>
	)
}

// 구조분해할당을 사용
const Child = ({name, age}) => {
	return (
	<div>
		이름 {name}, 나이 : {age}
	</div>
	)
}

단방향 데이터 흐름

리액트는 단방향 데이터 흐름을 따릅니다. 데이터는 부모에서 자식으로만 전달됩니다. 자식이 부모의 상태를 변경하려면 부모가 함수를 props로 전달해야함.

const Parent = () => {
	const [count, setCount] = useState(0);
	return <Child count={count} onIncrement={()=> setCount(count+1)}/>;
}

const Child = ({count, onIncrement})=> {
	return (<div> 
		카운트 : {count}
		<button onClick={onIncrement}>증가</button>
	</div>)
}

props는 기본적으로 “변경할 수 없다”라는 의미의 불변성을 가지고 있다. 컴포넌트가 props를 변경해야하는 경우, 부모 컴포넌트에 다른 props, 즉 새로운 객체를 전달하도록 “요청”해야한다.

그러면 이전의 props는 버려지고, 결국 자바스크립트 엔진은 기존 props가 차지했던 메모리를 회수하게 된다. “props 변경”을 시도하지말고, State의 setState를 사용하면 된다.