props와 state

props

부모 컴포넌트가 자식 컴포넌트에 전달하는 값으로, props는 읽기 전용이라 자식 컴포넌트에서 수정할 수 없습니다.

const childComponent = (props) => {
	props.id = 1; // 에러 발생 가능
	return <div>{props.id}</div>
}

props를 통해 컴포넌트 간 데이터 흐름을 예측 가능하게 만들고, 컴포넌트의 재사용성을 높입니다.

props가 자식 컴포넌트에서 변하지 않는 이유?

리액트의 단방향 데이터 흐름 원칙 때문입니다.

1. 데이터 흐름을 단방향으로 설계해 컴포넌트 간의 데이터 흐름을 예측 가능하고 일관성있게 만들 수 있어 상태 관리가 간단해집니다.

2. props는 읽기 전용이라 특정 상태가 어디서 변했는디 예측할 수 있어 버그 가능성을 줄이고 디버깅을 쉽게 합니다.
   만약 props가 변경될 수 있다면, 자식 컴포넌트는 독립적으로 동작하지 않게 되고, 재사용이 어려워질 수 있습니다.

props가 불변으로 유지됨으로써 컴포넌트는 외부 입력에 의존할 뿐 내부적으로 변경하지 않아 재사용성이 높아지고, 코드의 캡슐화가 강화됩니다.

자식에서 값을 변경하고 싶으면?

부모로부터 상태 변경 함수를 전달받아 사용합니다.

const Parent = () => {
	const [number, setNumber] = useState(1);
  
  	return <Child number={number} setNumber={setNumber} />
}

const Child = (props) => {
	return (
      	<>
        {props.number}
        <button onClick={() => props.setNumber((prev) => prev + 1)}>+1</button>
        <>
      )
}

이렇게하면, 데이터는 여전히 부모 컴포넌트에서 관리해 일관성을 유지할 수 있습니다.

이러한 기법을 상태 끌어올리기라고 합니다.

state

컴포넌트 내부에서 관리되는 데이터로 동적으로 변경될 수 있습니다.

컴포넌트 내부의 state가 변경되면, 컴포넌트의 렌더링에 영향을 미쳐, UI가 업데이트 됩니다.

state는 주로 사용자 입력이나 네트워크 요청의 응답에 따라 변하는 데이터를 관리할 때 사용됩니다.